Jump to content

How to change the color of calendar text month, number, and arrow

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.caroline-shenaz-hossein.com/portal-main

Hello,

I'm customizing my calendar, and have figured out a couple things, but one thing i can't seem to manage is to change the color of the month, numbers, and arrows. I've attached a picture below. Basically my question is:

How do i change the colour of the text of each month from red to white?
How do i change the colour of all the numbers on the calendar from black to white?
and
How do i change the colour of the arrows from black to white?

The usual h1, h2, h3, p, doesn't seem to work.

link:    https://www.caroline-shenaz-hossein.com/portal-main

(the other bright colours are just so i can see what the code is doing, i won't keep them 🙂 )

Screen Shot 2022-08-05 at 2.19.12 PM.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

15 hours ago, JTeich said:

Site URL: https://www.caroline-shenaz-hossein.com/portal-main

Hello,

I'm customizing my calendar, and have figured out a couple things, but one thing i can't seem to manage is to change the color of the month, numbers, and arrows. I've attached a picture below. Basically my question is:

How do i change the colour of the text of each month from red to white?
How do i change the colour of all the numbers on the calendar from black to white?
and
How do i change the colour of the arrows from black to white?

The usual h1, h2, h3, p, doesn't seem to work.

link:    https://www.caroline-shenaz-hossein.com/portal-main

(the other bright colours are just so i can see what the code is doing, i won't keep them 🙂 )

Screen Shot 2022-08-05 at 2.19.12 PM.png

Try adding to Home > design > custom css

#block-yui_3_17_2_1_1659034884374_7780 [aria-role="heading"] {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780  .marker-daynum {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780  [role="columnheader"] {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780 .yui3-calendar-header {
  color: #fff;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution

My testing

image.png.602af41a1be31faaaec5bd0c879189ee.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, bangank36 said:

Try adding to Home > design > custom css

#block-yui_3_17_2_1_1659034884374_7780 [aria-role="heading"] {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780  .marker-daynum {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780  [role="columnheader"] {
  color: #fff;
}

#block-yui_3_17_2_1_1659034884374_7780 .yui3-calendar-header {
  color: #fff;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Wonderful!

It seems to work on Page Settings> Advanced  as well!

Thanks so much!!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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