atmos Posted June 20 Share Posted June 20 (edited) Hi, I have added some headers to the cart and product page but I want to add a code similar to the one below so that the navigation text is easier to read. Screenshot attached to help with this. filter:brightness(40%) When I try to add this line of code, it ends up affecting both the image and anything else in the header (announcement bar and navigation text etc). I want to add the correct code into here somehow: body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; } Any help would be most welcome Thank you EDIT: While on this topic, does anyone know how I can add a heading to these headers using CSS so that they look the same as the ones on my other pages. I’d like to add “Product” to the product page header and “Cart” to the cart page header. I have attached another screenshot to show you how I want it to look like based on another page. Edited June 20 by atmos Additional query Link to comment
tuanphan Posted June 22 Share Posted June 22 Can you share site url? 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
atmos Posted June 22 Author Share Posted June 22 (edited) @tuanphan Hi, yeah sure. Here’s some links to a product page and the cart page. https://www.atmos.productions/store/p/poetry-for-the-blind-paperback https://www.atmos.productions/cart Edited June 22 by atmos Link to comment
Lesum Posted June 22 Share Posted June 22 @atmos Hi! The line of code you mentioned won't work to add a filter to the header background image. It required a lot more code, modifying several elements on both the mobile and desktop versions of the site. Here's the code you can add under Custom CSS to apply a filter to header background images on individual product pages: body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 @Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace body[class*="type-products"] with #cart to get the same effect? Thank you Link to comment
Lesum Posted June 22 Share Posted June 22 1 minute ago, atmos said: @Lesum Hi, so just to check, will that code affect all of the product pages which currently use the same header image? If I want to do the same for the cart page, could I replace body[class*="type-products"] with #cart to get the same effect? Thank you Yes, you're correct. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 Just now, Lesum said: Yes, you're correct. Thank you. That code seems to work but it only covers part of the header image. Do you know how to make the box extend to cover the full image? This is the code I have for the image and height if that helps body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; } Link to comment
Lesum Posted June 22 Share Posted June 22 Can you add the code so I can check? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 1 minute ago, Lesum said: Can you add the code so I can check? Sure. This is the code for the header image on the product page. body[class*="type-products"].view-item header#header { background-image: url(https://images.squarespace-cdn.com/content/65e71d12deef391e74f7afcd/1716200250958-WEXYTWMCD2HP3ZJOYYKE/Untitled+%23126+%281%3A3%29.jpg?content-type=image%2Fjpeg); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 51.4vh; } body[class*="type-products"].view-item header#header { .header-nav-item * { color: white; } :not(.header--menu-open) .header-actions .icon--fill svg { fill: white !important; } span.sqs-cart-quantity { color: white; } a.btn { background: white; color: black; } .burger-inner>div { background-color: white !important; } } @media only screen (max-width: 1024px) { body[class*="type-products"].view-item header#header .header--menu-open .header-menu { padding-top: 170px !important; } } Link to comment
atmos Posted June 22 Author Share Posted June 22 (edited) @Lesum Apologies, I misunderstood. I have already added the code and that is where I am at right now. This is in reference to my product page. The code you shared adds a dark box but it only half covers the header image I added Edited June 22 by atmos Link to comment
atmos Posted June 22 Author Share Posted June 22 2 minutes ago, Lesum said: The code I just shared isn't appearing on the browser on my end. The code you're referring to was intended to add the background image. Did you add this code? body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } } The code you're referring to from was to add the background image. I did. It’s probably because I didn’t press save. Please check again as it should be there now Link to comment
Lesum Posted June 22 Share Posted June 22 @atmos Yes, now it's showing up. You did modify something in the code, which is why the filter is only showing halfway. This part was modified: body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(51%) !important; padding-top: 0 !important; padding-bottom: 0 !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 4 minutes ago, Lesum said: @atmos Yes, now it's showing up. You did modify something in the code, which is why the filter is only showing halfway. This part was modified: body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(51%) !important; padding-top: 0 !important; padding-bottom: 0 !important; } I didn’t modify that as far as I am aware. I just copied and pasted the code you shared. I have removed it and copy and pasted it again to see if that changes how it shows on your screen Link to comment
Lesum Posted June 22 Share Posted June 22 @atmos Also, did you remove the header announcement bar? When I was writing the code, the header had the announcement bar. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 1 minute ago, Lesum said: @atmos Also, did you remove the header announcement bar? When I was writing the code, the header had the announcement bar. No, I just copied and pasted what you shared with me. Link to comment
atmos Posted June 22 Author Share Posted June 22 body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } } This is the code I added Link to comment
Lesum Posted June 22 Share Posted June 22 I just modified one thing in the code. Can you add this updated code? body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } } atmos 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 It looks like that did the trick. Thank you! Is the box set to the same size of the header even if the header gets made smaller (it probably wont but thought I’d ask. Link to comment
Lesum Posted June 22 Share Posted June 22 (edited) The box will adjust according to the header height. But it's still not working. It only works If you close the announcement bar. Code is supposed to adjust automatically. Can you try this updated code again? body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 49px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 100px') !important; } } Edited June 22 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 (edited) @LesumI have updated it to the latest code you shared. Please let me know if that works on your side Edited June 22 by atmos Link to comment
atmos Posted June 22 Author Share Posted June 22 @Lesum That's ok no need to apologise. I’m very grateful for your help! I have added the new code Link to comment
Lesum Posted June 22 Share Posted June 22 @atmos Now everything is working correctly. atmos 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 (edited) @Lesum The new code moves the navigation bar to a different position in the header. I just noticed It’s been moved up slightly Edited June 22 by atmos Link to comment
Solution Lesum Posted June 22 Solution Share Posted June 22 @atmos Now it'll work I promise 🙂. Please add this updated code: body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 49px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 100px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } } atmos 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
atmos Posted June 22 Author Share Posted June 22 @Lesum That's great. Thank you so much! Would you mind providing the altered code which I can apply the same settings to the cart page too? When I tried to change body[class*="type-products"] to #cart earlier, it didn’t apply the darkened box to the cart page. 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