ecs_cares Posted November 13, 2019 Share Posted November 13, 2019 Hi guys! I am wondering if someone can help me figure out how to add a banner to the individual product pages. Right now there is no banner and it messes with the whole navigation system on those pages. Additionally, I'm curious if there's a way to change the background for all of the individual product pages to white and the text to black. Here's an example of a product page I am talking about: https://penguin-roadrunner-4c8m.squarespace.com/main-products/ct-sharps-container-hoop-brackets Password is: Skyfall77 Link to comment
SnazzyView Posted November 13, 2019 Share Posted November 13, 2019 I've noticed that you've added some CSS to fix the header. I would suggest making the header Sticky instead of Fixed. I would use the below CSS instead, this will solve the issue you're having with the navigation. .Header.Header--top { position: sticky; position: -webkit-sticky; top: 0px; z-index: 9999; background-color: rgba(0,0,0,.6); } As for the product pages and the background/font colours would you be able to clarify what you mean? From what I can see your backgrounds are already white and the font is already black. snazzyview.com Link to comment
ecs_cares Posted November 14, 2019 Author Share Posted November 14, 2019 (edited) 10 hours ago, ThompsonWebDesign said: I've noticed that you've added some CSS to fix the header. I would suggest making the header Sticky instead of Fixed. I would use the below CSS instead, this will solve the issue you're having with the navigation. .Header.Header--top { position: sticky; position: -webkit-sticky; top: 0px; z-index: 9999; background-color: rgba(0,0,0,.6); } As for the product pages and the background/font colours would you be able to clarify what you mean? From what I can see your backgrounds are already white and the font is already black. Oh this is very helpful. thank you!! 🙂 Much appreciated. It worked but now I have a blue area right under the header that looks funny. Is there any way to fix that? Thank you so much for your help! You've saved me hours of trial and error. Additionally, yes, I figured out the background/font colours after playing around with it for a bit. ^___^ Do you know how to add a banner to the individual product pages? I was thinking about putting a photo or video, but there doesn't seem to be an option. Thanks in advance. Edited November 14, 2019 by ecs_cares Link to comment
SnazzyView Posted November 14, 2019 Share Posted November 14, 2019 So it looks like the blue is coming through because it's your websites background colour. Try the below piece of CSS. .Main .Main--products-item { background-color: white; } I've never added a banner image to a product page but just from a user experience standpoint I don't really think adding a banner is a great idea. snazzyview.com Link to comment
ecs_cares Posted November 14, 2019 Author Share Posted November 14, 2019 27 minutes ago, ThompsonWebDesign said: So it looks like the blue is coming through because it's your websites background colour. Try the below piece of CSS. .Main .Main--products-item { background-color: white; } I've never added a banner image to a product page but just from a user experience standpoint I don't really think adding a banner is a great idea. Okay, thank you so much! you've been tremendously helpful. 🙂 Link to comment
ecs_cares Posted November 14, 2019 Author Share Posted November 14, 2019 1 hour ago, ThompsonWebDesign said: So it looks like the blue is coming through because it's your websites background colour. Try the below piece of CSS. .Main .Main--products-item { background-color: white; } I've never added a banner image to a product page but just from a user experience standpoint I don't really think adding a banner is a great idea. Hi, so sorry to bother you again. I still haven't been able to successfully target that blue space. Would it be a different CSS code? Like for a header or navigation or something? I tried various different combination but it's still blue. 😞 Link to comment
SnazzyView Posted November 14, 2019 Share Posted November 14, 2019 Have you tried adding !important to the CSS? .Main.Main--products-item{ background-color: white!important; } snazzyview.com Link to comment
ecs_cares Posted November 14, 2019 Author Share Posted November 14, 2019 4 minutes ago, ThompsonWebDesign said: Have you tried adding !important to the CSS? .Main.Main--products-item{ background-color: white!important; } Oh that worked!!!!! Thank you so, so much for responding. Link to comment
TiffanyChaplin Posted October 19, 2020 Share Posted October 19, 2020 I'm having this same issue. Page I'm trying to add a background color too: https://www.laenovesedesigns.com/new-arrivals Anyone have any suggestions for how to do this? Thanks in advance. Link to comment
tuanphan Posted October 21, 2020 Share Posted October 21, 2020 On 10/20/2020 at 5:03 AM, TiffanyChaplin said: I'm having this same issue. Page I'm trying to add a background color too: https://www.laenovesedesigns.com/new-arrivals Anyone have any suggestions for how to do this? Thanks in advance. Add to Home > Design > Custom CSS body#collection-5f10bebab873f8461de9ff3e { .Site-inner section, .Site-inner main { background: red !important; } } amanda4 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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