Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I change the calendar color?


dnissan
Go to solution Solved by sssupers,

Question

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

For background color add this:
.eventcal .eventcal-content-wrapper { background: #000000; }

For day number color add this:
.eventcal .eventcal-daynumber { color: #e7d073; }

 

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 by dnissan
Tidy

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

I did this with Aviator - maybe it helps. .yui3-squarespacecalendar .yui3-calendar-pane { padding: 12px; background: #f5f5f5 !important; } .yui3-squarespacecalendar .today{ color: #ff3333 !importan

Posted Images

11 answers to this question

Recommended Posts

  • 0

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

alt text

"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."
584529363_fuzzypanelopener.gif.98d1a30153469a319fbde647eae7f492.gif 
Link to post
  • 0

Anyone? Any ideas?

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • 0

Alright, so, no solutions here! Perfect. lol

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • 0
Guest

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?

Link to post
  • 0

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!

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • 0

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

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • 0

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

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to post
  • 0

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

Edited by Nondys
Link to post
  • 0

 

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;
  }

Calendar.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...