Heather19 Posted June 25 Share Posted June 25 Hi there, the home page of my site is white, and the text of my site header is black. This is great, but on my individual pages, I'm using backgrounds that bleed all the way to the top, and when those images are dark, the black font doesn't show up. How can I make it so that the text on the headers shows as white on these pages where the image is dark. I can't seem to edit them directly without affecting the home page. Below are a couple of images to show what I mean. The first is the home page where you can read my name, the next is a page where the name becomes unreadable. Thank you. Link to comment
Beyondspace Posted June 26 Share Posted June 26 17 hours ago, Heather19 said: Hi there, the home page of my site is white, and the text of my site header is black. This is great, but on my individual pages, I'm using backgrounds that bleed all the way to the top, and when those images are dark, the black font doesn't show up. How can I make it so that the text on the headers shows as white on these pages where the image is dark. I can't seem to edit them directly without affecting the home page. Below are a couple of images to show what I mean. The first is the home page where you can read my name, the next is a page where the name becomes unreadable. Thank you. Can you share your URL so I can check it? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Heather19 Posted June 26 Author Share Posted June 26 Hi there, yes thank you so much! It is https://wombat-circle-7cbs.squarespace.com/ I didn't put a password on it, so you should be able to access it. Link to comment
tuanphan Posted June 28 Share Posted June 28 On 6/26/2024 at 11:01 PM, Heather19 said: Hi there, yes thank you so much! It is https://wombat-circle-7cbs.squarespace.com/ I didn't put a password on it, so you should be able to access it. Try this code to Website Tools > Custom CSS body.collection-6645248ab110723f39d9ad69.view-item:has(#page>article>section:first-child .section-background img) div.header-nav-item a { color: #fff !important; } body.collection-6645248ab110723f39d9ad69.view-item:has(#page>article>section:first-child .section-background img) a#site-title { color: #fff !important; } Heather19 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
nick_sh Posted June 28 Share Posted June 28 No CSS is needed, if you set the first section's color, you change logo and nav color in Site Styles → Settings. Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Hi there, thank you for your answers. Nick, I tried choosing to make my site title white under the darkest mode in Edit Color Theme as you showed. It worked on my first page, but not the other pages. I went in again and played around in the darkest modes, making sure they were all set to display the title and nav in white. They are, but for some reason, they are still showing up as black text. Even my first page, which I had fixed at first. I'm attaching a photo. Can't figure out what I'm doing wrong... Thank you for your help. Heather Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Hi Tuan, thanks for the code, it worked for my pages that have the background as images, but not for those that have gifs. Is there any more code for that? Thank you! Link to comment
nick_sh Posted June 29 Share Posted June 29 Are you setting the actual section to that color, e.g. do you set the first section to DARKEST 1? Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Hmmm, when you say first section do you mean on the homepage like in the first photo i attached? When I set it to darkest, it makes the background dark, which I don't want. On the other hand, when I go into the specific page, and look at my colors, (like photo 2) I'm not sure how to "set" the color to darkest. Apologies for my complete newbie-ness. Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Oooh, with your help and these notes below I've figured it out, I wasn't editing the actual section. Here are the instructions to find where to edit it for others running into the same: To change a section's color theme: Open the Pages panel. Select the page you want to edit and click Edit in the top-left corner. Click Edit section or the pencil icon on the section you want to change. In the Colors tab, click a theme to apply it to that section. Click Save to save your changes and keep editing, or Exit then Save to close the editor. Nick, thank you so much for showing me that I had to change the section colour to darkest to make the type show as white. That's not intuitive in the online help from SS. I really appreciate you answering me! Cheers. Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Sorry one more question, now that I've made the section background darkest, when I scroll the page, my nav bar shows (because it's now black). I've seen other sites where this doesn't happen. The top nav bar text is in white over the photo and when you scroll, you don't see this black bar. I'm wondering if I screwed up the color somewhere else? thanks Link to comment
nick_sh Posted June 29 Share Posted June 29 I think it's by design because if there were no background, it wouldn't show white text against the next white section. Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
nick_sh Posted June 29 Share Posted June 29 (edited) You can try removing the background, but I will not recommend it: [data-header-style="dynamic"].header { background: transparent !important; } Edited June 29 by nick_sh Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
Heather19 Posted June 29 Author Share Posted June 29 Hmmm, interesting. I tried it but it caused other issues. It's strange because when I look at this website, it works the way I'd like. The site header is in white on all the pages, and when you scroll, the site header just moves with it and disappears. This is how I was hoping for my site to work:) https://www.taralawall.com/work/mattressfirm2 Link to comment
Solution nick_sh Posted June 30 Solution Share Posted June 30 If you mean you don't want header to stay on top scroll, you need to removed Fixed header somewhere in header options Try new Squrespace ID & class finder Chrome Extension ✔ Supports Fluid Engine ✔ Generate Media Queries code ✔ Toggle IDs with Option / Alt ____ Hire me for SquareSpace development Link to comment
Heather19 Posted June 30 Author Share Posted June 30 Got it! Did the trick. Thank you so much for all of your help! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment