Text colour

[Ben]

Hi there

How to I change the colour of the Lorum Ipsum text on this page?

http://www.shorefrontfilms.com/hidden/LCC/event/bulleit-boilermaker-party-shaftesbury-ave/

Cheers

Ben

[Brian]

Hi Ben,

Looks like that text color is being set by your theme’s body class.

Try out this css to change it to the color you would like:

.tribe-events-single-event-description {
color: #fff;
}

Add that css to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

Let me know if that helps.

Thanks

[Ben]

That’s great, thanks! That has also changed the ‘details’ and ‘venue’ headers in the box below and because the box is a light colour, the text has disappeared. How do I keep that dark?

[Brian]

Ben,

That change to those titles is not from the coding I gave you. I see we have provided a lot of different style changes for your site. Please note is beyond the support we can provide to do all those changes you would like. So I am going to let you take it from here.

I encourage you to follow this guide on using the browser inspector and learn how to target the css yourself and make the changes you would like.

Are you familiar with using your browser’s inspector tool to find which CSS rule is applied to what element? Since Chrome is probably the most popular browser among developers. There is a pretty good video on YouTube walking you through the basics of using this tool, just in case you do not already know how it works.

Using browser inspection tools is probably the easiest way to figure out how to style an element. As an example I will walk you through how to style the background color of the Month view calendar days/column headings (Monday – Sunday):

1) Right click on current day view header (which by default is gray), then click inspect.

2) In the styles pane on the right you will note all of the CSS styles and rules that apply to this element. You should notice .tribe-events-calendar thead th in the Styles pane on the right hand side. In side of that CSS Rule you will see the background and border color.

3) The easiest way to restyle that is to copy that CSS rule to your theme’s custom css file. I like to precede the rule with the body tag in my custom css file, thus making it more specific and overriding the default. So I would change .tribe-events-calendar thead th to body .tribe-events-calendar thead th. Now you can make changes to colors, sizes, etc.

If the above makes no sense, or sounds like Greek to you, that’s cool too. Sadly though, in order to make modifications like the one you want you need to understand CSS rules and how to override them pretty well. If that does not describe you, have no fear. We actually keep a list of freelancers who are quite capable of making changes on your behalf. You can obtain this list by visiting https://theeventscalendar.com/knowledgebase/find-a-customizer/

Thanks

[Brian]

Since this is marked resolved I am going to close this ticket, but if you need anything else related to this topic or another please post a new topic on the forum and we can help you out.

Thanks

[Author]

Posts