Hi, thanks for using our plugin.
We have this write up to help on figuring out what css to modify. The example is very similar to what you are looking to do:
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/
