CSS styling Qs for Events Widget

[dostie]

I’m confused on the best way to solve some styling issues for the Events Widget. It has been a few weeks since logging in here and the last bit of advice I took to heart was to create a /tribe-events folder inside my theme folder with a tribe-events.css file in the tribe-events folder and to make my style changes there.

I have also read advice on this forum to simply make the changes in the style.css file for the theme.

So first, what is the better way to go – make changes in the themes style.css or in /tribe-events/tribe-events.css?

Secondly, I’m having a hard time figuring out what classes to modify – or rather, the classes or div’s that Inspect Element shows are the ones controlling the style of the listing of events in the widget are NOT responding.

For instance, I’ve figured out that to change the font for the dates of an event I need to modify:
.tribe-events-list-widget .duration{

but when I try to modify the name of the event – changes to:
.tribe-events-list-widget .entry-title summary {
doesn’t change a thing.

Furthermore, a major overriding ingredient seems to be h4.ol.hfeed.vcalendar. Changes to this do nothing either. I don’t like the inherited margin-left: 29px attribute and want that reduced to 5px but can’t seem to figure out how to control it. Same for the margin-bottom value. And NO, I will not modify the root values in my theme because that will mess with everything else. I just want to modify the elements of the modern-tribe calendar.

One more thing, the site I’m using to test all this does not have Calendar Pro installed, but the live site does. Hopefully there are no significant differences in terms of styling.

[Andy Fragen]

I’ve been playing with the CSS in the widgets and I can tell you that yes, there re differences between the selectors in Pro and non-Pro.

Best practice for CSS overrides specific to TEC would be to put them in tribe-events.css. But putting in either will work.

What specifically do you want to change? In what widget is it in? There are 4 widgets in Pro. Can you point to where others can see your problem?

Now lets get to fixing.

[dostie]

Okay, a few more details.

The site I’m working out the details on is http://www.demo.earnyourturns.com. The site that uses the calendar for public viewing is the same, minus the .demo. part of the URL. In both cases I’m using a child theme based on Graphene. The Events Calendar widget is in the R sidebar in both cases, about 2 or 3 widgets down from the top.

I’m going to be using the Events List widget in the Pro version, which, near as I can tell is the same as the events widget in the basic version (3.0.1).

So…here’s what I want to fix. The margin-left for the entire list of events is WAY to large (29px). I want it reduced to 5px but can’t figure out what to modify. I also want to be able to control the spacing between events (standard spacing of 30px is, again, WAY too much), as well as the font for the title of the event, and the time (duration) of the event.

Here is what I have for themes/grapheneyt/tribe-events/tribe-events.css:

/* Change space between events listed in Events Widget ——-
——- */

.tribe-events-list-widget ol li {
margin-left: 5px;
margin-bottom: 8px;
list-style: none;
}

h4.ol.hfeed.vcalendar {
margin-left: 5px;
}

.tribe-events-list-widget .entry-title summary{
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size:14px;
font-weight: bold;
color: #FFCC99
}

.tribe-events-list-widget .duration{
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size:11px;
font-weight: normal;
color:#0099FF
}

One other question/point. Some other support forums recommend using the back tick to denote the beginning and end of code. No such indication on this forum. Is that general WordPress support forum protocol? How would a newbie like me know that?

[dostie]

I’ve had some success (see http://www.demo.earnyourturns.com), but still cannot figure out what EXACT class definition will control the display of the Event Title in the Event List Widget.

[Andy Fragen]

Try this.
.tribe-events-adv-list-widget h4.event-title.summary a {}

[dostie]

Thanks for the tip…but no cigar. That did NOT do the trick. Here’s what I have so far. All control what I want them to control, EXCEPT the display of the Event Title in the Event List Widget.

.hfeed.vcalendar{
margin-left: 5px;}

.tribe-events-list-widget ol li {
margin-bottom: 8px;
list-style: none;
}

.tribe-events-adv-list-widget h4.event-title.summary a {
font-weight: bold;
color: #CC9966;
}

.tribe-events-list-widget .duration {
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size:11px;
font-weight: normal;
color:#3388a9
}


I can live with it as is, so on to my next Q. This is all within wp-content/themes/my-theme/tribe-events/tribe-events.css for the free version of Events Calendar. For the Pro version the Tribe tutorials say to put this in the theme folder as follows:

wp-content/themes/my-theme/tribe-events/pro

But what CSS file do I modify? tribe-events-pro.css OR widget-calendar.css. Seems like the latter, but since it IS different that the free version I want to be extra clear up front. Thanks for your help.

[Andy Fragen]

Leave it in /tribe-events/tribe-events.css and install The Events Calendar User CSS plugin.

What exactly are you trying to do to the Events Title?

[Andy Fragen]

And are you trying to change the Event Title in the PRO Events List widget or the free version. The selectors are different.

[dostie]

Since it takes longer to wait for a response than try it, my last Q was semi in vain, but not without reason. Making the changes outlined above to ../my-theme/tribe-events/pro/calendar-widget.css does NOT work. But, changes to ../my-theme/tribe-events/pro/tribe-events-pro.css DO.

[Andy Fragen]

If you install and activate the plugin referenced above you should be able to keep all your tribe-events related CSS in the same file.

[dostie]

Thanks. Didn’t know about that plug-in.

To answer your earlier question – I don’t like the default formatting of the Events List Widget. Regarding the Title, I just want to change the font, style, and color in the widget. I can do that for the Duration of the event, but not the Title. Not yet.

[Andy Fragen]

dotsie, I’m doing this for the next version of the Category Colors plugin. You can see what it looks like at drfragen.info

I’m sure we can figure this out to give you exactly what you want. What CSS do you want to apply? I’ll try to find a solution tomorrow when I have more time.

[Andy Fragen]

dotsie, this should be the selector for the Events List title.

.widget-area .widget a { }

It seems to work for both core and PRO.

[Barry]

Thanks for jumping in here Andy 🙂

Dostie: does that get you closer to where you want to be with this?

[dostie]

So it appears I need TEC User CSS plug-in to keep it “simple.” I downloaded it, then I checked the plug-in’s site and it said:
Automatically load /my-theme/events/events.css if it exists using wp_enqueue_style.

But it didn’t or I don’t understand what this is implying.
As for the class selector, I need to go try that.

[Author]

Posts