Search the Community

Hi I am using Wexley I see that every heading size I choose picks up the HeadingS color. Is there a way to give individual headings a different color for each Like Heading 2 be Green and Heading 3 be Blue? Is that going to be a piece of coding for each page? Thank you

(Updated: SS 7.1) Some custom code (CSS) to change color Navigation Link Navigation Hover Link Navigation Active Link >> 92 Templates Navigation Custom Font Notes Add code to Home > Design > Custom CSS The code is based on demo at squarespace.com/templates, so they may not work for some websites or navigation with dropdown If the code doesn't work, try adding !important to after, eg: color: #f1f2f3 !important; If you have any questions/found issues, just comment below or send me a private message. Thanks. Avenue Template /* Nav item color */ .main-nav ul li a { color: #ff0000 !important; } /* Nav item hover color */ .main-nav ul li a:hover { color: violet !important; } /* Nav item active color */ .main-nav ul li.active-link a { color: green !important; } Aviator /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Bedford Family: Anya, Bedford, Bryant, Hayden, Bedford /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Brine Family: Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West, Brine. /* Nav item color */ .Header-nav-item { color: #ff0000 !important; } /* Nav item hover color */ .Header-nav-item:hover { color: violet !important; } /* Nav item active color */ .Header-nav-item--active { color: green !important; } Farro: Farro, Haute Same as Brine Five /* Nav item color */ nav#main-navigation ul li a { color: #ff0000 !important; } /* Nav item hover color */ nav#main-navigation ul li a:hover { color: violet !important; } /* Nav item active color */ nav#main-navigation ul li.active-link a { color: green !important; } Flatiron /* Nav item color */ ul#nav li a { color: #ff0000 !important; } /* Nav item hover color */ ul#nav li a:hover { color: violet !important; } /* Nav item active color */ ul#nav li.active-link a { color: green !important; } Forte /* Nav item color */ #topNav ul li a span { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover span { color: violet; } /* Nav item active color */ #topNav ul li.active-link a span { color: green !important; } Ishimoto /* Nav item color */ #topNav #nav li a { color: #ff0000; } /* Nav item hover color */ #topNav #nav li a:hover { color: violet; } /* Nav item active color */ #topNav #nav li.active-link a { color: green !important; } Momentum /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } Montauk: Julia, Kent, Montauk, OM Same as Momentum Native /* Nav item color */ #navBlock ul li a { color: #ff0000 !important; } /* Nav item hover color */ #navBlock ul li a:hover { color: violet !important; } /* Nav item active color */ #navBlock ul li.active-link a { color: green !important; } Pacific: Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific /* Nav item color */ #mainNavigation div a { color: #ff0000 !important; } /* Nav item hover color */ #mainNavigation div a:hover { color: violet !important; } /* Nav item active color */ #mainNavigation div.active a { color: green !important; } Skye: Foundry, Indigo, Ready, Skye, Tudor /* Nav item color */ .nav-blocks-wrapper div a span { color: #ff0000; } /* Nav item hover color */ .nav-blocks-wrapper div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.nav-link--active a { color: green !important; } Tremont: Camino, Carson, Henson, Tremont /* Nav item color */ #mainNavigation div a span { color: #ff0000; } /* Nav item hover color */ #mainNavigation div a:hover span { color: violet; } /* Nav item active color */ #mainNavigation div.active a span { color: green; } Wells /* Nav item color */ div#topNav ul li a { color: #ff0000 !important; } /* Nav item hover color */ div#topNav ul li a:hover { color: violet !important; } /* Nav item active color */ div#topNav ul li.active-link a { color: green !important; } Wexley /* Nav item color */ #topNav ul li a { color: #ff0000; } /* Nav item hover color */ #topNav ul li a:hover { color: violet; } /* Nav item active color */ #topNav ul li.active-link a { color: green; } York: Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York /* Nav item color */ .site-navigation div a span { color: #ff0000; } /* Nav item hover color */ .site-navigation div a:hover span { color: violet; } /* Nav item active colo */ .site-navigation div.active a span { color: green; } Squarespace 7.1 /* Nav item color */ .header-nav-item a { color: #ff0000 !important; } /* Nav item hover color */ .header-nav-item a:hover { color: violet !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.

Hello, I'm trying to change the colour of one h1 heading on one page, and none of the usual stuff is working. I'm putting it in the advanced area of that page. What am i doing wrong? At the very bottom of this page, where it says "connect with me". I want that to be red, not white https://www.caroline-shenaz-hossein.com/caroline-shenaz-hossein Thanks

Hey, I am trying to change the background color of one specific page on the Marquee template...any suggestions? Thanks

I designed a site last year with multiple navigation font colors by adding this code into the title of each navigation item so that it looked like the attached picture: <font color="0c9e9f">About</font> Squarespace has since updated, and the code no longer works. The navigation colors are set to white again. www.ralphfarris.com Does anyone have a suggestion to fix this? I would really appreciate it!

Hello! I am looking for a bit of CSS code that allows me to repurpose the Italic styling in Brine. I want it to not make the text italic but change the color to #428BCA instead. This could be done in Markdown but I would rather use the UI buttons within the text styling window to change specific words, not a whole paragraph.

Hello. Im trying to find a way of having a colour overlay appear on the hover of an image within a gallery. I dont want this effect across every single image just certain ones within a gallery. Please see the site below for reference - as you hover over a project the colour pink overlays. https://megalodon-rose-khl5.squarespace.com/ password: Testingpassword Reference - https://www.contrastcreative.co.uk/

