How can I change the calendar color?

dnissan · February 3, 2015

I've seen a handful of answers on this question. Here are two:

How to change font color of events in calendar view?

For background color add this:

.eventcal .eventcal-content-wrapper { background: #000000; }

For day number color add this:

.eventcal .eventcal-daynumber { color: #e7d073; }

How to change background color of current day indicator?

Try adding this CSS to your custom CSS:

.eventcal .eventcal-today { background: red; color: black !important }

My problem: Those don’t work with me. I don’t know what I’m doing wrong.

I added these to the Custom CSS, but it doesn’t work. I tried different colors, but nothing works. The calendars colors stay the same as the original. What am I missing? I’m not in developer mode, can this be it?

Edited February 10, 2015 by dnissan
Tidy

sssupers · November 23, 2015

I did this with Aviator - maybe it helps.

.yui3-squarespacecalendar .yui3-calendar-pane { padding: 12px; background: #f5f5f5 !important; }

.yui3-squarespacecalendar .today{ color: #ff3333 !important; }

.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #e7d073 !important; }

.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event, .yui3-squarespacecalendar  { color: #222 !important; }

*sss

dnissan · February 4, 2015

Anyone? Any ideas?

dnissan · February 9, 2015

Alright, so, no solutions here! Perfect. lol

February 9, 2015

Chances are those are not the right selectors for the calendar on your specific template, as they can be different depending on what template you're using. What's the url of your website?

benjamin1570047927 · February 9, 2015

Nothing to do with developer mode, can you link your site so I can try to help

dnissan · February 10, 2015

Oh, the selectors not being the correct ones. Didn't think of that. The template I'm using is Bedford.

www.p2sk.ca is the site.

Thanks for the reply!

dnissan · February 18, 2015

Any answers? If I'm not using the correct selectors, where could I find that information for the template I'm using (Bradford)?

dnissan · February 26, 2015

Bumping this, because really, I can't be the only one wondering how to do this

michaelbrucato · May 20, 2016

Thank you so much sssuperguy, really helpful!

Nondys · June 15

This was so helpful!!! But what about how to change the color of the event title or description on hover?

Edited June 15 by Nondys

Nondys · June 19

I have a question about this code. So after breaking it down I came up with this code below, but I want to change the color of the background and text of the calendar ON HOVER. As you can see in my photo below, when my mouse is on hover the background is grey and the text is white. It's really hard to see. What code can I add to target those two areas.

CODE I USED FOR THIS IMAGE:

//background color//
.yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px; padding-bottom: 10px; background: white !important;
filter: opacity(80%);
border: 0px solid #ffffff;
}

//today calendar color//
.yui3-squarespacecalendar .today{ color: #ff3333 !important; }

//event date colors//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #171828 !important;
}

///change all date text color//
td.has-event * {
color: white !important;
}

//calendar dates and border square//
.yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event, .yui3-squarespacecalendar { color: #000000 !important; }

// Calendar Month Year Styling //
.yui3-calendar-header-label {
font-size:16px;
color:#E2AC3F;
letter-spacing:0.2em;
}

How can I change the calendar color?

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

11 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Guest

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources