Fonts in Events List Widget are HUGE after upgrade to PRO

[1968rouleur]

Just upgraded from to The Events List PRO and now the fonts in my Events List Widget are absurdly large. I was previously able to fix this in the free version by creating a Tribe-Events.css file and putting it in a Tribe-Events folder inside my theme folder. I can’t figure out how to do this in the paid version. I tried creating “Pro” sub-folder inside my existing Tribe-Events folder but am not sure what .css file should go in it…if that’s even the right solution. I’m finding the Themer’s Guide more confusing that helpful on this topic. Please help, my site looks horrible the way it is now. Thanks.

[Casey D]

Hello 1968rouleur,

Thanks for upgrading! Once we get this sorted out I’m sure you’ll love it. 😀

Sorry you’re experiencing this right from the start! I agree that that section of the override documentation is a little confusing, we’ll consider rewording it.

I believe the ultimate answer is to name your file ‘tribe-events-pro.css‘ and place it in the ‘wp-content/themes/your-theme/tribe-events/pro/‘ directory.

Also, check your css selectors. I don’t think they would have changed, but I believe the list widget gets an upgrade with pro, so they might need to be tweaked.

Does this make sense? Let me know if this doesn’t work for you.

Cheers!

– Casey Driscoll

[1968rouleur]

Sorry for the delayed response. Unfortunately this does not resolve the issue. Here’s the code that is currently in the tribe-events-pro.css file that is in the path you specified:

.tribe-events-adv-list-widget .entry-title {
font-size: 10px;
}

Is that wrong? If I need to “check my CSS Selectors” could you point me to where I would find them? That’s not something I’ve had to fuss with in the past.

Thanks.

[Casey D]

Hello 1968rouleur,

I think the css selector changed in the upgrade and you now want this

.tribe-events-list-widget-events .entry-title

I use Chrome, but other browsers have similar ‘inspectors’. If you inspect the element you can look up the classes to target.

 

 

 

Does this make sense? Let me know if this doesn’t work for you.

Cheers!

– Casey Driscoll

[1968rouleur]

Thank you for that. It does make sense however I had the Events List Pro deactivated when you did your screen captures. Now that I have re-enabled it my code looks different and I don’t see the “.tribe-events-list-widget-events .entry-title” on that particular line.

(By the way I’m not seeing any way to paste a screen shot into my reply here)

Any chance you could take another look soon? I can’t leave my site like this for too long because it looks ridiculous.

Thanks!

[1968rouleur]

One other note, after re-enabling PRO I also have to re-add the event listing widget to my sidebar…

[1968rouleur]

Any update on this? Been waiting a few days with these crazy fonts on my site hoping someone could take a look and provide some direction. Any help would be appreciated.

[Casey D]

Hello 1968rouleur,

For future reference, here are some excellent tools for uploading some screenshots!

It appears your original css should be working, if you have this code (with the important) it should work like you want it too.

.tribe-events-adv-list-widget .entry-title { font-size: 10px !important; }

Does this make sense? Let me know if this doesn’t work for you.

Cheers!

– Casey Driscoll

[1968rouleur]

No, sorry, it doesn’t make sense. What do you mean by my “original css”?

Here’s the folder path I have now:

View post on imgur.com

Both of the files you see now contain the following code per your instructions:

View post on imgur.com

What am I doing wrong?

[Casey D]

Hello 1968rouleur,

Sorry our Themer’s Guide can be a bit confusing https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/#customizingstyles

I meant the ‘original css’ from your second post would work just fine (the one I corrected you on), as long as you have the ‘!important’ in there too.

I would ignore the ‘pro’ file and directory names and just rename the file to

tribe-events/tribe-events.css

Does this make sense? Let me know if this doesn’t work for you.

Cheers!

– Casey Driscoll

[1968rouleur]

That didn’t work. After trying every possible combination the correct solution was to create the following file:
tribe-events-pro.css
In the following path:
tribe-events/pro
With the following code:
.tribe-events-adv-list-widget .entry-title { font-size: 16px !important; }
So now the font size has been successfully changed (took six days!).
However it still doesn’t look right. At the top of each individual event listing there is a large blank space followed by a line that starts with tiny arrow and then contains blank space and then there’s finally the Event Title on the following line. The overall effect is too much blank space. I’m afraid to ask but can we remove the blank space and the line with the little arrow on it?

View post on imgur.com

[Casey D]

As before, that level of customization typically goes beyond the scope of the forums. We usually do not support the styling customizations of individual sites. That said, I’d be happy to offer you this additional support though! 🙂

The code you need is similar to what is below. Your mileage may vary, but the image shows that it will remove the margin between the events.

.tribe-events-adv-list-widget ol li {
margin-bottom: 0px !important;
}

.sidebar li::before {
content: ”;
}

Does this make sense? Let me know if this doesn’t work for you.

Cheers!

– Casey Driscoll

[Barry]

Hi 1968rouleur,

I’m a fellow member of the support team and I just wanted to check in here and make sure everything is sorted for you.

It sounds like the outstanding issues are with excess whitespace and the small arrow graphic. Casey’s done an awesome job explaining that one but I see you haven’t had a chance to put those rules into effect just yet – for your convenience, I just wanted to summarize the next steps:

• You’ve already set up a tribe-events-pro.css file and right now that contains one rule relating to the .entry-title element
• You now need to add two more rules – one to deal with the extra whitespace, one to remove that arrow
• Please replace the existing contents of your custom tribe-events-pro.css file with the following code:

.tribe-events-adv-list-widget .entry-title { font-size: 16px }
.sidebar .tribe-events-adv-list-widget li:before { content: "" }
.tribe-events-adv-list-widget ol li { margin-bottom: 0px }

I hope that helps and if you have any further questions about this or find that doesn’t quite work please don’t hesitate to let me know 🙂

[1968rouleur]

Works! Thank you both for your efforts!

[Barry]

Excellent – glad that worked 🙂

I’ll go ahead and close this thread – but of course if anything else crops up please just open a new thread and one of the team will be only too happy to help.

[Author]

Posts