Filter bar font

[Becky B]

Hi there – would you please be able to take a look at my events page. Please see the following:
1. The filter bar font is very difficult to read. It should be white instead of gray if possible.
2. When photo view is enabled can a border line go around each event for separation of events?
3. Font color in month view (green) needs to be darker.

Thank you.

[Nico]

Hi there @nnyorker,

Thanks for reaching out to us! While we do not provide much help on styling the calendar, as your requests are pretty simple I can help you here:

1. The filter bar font is very difficult to read. It should be white instead of gray if possible.


/* tribe bar labels font color */
#tribe-bar-form {
color: #fff;
}

/* tribe bar inputs font color */
#tribe-bar-form input {
color: #fff;
}

/* tribe bar views font color */
.tribe-bar-views-list span {
color: #fff;
}


2. When photo view is enabled can a border line go around each event for separation of events?

There’s actually a line now around events, maybe you can change the border color to make it more visible?

/* change events border color in photoview
.tribe-events-photo-event-wrap {
border-color: #ccc !important;
}


3. Font color in month view (green) needs to be darker.


/* change month view font color */
#tribe-events-content .tribe-events-month-event-title a {
color: red !important;
}


You can add these to your theme stylesheet or via Simple Custom CSS plugin.

Please let me know if this helps you out,
Best,
Nico

[Becky B]

Thank you for your reply.
I still need assistance on #3
3. Font color in month view (green) needs to be darker.
/* change month view font color */
#tribe-events-content .tribe-events-month-event-title a {
color: red !important;
}

And in Month view the days of the week also need to be white instead of grey. They are hard to see.
Thanks again!

[Nico]

You are welcome! Try this code instead, and please do change the color codes as you see fits your site design:


/* change month view font color */
#tribe-events-content .tribe-events-month-event-title a {
color: #609f32 !important;
}

/* change day number color in month view */
.tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"],
.tribe-events-calendar td.tribe-events-past div[id*="tribe-events-daynum-"] > a {
color: #fff;
}


Hope that works, let me know!

Best,
Nico

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts