Adjusting the columns and location formatting

Sorry forgot to mention that I’m using the shortcode in a page, not the widget.

Hi,

The 2 columns have these CSS classes and default widths:

.vsel-meta {width:36%;}
.vsel-image-info {width:60%;}

So via the custom CSS page in the Customizer you can change both widths to your needs ??

For making the location field linkable, you should make several changes to the plugin files. For example the type of validation should be changed. So why aren’t you using the More Info link for that?

Guido

Thanks for the info on #1!

As far as your question goes, I guess I was trying to add more functionality to the plugin. I do use the “More Info” link, but not for the location. I use the More Info to take you to the registration page. I was hoping if I could convert the location field to being a link, then if a person wanted to website where the event takes place to see where they are located, etc, that would make it all cleaner looking and I wouldn’t have to add a link in the main description of the event.

I did try a variation of making this work by converting the More Info link to the location’s website, then inside the location field add the city/state to the end of the venue name where the event takes place, but that field doesn’t like any html at all and as a result it didn’t look good visually.

One follow up. I went in and adjusted the column widths. There’s some padding going on between the two columns. What CSS is that please? I would like to lessen it.

Edit: Ok there may not be padding there. After I adjusted the columns and made the meta wider, that fixed the issue with the CITY/STATE I mentioned earlier. (So having the More Info be the link to the venue will probably work.) Now that I tweaked the columns the padding between the two is gone so I think my above question is redundant.

• This reply was modified 5 years, 4 months ago by Esch.

Hi,

There’s no padding but between the both columns there’s a 4% white space (36% + 60% = 96%). So simply change the % of one or both columns.

Another recently added feature is support for the Advanced Custom Fields plugin, so you can consider adding a custom Location field by using that plugin. Info from my main plugin page:

Create a field group for post type “event” and add fields to this group. This field group will be added to the event page in dashboard.
The extra fields are displayed in the frontend of your website underneath the location field.

Guido

I actually tried this earlier today with the custom fields plugin but had issues with that. For one, even if I selected URL or LINK as the type of field, it would never be clickable. The second problem was it would list the field name next to it…

Location: https://FAKEURL.COM
instead of just
https://FAKEURL.COM

and there didn’t seem to be a way to remove that. The bigger issue though is that nothing I did inside that custom fields plugin made the links clickable. :/

Sorry to bother you again but another question related to the CSS.

For “#vsel .vsel-meta-title” I added to it to make the title bold and underlined. This works great on desktop. The problem I’m having is it doesn’t work on my mobile phone. On the phone the title is not bold nor underlined.

Is there another set of CSS used specifically for mobile phones? If so, what would those be? I’m trying to change “#vsel .vsel-meta-title” and “#vsel .vsel-meta p” specifically. Took me a while to realize there may be a second set of CSS for mobiles. Thanks for your help!

Hi,

Regarding the custom location field you’re right, because of the validation all HTML tags are stripped. I will take a look at it later.

And regarding your last question, if the title is a link (clickable) you need to target the link itself:

.vsel-meta-title a {font-weight:bold;}

And currently this is the only CSS for mobile screens (taken from plugin stylesheet):

/* Mobile */
@media screen and (max-width:767px) {
	.vsel-meta, .vsel-meta-right {width:100%; clear:both; float:left;}
	.vsel-image-info, .vsel-image-info-left {width:100%; clear:both; float:left;}
}

Thanks for the quick response. I actually disabled single event pages, so the titles to each event are no longer links. I did go through your CSS via the plugin editor and saw the above mobile code, but since it didn’t have anything specific to the title I thought maybe there was some CSS hiding somewhere else I wasn’t aware of.

I also made sure to have all my CSS changes for the plugin that are in my child theme be at the very bottom as well, thinking I had some mobile code in there conflicting with it, but it didn’t help. I’m at a loss why bold/underlined isn’t showing up on my phone but shows up on desktop just fine. :/

Hi,

About the bold title, did you try adding the !important declaration?

.vsel-meta-title {font-weight:bold !important;}

If this has no effect, please try this HTML on a page:

<h3 style="font-weight:bold">Is this bold text?</h3>

Also no effect? Maybe your theme or even mobile browser is overriding the font weight of the H3 in mobile screen.

About the ACF fields, I’m working on support for URL fields. Will update plugin later this week.

Guido

Thanks for helping me with this. So !important didn’t work for either bold or underlined however the <h3> tag you asked to insert into the page DOES work. I changed it to be underlined and bold and both worked fine.

Great news about making the ACF url fields clickable, thank you so much for doing that!

Hi,

Guess somehow the stylesheet of your theme overrides the h3 heading.

Try this less cleaner fix to target all h3 tags inside the #vsel div:

#vsel h3 {font-weight:bold !important;}

Or give me the URL of your events page so I can take a look at it myself.

Guido

The above didn’t work either. This is rather perplexing.

I searched the child theme and main theme’s CSS for H3 references but none that I could find seem to conflict with what I’m trying to do.

I even went so far as to add this to the bottom of my child CSS to see if I could force it, but unfortunately it didn’t work either.

@media screen and (max-width: 39.9375em) {.vsel-meta-title {font-size:1.25em;font-weight:bold;color:black;text-decoration:underline;}}

I don’t have these events live yet, so if you want to give me your email address I’ll set it up so you can view them, but without any sort of Firebug solution for mobile, I’m not sure what you will be able to do with it.

On mobile it doesn’t look bad, I just know I could make it look better. If this is some freak unsolvable CSS conflict then I’ll just suck it up and live with it. ??

Thank you again for all your help with this.

Also a side note, I have this in my child CSS..

.vsel-meta-date {clear:none; float:left; width:60%;}
.vsel-meta-time {clear:none; float:left; width:40%;}

I tried to add “font-size:2em;” to both to make it bigger, but nothing I tried changed the font size. Something is suppressing that as well for some reason. Ah well.

Hi,

Sometimes the browser overrides the styling of certain elements, this can be very annoying. But in order to help you further with this, I do need a link so I can take a loot at it there.

To make the font bigger you can try to target whole #vsel container instead of the single elements:

#vsel {font-size:2em;}

(by default it should use the font-size of your theme, the only custom font size inside my stylesheet is for the h3 tag)

Oh, and did you already try this for the h3 tag?

#vsel .vsel-meta h3 {font-weight:bold;}

Or:

#vsel .vsel-meta h3 {font-weight:900;}

I’m not using Firebug myself, but do use the integrated developer tools of Firefox.

I don’t add my email address here, for privacy reasons. I also don’t have contact info at my site. Is there a way to reach you?

Guido