hzvb Posted February 15 Share Posted February 15 (edited) Hey there I wanted to ask for help on my product item page. Throughout the website I have background images behind the navigation and logo - but this doesn't carry through onto product detail pages in the shop. Ideally it would be great to carry the header image from the store home page across onto all product detail pages. If this isn't possible, how would I invert the navigation & logo colour to black and also add some padding in to the header to stop things overlapping as they are currently? This would be for product detail pages only. The CSS I'm using for the header image is as follows if it helps - works great everywhere on the site except product detail pages; header.Header.Header--top { position: absolute; top: 0; width: 100%; z-index: 999; background: transparent; } URL: moosecoffee.co Thanks in advance for any help Edited February 15 by hzvb Link to comment
Ziggy Posted February 15 Share Posted February 15 Try this solution, add to Custom CSS: .Main--products-item { .Header-branding-logo { filter: invert(1); } } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
hzvb Posted February 15 Author Share Posted February 15 Hi, thanks for your quick response I have added in this code but unfortunately there is no change Link to comment
Ziggy Posted February 15 Share Posted February 15 Hmm, try this instead: .Main--products-item { .header-title-logo img { filter: invert(1); } } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
hzvb Posted February 15 Author Share Posted February 15 Hey Ziggy - thanks again for your help, I swapped out the code but unfortunately still no change! Link to comment
hzvb Posted February 16 Author Share Posted February 16 Hey, i have found the following code which inverts the logo on product pages successfully; .collection-type-products.view-item .Header-branding-logo { -webkit-filter: invert(100%); filter: invert(1); } Is it possible to do the same (invert colours) with the Nav bar and increase the padding at the top? Thank you Link to comment
badcrc Posted February 19 Share Posted February 19 So there is no way to add a header background image on a product detail page? I'm trying to do the same thing and I started a new thread about it a couple days ago and got no response. Pretty annoying problem. I'm also trying to figure out how to add a background image to the header on the cart page and so far haven't found anything that works. I used this code and I'm able to change the header and cart background color, but I wasn't able to modify it to use a background image (I also need background image 60% opacity): /** Cart page header background **/ body#cart .header .header-announcement-bar-wrapper { background: #f0acd8 !important; } /** Product page header background **/ .collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper { background: blue !important; } I also tried a bunch of different css code to add space between the header and the product image/description but none of it worked. It's strange how the product page is different than every other page, it makes it frustrating trying to keep things uniform. Link to comment
tuanphan Posted February 25 Share Posted February 25 On 2/20/2023 at 6:39 AM, badcrc said: So there is no way to add a header background image on a product detail page? I'm trying to do the same thing and I started a new thread about it a couple days ago and got no response. Pretty annoying problem. I'm also trying to figure out how to add a background image to the header on the cart page and so far haven't found anything that works. I used this code and I'm able to change the header and cart background color, but I wasn't able to modify it to use a background image (I also need background image 60% opacity): /** Cart page header background **/ body#cart .header .header-announcement-bar-wrapper { background: #f0acd8 !important; } /** Product page header background **/ .collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper { background: blue !important; } I also tried a bunch of different css code to add space between the header and the product image/description but none of it worked. It's strange how the product page is different than every other page, it makes it frustrating trying to keep things uniform. Use this code for background image body#cart, body[class*="type-products"].view-item { header#header { background-image: url(https://cdn.pixabay.com/photo/2023/02/14/18/55/flowers-7790227_640.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } } 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
badcrc Posted February 28 Share Posted February 28 (edited) On 2/25/2023 at 1:21 AM, tuanphan said: Use this code for background image body#cart, body[class*="type-products"].view-item { header#header { background-image: url(https://cdn.pixabay.com/photo/2023/02/14/18/55/flowers-7790227_640.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } } This code doesn't seem to do anything to the empty cart or full cart page. My page is here: https://www.hcfreezedry.com/ Edited February 28 by badcrc Link to comment
tuanphan Posted March 5 Share Posted March 5 On 3/1/2023 at 1:41 AM, badcrc said: This code doesn't seem to do anything to the empty cart or full cart page. My page is here: https://www.hcfreezedry.com/ I don't see code in CSS box. Where did you add? 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