Search the Community

Site URL: https://www.octrobi.com/ Hello, I have a webpage with a repeating background image that I added via CSS. I want to add text to the page in a way that it literally only adds text, and fully displays my page's main background image. I've added a text section to the page, but unfortunately it adds a giant white block that stretches all the way across the screen. I've found that I can edit the background color of this block by editing the theme, but I don't want it to have a color. I want it to be transparent, as to only display the text. Is this possible? I've tried messing around with CSS but haven't had any luck. I feel like this is probably the simplest thing you can do to a webpage, and I'm surprised it's so hard to figure out. Below is an image of what I'm talking about. I want the white gone so the purple background image can fully shine though, with literally just the text on top of it. I basically just want to add a "Site under maintenance message". Thanks.

Hello, when I use a PNG as a background image for a section in a blank template 7.1 site it doesn't seem to be adopting the color scheme I've selected at the upper right corner of the edit window. Am I missing something? According to the Color scheme I've selected, the bG should be white? 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 :)

Site URL: http://www.gastingerwalker.com/contact I inherited an already built site and I needed to update the contact info. The email and phone numbers for each person are images. Before I updated with new info, they were gray until you hovered over them and they turned blue. Now the ones I have updated are blue all the time. * the actual image is blue (white background blue text) so looks like the code makes it gray until hover. would love some direction on how to fix this. Thanks!

Site URL: https://www.shirazanddaryan.com/products/p/test The link's color doesn't change in style setting, also it still stays the unwanted color when I change the website theme. It happened about years ago also and when I contact Squarespace support, they told us there is no way to fix it atm so we had to not use any hyperlink on the website. So anybody knows how can I change the link's color? bandicam 2021-10-13 14-03-22-423.mp4

Throughout our lives we learn that colors can signify warnings and practical instructions (like the red for “stop” signs and green for traffic lights) or convey emotions and feelings, like blue and green for comfort and clarity; and orange and yellow for energy, youth, and warmth. This is part of what is known as color theory, and it can be a great tool to use when it comes to designing your website and choosing your color palettes. When choosing the colors that will represent your online presence, it is recommended to start with colors that are on brand for your business. You can then consider using pop colors, which can elicit certain emotions and responses in your target audience, and can highlight calls to action or important information. Balance is key to a successful color palette, so it is also recommended to use some neutral colors to balance out your color palette and avoid eye fatigue. Coolors is a great tool to get inspiration or even generate a color palette for you. How did you choose your site’s color palette? Did you use color theory or perform research? What advice would you give to others considering their color choices? Share your experiences and learnings in the comments below!

Site URL: http://www.artspeak.nyc hello @tuanphan i am using 7.1 so how can i add this code to my squarespace web site. seems like doesnt work. https://www.computerhope.com/javascript/random-color.htm Thank you in advance. have a great weeknd.

Site URL: https://malindoyon.com Hi, I need help on how to change the color of my logo to white on the projects pages that have a black background. URL to my page: https://malindoyon.com (password: trusttheprocess) The pages where I want to invert the logo to white: https://malindoyon.com/home/hm https://malindoyon.com/home/new-normals https://malindoyon.com/home/kvinnohistoriska (I also have a white version of the logo made but I don't think it's possible to add multiple ones right?) Thank you!

Site URL: https://www.rethinkfood.org/otherways-1 Hi all, For this page (password: Any1canRethink!), I created a markdown block but under the header: Donate Stocks or Mutual Funds, the email address link font color turns white and I have no idea how to change it back. I tried in the design area but that doesn't seem to be the issue because in the intro text the same email is displayed without any issues. Any help is appreciated! Thank you

Is there a way to change an item's colours depending on light or dark background colours? Any item like a header, or nav. I was wondering how we can implement colour change depending on section backgrounds.For example, a fixed H1 text in the middle of the screen, how do we make the text change colour WHILST SCROLLING between light and dark background colors?What's the best way to do this?I was trying out with color-blend-mode:difference but the effects felt too much on the eyes.Thanks in advance! ❤️ ❤️

Site URL: https://pte.squarespace.com/ourwork Hey! I am having trouble figuring out a way to change the color of the filter buttons depending on what the user selects. For Example, when they select the "Work" page, the user can see "All" of the work. I'd like to have the "All" button highlighted as white (as the default) until they click on "Client Projects" or "In-House Projects." Then when the filtered work is loaded on the page the selected button will stay white to tell the user what type of work they are viewing. Thanks in advance!

