Text in Calendar View with Calendar Customizer extension

[ncbaroqueorchestra]

I have the Calendar Customizer and its great to be able to change the colors on my calendar…I like a white background in Calendar View, because it looks like a paper calendar. Black or very dark navy blue looks best against the white. However, the calendar text is also a link, and my link color is set to light green (which shows up best against the medium blue of my front page and the navy of my buttons). Is there any way to change the color of calendar view text, and keep my link color unchanged?
Also, is there any way to change the colors on the search bar? I particularly don’t like the gray “Find Events” button. White on gray is hard to read. All buttons on the site are white on navy. The title of this page should be bold: “Events for September 2018”.

[Andras]

Hi there,

Thanks for getting in touch!

I’m happy to hear the you like the Calendar Customizer!

It is possible to change (almost) anything, if not with the Customizer, then with some CSS. 🙂

To be fully clear on what you would like could you please send me a screenshot with some notes and arrows on it so I see what exactly you are wanting to change?

What I understand you would like to change in month view the color of the event title (which is also a link), while leaving the color of other links unchanged.

If this is what you need, then the following css should help you:

[code language=”css”]
.events-gridview h3.tribe-events-month-event-title a {
color: red !important;
}
[/code]

Of course, you will need to change the color to what you need. 🙂

colors on the search bar

As for the search bar, there are no options for that in the Customizer yet, but it is on the roadmap for version 1.2.

Until then you can find some solutions in this snippet:

https://gist.github.com/barryhughes/90d1f64eccfce9a0c841

The title of this page should be bold

I guess we are still talking about the month view. Then this is your thing:

[code language=”css”].events-gridview .tribe-events-page-title {
font-weight: 700;
}[/code]

This will also be implemented in the Customizer in the future.

Hope this helps. Let me know.

Cheers,
Andras

[ncbaroqueorchestra]

Hi Andras, Thank you so much for your response.
I tried putting your CSS in Appearance>Customize>Custom CSS>Global Custom CSS:
.events-gridview .tribe-events-page-title {
font-weight: 700;
}

It worked perfectly. Thank you.
I put this in the same place:
.events-gridview h3.tribe-events-month-event-title a {
color: red !important;
}
It did nothing.
Tried this from the GitHub CSS:
/** Style the “Find Events” button to give it rounded corners and a new color scheme */
#tribe-bar-form .tribe-bar-submit input[type=”submit”] {
background: darkblue;
border: 2px darkblue;
border-radius: 8px;
color: darkblue;
}
Result: Button with nice rounded corners, gray background with navy blue text. What I want is a navy blue (#0c2ba0) button with white (#ffffff) text! (see screenshot #545 for some of my other buttons). See screenshot #546 for results of added CSS: (1) “Concerts for October 2018” is now bold. Good. (2) “Find Events” button is dark blue on gray, instead of white on dark blue, which is what I want. (3) Text of next event (October 12) is green (my link color) instead of red (although I would prefer navy blue like the rest of my site. Dark blue, on a white background is easier to read by people with poor vision).
btw I do not know how to add arrows to a screenshot…lol!

[ncbaroqueorchestra]

Oops, sorry! I forgot to “publish” it. The text on Calendar month view did turn red. I am working on my staging/dev site and then transferring it to the main site if and when it works! It works on the staging site. Text is dark blue, and the link still works! Great! Now, the only thing not working is the “Find Events” button.

[ncbaroqueorchestra]

Tried this from the GitHub CSS:
/** Style the “Find Events” button to give it rounded corners and a new color scheme */
#tribe-bar-form .tribe-bar-submit input[type=”submit”] {
border-radius: 8px;
background: darkblue !important;
}
I just added “!important;” to the CSS provided and it worked!

[Andras]

Happy to hear all is solved! Great job on figuring that ‘!important’ out!

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 create a new ticket and we’ll be happy to help.

Cheers,
Andras

PS: We’d be grateful if you would give us feedback on your satisfaction with support. Just click on one of the classy looking emojis below. 🙂 If you can spare a few words, that’s even better. Thanks!

PS2: If you like our plugins, and you didn’t yet do so 🙂 we would also be happy to receive a review in the wordpress.org repository. Much appreciated!
https://wordpress.org/support/view/plugin-reviews/the-events-calendar/
https://wordpress.org/support/view/plugin-reviews/event-tickets/

 

[Author]

Posts