Format events list widget calendar box color

[Terry]

Can I change the color of the border or box on the left side of the events list widget that lists day and date?

Here’s a screenshot: https://www.flickr.com/photos/tomasinitrainingcenter/22367689554/in/datetaken/

[Cliff]

I can probably help with a quick CSS snippet.

Just send me a link to the site and tell me what color you want to change from and to.

[Terry]

Hi Cliff,

Can you send me the CSS syntax?

Not sure what color yet.

Thanks,

Terry

[Cliff]

That’s what I’ll try to do once I get a link to the site that screenshot came from…

[Terry]

Here you go –

http://www.hessel.org/students-1/

Terry

[Cliff]

The CSS file that adds border-left: 5px solid #d8882d styling is http://www.hessel.org/?teccc_css=30f16fc7b078cc06c9a7ea87d7cb9d35

This is not from our plugin. I’m guessing this is from your theme.

The styling is added for a BUNCH of different selectors:

Nevertheless, you can override this code with CSS like this:

.tribe-events-adv-list-widget .tribe-mini-calendar-event a {
border-left-color: red !important;
}

Ordinarily, I don’t like to use !important, but there are many CSS selectors, plus I’m not sure if you want all of them the same color or different colors per event category. Regardless, this should get you headed in the right direction, which is the extent of our support for personal customizations.

===

You can add custom CSS code via your child theme’s style.css file or via a plugin like Simple Custom CSS or, my favorite, Jetpack. Jetpack supports regular CSS and the LESS and Sass pre-processors.

===

I hope this helps!

[Terry]

Cliff,

Great information, but it changed a different element then I want to address. Sorry I didn’t communicate clearly.

I want to change the border color on the little rectangular box at the left side of the widget that contains the day/date.

http://www.hessel.org/children/.

Can you give me the path?

Thanks

[Cliff]

This should work for targeting just that specific widget (we’re targeting an ID, not a Class):

#tribe-events-adv-list-widget-3 .tribe-mini-calendar-event a {
border-left-color: red !important;
}

Please note that if you need further customization help, you’ll need to consult your theme author or designer. We generally do not provide in-depth customizations, per our Scope of Support Terms.

I hope the help I’ve provided thus far gets you to accomplish what you’re after! 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts