Events Calendar Pro – Widget – How to Change the colours?

[clubpage]

Hi, I assume that you can change the colour of the min-calendar widget by CSS. I am very new to wordpress and css, can anyone give some advice as to what I need to do.
Thanks in Advance
Phil

[Barry]

Hi Phil, I’m going to move this across to the Events Calendar PRO forum as it isn’t really Eventbrite specific (but the thread URL will remain the same).

[Barry]

Hi, I assume that you can change the colour of the min-calendar widget by CSS.

You certainly can. I’m not sure exactly what you’re thinking of but the first step would be to review the Themer’s Guide (link over on the right, under Useful Resources) and the section on custom CSS in particular, which will guide you as to safely setting up your own stylesheets.

Does that help?

[Andy Fragen]

Phil, the current version of The Events Calendar Category Colors will do something like this. For an example look at http://tribe.drfragen.info

[Andy Fragen]

I see you’ve already discovered this. Is that what you’re looking for or something else?

[clubpage]

Hi Thanks for your response.
I have looked in the themer’s guide, and have tried to follow the instructions to no avail.
This is what I have done (just to check that it is correct)
Created a file widget-calendar.css in a new folder wp-content/themes/canvas/tribe-events/pro

the widget-calendar.css – i simply added some of the code from the themer’s guide to give it a try, but doesn’t seem to work…. (sorry very new to CSS etc).
What I would like to end up with, is the widget calendar like this

Header – dark green with the month and year in a cream colour
Days in the past – lighter green with cream numbers
Current Date – brown with cream numbers
Future Dates with no events – middle shade of green.
or something similar to that….

Can you give me any pointers in relation to whether the steps above are correct, and what the code should look like…
Sorry to be a pain…

[clubpage]

oh and I forgot also the little date block of upcoming events…
colour would be dark green with cream number and box…
Thanks in advance… BTW really loving the product and the other extensions I have purchased… setup was so easy….

[Barry]

Hi Andy – thanks for helping out here 🙂

Created a file widget-calendar.css in a new folder wp-content/themes/canvas/tribe-events/pro

So it looks like you’ve set things up correctly here, I can see the stylesheet is being loaded, and all that remains is to figure out the CSS 🙂

oh and I forgot also the little date block of upcoming events…
colour would be dark green with cream number and box…

We can’t guide you through all of the different tweaks you want to make but, to get you started, you could do something like the above by adding some rules like these to your widget-calendar.css file.

Hope that helps!

 

[Gina]

I am going to add here rather than start my own topic because I’ve basically got the same problem. I am displaying just the calendar grid part of the widget, no event listings underneath. It shows up with a light gray grid, white text and a white background (so you can’t see there are even the numbers and letters there unless you highlight it). I’ve done the steps above and created a CSS file under
wp-content/themes/mythemename/tribe-events/pro/widget-calendar.css
and tried to get it going with the code example above but that appears to be for the list widget and I don’t know what to put to make the text show up black for the actual calendar grid.
THANKS!

[clubpage]

Hi Barry, Thanks for your help really appreciated it – followed your instructions and works for the individual events. I have had a look through the themer’s guide to try and find what the code names are for each of the elements are (like .tribe-mini-calendar-wrapper .tribe-mini-calendar-list-wrapper .list-date)…. so that I can play around and try and change to what I am looking for…. is this type of information easily available or where could I find it…

thanks in advance..

[Barry]

@Gina: thanks for posting but please do create your own thread! One of the team will be more than happy to help 🙂

I have had a look through the themer’s guide to try and find what the code names are for each of the elements are (like .tribe-mini-calendar-wrapper .tribe-mini-calendar-list-wrapper .list-date)…. so that I can play around and try and change to what I am looking for…. is this type of information easily available or where could I find it…

Phil: I’m afraid we don’t have a consolidated list of CSS hooks. However, our templates (where most of them originate) are open and available for you to review – generally speaking though the easiest approach is to use the developer tools provided as part of most modern browsers, which will quickly let you isolate the elements you are interested in.

Hope that helps!

[Barry]

I’ll go ahead and close this thread – if we can help with anything else please do not hesitate to post new threads as needed. Thanks!

[Author]

Posts