Jump to content

How can I change the calendar color?

By dnissan, in Customize with code

Go to solution Solved by sssupers,

Recommended Posts

dnissan Level 4

dnissan

Posted
Posted (edited)

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 comment
  • Replies 13
  • Views 9.8k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

dnissan
dnissan

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

sssupers
sssupers

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

dnissan Level 4

dnissan

Posted
  • Author
Posted

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 comment
dnissan Level 4

dnissan

Posted
  • Author
Posted

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 comment
Guest

Guest

Posted
Posted

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 comment
dnissan Level 4

dnissan

Posted
  • Author
Posted

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 comment
  • 2 weeks later...
dnissan Level 4

dnissan

Posted
  • Author
Posted

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 comment
  • 2 weeks later...
dnissan Level 4

dnissan

Posted
  • Author
Posted

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 comment
  • 8 months later...
  • Solution
sssupers Level 9

sssupers

Posted
  • Solution
Posted

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



			
		


		
			

				
					
						

	
	
		

			
				
				

					
						

	
	

					
				

			
			
			
		

	


					
				
				
    
					
						
						
						
						
						
							
  • 

    • 
												
					
					
  • 
						
					
    • 
				

			

		

		
			

	

		

		

			

	
 1634774572_ezgif.com-gif-maker(12).gif.3836570d51f5ebc97283d974ac23db3b.gifHi, I'm sssupers.

	 


		

	


		
	


	

	





	
Link to comment

	
		
	
	
	

	





	



					
						
    
							
							
								
  • 
									5 months later...
								
    • 
							
						

					
					
					
				

					

					
					





					
						
    
							
							
								
  • 
									4 years later...
								
    • 
							
						

					
					
					
				

					

					
					





					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Nondys
		
	

				
				
					
						
Level 5
					
				
			

		

		

			

				


Nondys
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

	 





	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 comment

	
		
	
	
	

	





	



					
						
    
							
							
								
  • 
									1 year later...
								
    • 
							
						

					
					
					
				

					

					
					






	

	

	

		

			

				


	
		MGN
		
	

				
				
					
						
Level 1
					
				
			

		

		

			

				


MGN
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

	

		On 6/18/2020 at 11:22 PM, Nondys said:
	


	

		

			 
		


		

			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
		

	






	were you able to find out how to change the colors? i also would like to change it




			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	





	



					
					
					
				

					

					
					





					
					
					
				
			
			



		

	


	
	
	
	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

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

			
	
			

				Sign Up / Login
			

		

	



			
		

	

	
		

			
				

					


				

			
			

				




			

			
		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


	

		
			


    
News

    


		
		
			
			

		
		
		


	


				

			

			
		

		
		



	

		×
		


    
	





			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    • 
				
			

		

	




		
		

	
	




































	
















		
		
		
		
		
		
     
      	






      	



      	

      		

      			

      				

      					

      						

      							
      						

      						

		      					
Squarespace Webinars

		      					
Free online sessions where you’ll learn the basics and refine your Squarespace skills.

		      					
Upcoming Webinars →

		      				

	      				

      				

      				

      					
Hire a Designer

      					
Stand out online with the help of an experienced designer or developer.

      					
Get Matched →

      				

      			

      		

      	

      
		

          	
          	

                

                    
Support 


                    
                

                

                    
Community 


                    
                

                

                    
Developers 


                    
                

                

                    
Resources