Changing Calendar Theme

[Chris]

I need to know how to change the theme of the calendar, in particular the font colors. The colors blend in to the background of my website and they unable to be read.

[Chris]

The main problem I am having is in the detail view. The background is a very light grey and the fonts are white so you cannot read anything. Everything else about the calendar is great so far, but I am not a coder and need some assistance.

Thanks!

[Chris]

Here is a screenshot

[Geoff B.]

Good morning Zach and welcome back!

Thank you for reaching out to us.
I would love to help you with this topic.

There are a couple of ways of changing the appearance of things.

1. Head over to Events -> Settings -> Display and try different settings for the first option on that page
2. Head over to Appearance > Customize and look for the Events Calendar section
3. Try adding CSS rules to your style.css file or in your Custom CSS metabox: .single-tribe_events .tribe-events-event-meta {
color: black;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Chris]

Ok, again not very familiar with CSS so I’m going to ask a stupid question. I was able to change to color of the font but the changes do not stay. How do I save the changes that I am making?

[Geoff B.]

Good evening Chris,

Thank you for writing back.

The best way to do this would be install the following plugin: https://wordpress.org/plugins/simple-custom-css/

This will let you simply paste the code and save it.

Let me know how that goes.

Best regards,
Geoff B.

[Chris]

OK, I have that fixed and I edited the CSS and was able to save and apply the changes. Now I need a CSS change to change the font color of the #tribe-bar-form label. Sorry for all of the questions, I am having to learn on the fly.

Thanks for all the assistance!

[Geoff B.]

Good morning Zach,

Thank you for writing back.
I am sorry for the delay answering, we are experiencing a much higher level of requests than usual.

I am glad you were able to make some progress on the look and feel.
If you are interested in learning a bit more about CSS and how to be autonomous with it, I would recommend reading the following: https://theeventscalendar.com/knowledgebase/using-google-chrome-developer-tools/

With that in mind, try adding the following CSS rule to achieve your goal

#tribe-bar-form label {
color: black;
}

#tribe-events-pg-template {
margin-top: 19px !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts