"This Week Events" Widget – Background Color

[Keith]

Can you tell me how to change the background color, font size and color of the “This Week Events” widget?
I’m assuming a change to custom CSS would be needed? I don’t want to change the colors of our calendar, just the “This Week Events” widget.
Thank you! Our company LOVES the Events Calendar!!!

[Geoff B.]

Good evening Keith and welcome to the Events Calendar Support forum!

Thank you for reaching out to us and for your fantastic words.
We are super stoked that you like our plugins.

I would love to help you with this topic.

You are absolutely right. To change these things will most likely require adding CSS rules to your theme’s style.css file or in your Custom CSS metabox.

But, before you do that, I would recommend heading over to Events -> Settings -> Display and making sure your setting is at “Full Styles”.

If you need help with the CSS, could you send me a sample URL that I can look at ?

Best regards,

Geoff B.

[Keith]

I just changed the Settings->Display to “Full Styles”. I’m not able to send a URL because it’s a private intranet. We are wanting to use the “This Week Events” widget on our Home page. Can you show me how to change the background color and font size/color of this individual widget itself? We only want to change these things on this specific widget.
Thank you!

[Geoff B.]

Good evening Keith,

I take it that changing the setting to “Full Styles” had no impact.
I would still recommend keeping that setting.

I totally understand that you might not be able to share a URL.
That being said, depending on the theme you are using the CSS rules I will provide you with might not work as a result.

.tribe-this-week-widget-day-wrap {
background-color: gray;
}

.tribe-this-week-event {
border-left: grey;
color: blue;
}

.tribe-this-week-widget-wrapper .entry-title {
color: red;
font-size: 26px;
}

.tribe-this-week-widget-wrapper .tribe-this-week-widget-day .duration {
font-size: 10px;
}

.tribe-this-week-widget-wrapper .tribe-this-week-widget-day .tribe-venue {
font-size: 15px;
}

Let me know if that helps.

Have a great day!

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