I'm adding a gallery of images to my site. When using a gallery, the background for transparent images is different than when I just insert an image block. I want them the same for images and the gallery. Can I change the gallery background color? The gallery is the image on the right in the attached screenshot.

Hello all. I am currently using the Sonora Template which gives a nice banner image layered underneath the logo, so I have chosen a white logo. However all other pages are white headers so the logo does not show. How can i use a black logo and then invert or use a custom logo just on the homepage so that the logo it white on the homepage Thanks.

Hi, I want to change my hover underline colour on a specific page to black, is there someone who can help me out? I want to change the colour on my About page to black My website: etrenoir.net I'm currently using this code for my hover underline: header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 1.5px #FFFFFF; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; transform-origin :100% 50%; } }

Hi, I want to change the background colour of the mobile menu bar in the 'Almar' template, but I can't change this. All the code on this forum does not seem to work. Can somebody please help me out? It seems that 7.1 has some flaws like not having the option to change this from the color menu. The url is https://bassoon-carillon-s3hj.squarespace.com/, the password is Loremipsum1 Best, Joel

Hi! I've been trying to change the button colour for one page on my Squarespace website.. I can do it for all using CSS but I can't target the specific button (or page) https://www.jfkjets.com/new-page The button at the bottom is black and I wanted to make the background colour white Thank you 🙂

Hi there, I am uploading the same coloured image on several pages in an index and I want to remove the 'background gradient effect'. I am using the Fulton template. The original background colour fades away while scrolling down the page and I would like to get rid of this effect (see attached image) and keep the original colour on the whole page. Would anyone know the CSS to stop this effect please? Thanks in advanced. cC

How do you change the colour of a specific text in the content description area in a Projects page? Say the style editor has specified that text be a dark grey but I want the text "Lorem Ipsum" (highlighted below) to be a red but only on that page and under that description. How would I go about doing that? Thank you, Kim

Hello! I am using a simple Squarespace template. I would like for the type in the "work" page to rollover to white because when the image shows it makes the type impossible to read. Please see the animation I posted. Thank you SquarespaceHelp.mp4

Hello, Does anyone know how to change the colour when hovering over the links on my portfolio page? Thanks! Coral

Hello, Firstly thank you anyone who takes the time to read this. We are new to Squarespace. I'm designing a website for a friend and she would like the background colour to change constantly. 4 pastel colours, pink, yellow, green, blue... Either the background changes colour: a) on a timer (like a carousel) b) or every time a new page is opened Is this possible? Thank you for any help Rebecca and Claudia, London

Hi,I'm trying to change the cursor and font color in a contact form to black so it is viewable against the white of the field box. The body font color on the rest of the site is white so I assume I have to insert CSS into the "page header code Injection" area of this contact page. I have tried every version of code suggested to others with similar questions here with no luck. Can you please help with a suggestion specific to this page? https://basfapg.com/contact/ Thank you!

I would like this page [ https://www.barbaramacias.com/paros2020 ] to have a different background colour than the rest of the site [ https://www.barbaramacias.com/ ] . Because the template only allows for one colour, I thought I could solve it by adding custom CSS. The html element has an id and a class. When I change the background colour in Chrome Inspector, it works but when I add the same line to the Custom CSS window in Squarespace, it does not work. I tried using these three versions of the CSS selector (just the id, id +class, tag+id+class) but none seem to work: #yui_3_17_2_1_1578652083284_68 { background-color:#ffffff;} #yui_3_17_2_1_1578652083284_68.Main.Main--page { background-color:#ffffff;} main#yui_3_17_2_1_1578652083284_68.Main.Main--page { background-color:#ffffff;} What am I missing? Thanks!

I am looking to create a calendar similar to this one: https://thisisloom.com/calendar/ We need a lot of options for color-coded events and categories. I don't see anything offered like this in SS. Does anyone know a good source for a plug-in? Thanks in advance.

How do I change the color of the form block submit button? Thanks!

Hi All, I've added a background colour to my FooterTopBlock, however, it doesn't go all the way to the edges. Any advice on how to make this full width? https://splashandcocreative.com.au/new-home-page Thanks!

Hello. On my site, I have my header navigation background set to transparent on all of my pages, I have a blue background behind my headers so the navigation logo and nav items just overlay the blue background. For example, see here https://www.graphitefinancial.com/blog or https://www.graphitefinancial.com/ However, for my blog posts I cannot add a blue background behind the header with the theme I'm using. See here: https://www.graphitefinancial.com/blog/title-growth-at-all-cost-strategies-arent-working-for-startups-heres-what-is-and-always-has. So my logo doesn't show since it is white. Is there a way for me to set just the blog posts to have a specific background. I DO NOT WANT TO CHANGE THE HEADER NAV BACKGROUND COLOR ON ANY OTHER PAGE BUT A BLOG POST. Thanks :)

Hello, How can I get the header on the index (home) page to have a transparent background so the photos are layered behind the text, while maintaining the white background on the other four pages and the fixed position overall? I'm using the Miller template, and the site is http://iggyrabinovich.com/. Thanks!

I used a Calendar block on an Index page and the banner image is showing through the faint grey of the calendar days. I'd like to make each day opaque black. Tried a few codes, but can't get anything to work... mikemorrisonministries.squarespace.com password: 3076852272 And the event blocks just go blank on mobile... anyone seen anything like this? The event thumbnails disappear.