Hi there, I'm trying to change the background on my product detail page and also make the text white? I'm using 7.0 and the template is Hyde. Thanks so much to anyone that know how to do this or has the CSS 🙂

Hello, Apologies if this is something basic but I'm looking to have my color rollover state stay. Right now with my current code, it's just changing with the mouse rollover but would love for the color to stay. Can you help? This is my current code: /* Nav item color */ .header-nav-item a { color: #ffffff !important; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { color: green !important; transition-duration: 0.4s; } /* Nav item active color */ .header-nav-item--active a { color: green !important; }

Site URL: https://www.slicedginger.com How can I change the background color of a specific block in the footer? I don't want the whole footer to be the same color. I am using the Tudor template 7.0 This is code I'm currently using to change the color. #footer { background: #f6f0ed; max-width: 100%; }

Hey, I'm building my site in 7.1 (mainly to get to grips with using it) and I've come across one problem I can't seem to fix. The dropdown navigation has white text & a white background(image attached) My header colour palette is yellow, whereas the main website has a white background, I'm wondering if this is part of the problem. It'd be greatly appreciated if anyone can find any workaround for me. Site is here: https://hexaflexagon-star-bh8p.squarespace.comPasword: 123123

Is there an easy CSS customization for the following on 7.1? -Change the color theme from Light 1 to Lightest !? -Change the page width? It currently is full bleed of the entire page. Thank you!

Site URL: https://goodgriefcare.squarespace.com/ Hi, I am using the new auto layout (simple list) and wanted to know if there is a way to have a different background for each card. Right now the setting only let you choose one colour for the background. I couldn't find how to target each card individually in Chrome Inspect. This is for the home page. url: https://goodgriefcare.squarespace.com/ pw: 4%*MSms4 Thank you so much.

Site URL: https://whale-mushroom-t6kh.squarespace.com I'm not sure why when I change the image lock to a card (anything other than inline), it adds an opacity over the image. How do I remove the image overlay?

Site URL: https://www.eshertennis.co.uk/real-tennis/p/real-tennis-hampton-court Hi everyone I'm using 7. and I've been playing around with site styles ahead of a website redesign and I've accidentally changed the colour of the floating shopping cart icon so it isn't currently visible! Please see attached image (it's the little square in the bottom right). Does anyone know how to change the icon back to black? I'm assuming it's in Site Styles but I can't figure out which colour it is that I need to change. Thanks in advance!

An option I thought was to use this as a background colour and change it to a solid on mobile, however would much rather have it in there the proper way. Any help to achieve this look would be appreciated. Wireframe attached. Thanks!

Hi There, I am currently trying to change the social icons (in navigation bar) on a single page. On some pages I want there to be black icons with a light coloured photo in background, then on others white icons with dark coloured photo in background. What is the coding to achieve this? I can change the colour globally on all pages but I can't work out how to change the colour on one individual page. Any help is appreciated in advance :)

I am trying to edit the colour of any link text on my site - both in the navigation and on pages - using 7.1. The option doesn't seem available in site styles/ themes, which seems odd as it's a fairly basic request. I'd like the hover over/ active colour to be #01aef0. I would also like the colour to remain when you are on a page - so when you are on the About page, the navigation title stays as the hover colour as an indicator. Sorry I don't know how else to describe that! My site is carbonbuddyproject.org Thanks, Emma.

Hey! I'm trying to remove the overlay color from my background images so that my background images look exactly as they should without a color overlay. When they background color is white, the image looks washed out, when it's black it's too dark. I've tried numerous code injections into Custom CSS but no luck. Help!

(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: red !important; } .header-nav-folder-item:hover a { color: red !important; } /* Nav item active color */ .header-nav-item--active a { color: green !important; } Created by Tuan Phan. Share to be shared more.

Site URL: https://chiton-bassoon-6dzg.squarespace.com Hi everyone, I'm looking to change the colour for the header and footer on one page, the 'about' page. I'd like to change it to the inverse of what I've got going for the rest of the site, so black font on a white background, which is the 'Lightest 1' option in the colour palette. Any help would be appreciated. Thanks