Need to change font size in Event List widget and Calendar list view. Possible?

[Donato D’Angio]

I’m trying Calendar Events free Tribe stylesheet and have no control over font size in List view. Is this possible easily, without extensive CSS knowledge in Pro version?

[Geoff B.]

Good evening Donato and welcome to the Events Calendar forum!

Thank you for your interest in our products.
We’ll be glad to answer your questions.

have no control over font size in List view. Is this possible easily, without extensive CSS knowledge in Pro version?

Actually control over the font-size should be rather simple CSS.

However, it will all depend on your settings under Events -> Settings -> Display.

Make sure you have the “full styles” option selected (and not the tribe events styles which are harder to change).

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.tribe-events-list .tribe-events-event-image+div.tribe-events-content {font-size: 12px !important}

And to answer your question, the Pro version does not offer additional CSS capabilities per se.

Let me know how that goes.

Best regards,
Geoff B.

[Donato D’Angio]

This is what I pasted in style.css:
/*
Theme Name: Virtue – Premium
Theme URI: http://www.kadencethemes.com/product/virtue-premium-theme/
…
License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html
*/
.tribe-events-list .tribe-events-event-image+div.tribe-events-content {font-size: 12px !important}

to no avail. Did change to FullStyle using DefaultEvent template then Sidebar showing the Event List widget.

[Geoff B.]

Good evening Donato,

Thank you for writing back.

I am quite surprised that the CSS rule did not rule.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.events-list #tribe-events .tribe-events-content p {font-size: 12px !important}

If that does not work, could I please have the URL to your Calendar ?

Best regards,

Geoff B.

[Donato D’Angio]

Geoff
My Event Calendar url is http://thepianodan.com/events/ and http://thepianodan.com/portfolio/
I’m using List setting as default for in the main Event page so I can easily determine if the CSS change worked. Normally that would be month view.

The “portfolio” link above is how I want to display the “Upcoming Gigs” list using Primary sidebar widget. If you notice the “Franklin Residence” title as well as Time/Date info is so large it’s wrapping in the Primary sidebar.

I added the above CSS to the Virtue – Premium: style.css box as well as the Custom CSS Box in the Virtue Premium Theme Options Advanced Settings. Neither worked.

Let me know if I need to set up a temporary admin login for you.
Thanks
Dan

[Geoff B.]

Good evening Dan,

Thank you for your answer.

I think I know what is going on, based on your URL.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.events-list .tribe-events-loop .tribe-events-event-meta {font-size: 24px !important}

Let me know if that helps.

Have a great day!

Geoff B.

[Donato D’Angio]

Dear Geoff
Was unable to get back to you sooner on this but it’s still not working as needed. I’m adding more detail of where I need help and why the CSS code you’ve forwarded isn’t working.
In my http://thepianodan.com/live/ page I use the Default Template that is provided in my Virtue plug-in. This leave a Primary Sidebar by default. In the Widget section a drag the Events List widget to the sidebar. This then displays Upcoming events in any page that uses the Deafly Template. As shown below the code calls it id=”ktsidebar” then when page is displayed it pulls in id=”tribe-events-list-widget-3″ and other widget functions.
I think I need to write CSS to directly affect the widget id=”tribe-events-list-widget-3 or class. This is where my expertise falls off. Can you help with this? Thanks.
Dan

<aside id=”ktsidebar” class=”col-lg-3 col-md-4 kad-sidebar” role=”complementary”>
<div class=”sidebar”>
<section id=”tribe-events-list-widget-3″ class=”widget-1 widget-first widget tribe-events-list-widget”><div class=”widget-inner”>

Upcoming Dates

<li class=”tribe-events-list-widget-events type-tribe_events post-504 tribe-clearfix tribe-events-category-live-gigs tribe-events-venue-503″>

<!– Event Title –>

Franklin Philadelphia


<!– Event Time –>

<div class=”tribe-event-duration”>
<span class=”tribe-event-date-start”>February 22 @ 5:00 pm</span> – <span class=”tribe-event-time”>8:00 pm</span> </div>

<li class=”tribe-events-list-widget-events type-tribe_events post-511 tribe-clearfix tribe-events-category-live-gigs”>

<!– Event Title –>

Franklin Philadelphia


<!– Event Time –>

<div class=”tribe-event-duration”>
<span class=”tribe-event-date-start”>February 25 @ 6:00 pm</span> – <span class=”tribe-event-time”>9:00 pm</span> </div>

<!– .tribe-list-widget –>

<p class=”tribe-events-widget-link”>
View All Events

</div></section><script type=”application/ld+json”>

[Donato D’Angio]

P.S. I need to reduce or control the Font size of the <!– Event Title –> Franklin Philadelphia
<!– Event Time –>

[Geoff B.]

Good evening Donato,

Thank you for the additional details.

If you want an ultra-specific rule, you could try:

#tribe-events-list-widget-3 .tribe-events-list-widget .tribe-event-title {font-size:18px;}

Let me know how that goes.

Best regards,
Geoff B.

[Donato D’Angio]

Geoff
No go on last CSS code.
I think you’re call to .tribe-event-title at the end of the last codeset doesn’t seem to exist in the code inspection window so it’s not changing anything. When I hover over the sidebar widget data there is no reference to .tribe-event-title.
Although I can’t find documentation the text I’m trying to alter “Franklin Philadelphia” is pulled from Location section in the Event setup. (http://thepianodan.com/event/franklin-222/) which I set in the Events section in WordPress Admin. I’m not sure to go from here. It may not be possible to address unless we can understand how the Widget works and gets its data and CSS parameters.
Thanks
Dan

[Geoff B.]

Good evening Donato,

I must say I am truly sorry about this.
Normally, CSS tweaks work much faster than this!

Just to be sure we are talking about the same thing, here is a screenshot.

What I am curious about is that the suggested CSS rule is not showing in the inspector. Is it possible you removed it ? If so, could you put it back.

If you did not remove it, would you mind trying to add the CSS rules through the following plugin’s interface https://wordpress.org/plugins/simple-css/ ?

If none of that works, I would like to offer to login to take a look (not to touch).
For that purpose, I would need temporary credentials (in a private reply).

Best regards,

Geoff B.

 

[Dan]

Geoff

I did leave the CSS code in Style.css and it doesn’t appear in Inspector window. Odd. I didn’t think about that.
The screen shot is exactly right. I try again. Check inspector then load plug-in suggested.
Do you think my theme ( Kadence) is causing style.css not to be recognized. I had added event.css and that didn’t work either.
Do u have a simple css code snippet that I can place in style.css?
Thanks
Dan

[Geoff B.]

Good evening Dan,

It is totally possible that there is something in the theme preventing this from working properly (or maybe some caching / optimizing plugin at work).

Either way, my recommendation would be to use the following plugin’s interface https://wordpress.org/plugins/simple-css/ to add these CSS rules.

You might also want to try different settings for the first option under Events -> Settings -> Display to see if that helps.

Let me know how that goes.

Best regards,
Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts