How to change text color

[Derek]

I just upgraded to the latest version of the plugin and it forced me to redo my css setup.

How do I change the font color for the “Events in” and “View as” sections on the top right?

Also, how do I change the font color of the details, venue, map section on a single event page? How do I change the background color of the same section?

[Jonah]

Hi Derek,

You can target the “Events In” with:

.label-tribe-bar-date {
color: #000;
}

For the event meta (details, venue and map section, you can target with:

.tribe-events-event-meta {
color: #000;
}

To style the background you’ll need to be a little more specific with the selector:

#inner .single-tribe_events .tribe-events-event-meta {
background: #000;
}

I hope that helps but let me know if you need anything else.

– Jonah

[Derek]

Thanks Jonah,

The first two worked, but I wasn’t able to change the background.

Also, now the “Events In” part is black, but how do I change the “Date” text under it? Or the calendar text that pops up when you click on it?

Last thing, how do I change the “View As” part to black text?

[Jonah]

You’re welcome Derek.

Hmm, you may need to play with the selectors a bit to style the background. We can’t help you troubleshoot CSS issues too much so you will need to figure out why it’s not working on your own.

You can change the “Date” text with this selector:

#inner .tribe-bar-disabled #tribe-bar-form .tribe-bar-filters input[type="text"] {
color: #000;
}

You should be able to target the “View As” with:

#inner .tribe-bar-disabled #tribe-bar-form .tribe-bar-views-inner label {
color: #000;
}

– Jonah

[Derek]

Thanks Jonah,
Do you have some documentation that shows all what css targets what?

If not, I have a couple more questions…

On this page (http://blondiestrophyroom.com/events/upcoming/?tribe-bar-date=2013-07) how do I change the background color of “July 2013” at the top under previous events and next events?

How do I change the background color where it says, “Free”?

And how do I change the black text color under the titles?

[Jonah]

Hi Derek,

No we don’t have that. That would be way too long of a document! Instead use the browser tools in Chrome, Firefox or Safari by right clicking something you want to view and then selecting Inspect Element from the right click menu. This will allow you to browse the entire source of a page, and click on any element and see what CSS is applied and you can even live edit the CSS right there to get an idea of what modifications you need to make.

Hopefully that should point you in the right direction but let me know if not. You could also try researching using the Inspect Element feature in the browsers above. There’s a ton you can do and this is how I figure out how/what to edit for any website.

– Jonah

[Derek]

Awesome tip, Jonah. Thanks!

[Jonah]

You’re welcome Derek. Are you all set here then? Can I close this thread out?

[Derek]

Yes, all set. Thanks!

[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