Jump to content

Change product page header colour

Go to solution Solved by tuanphan,

Recommended Posts

  • 2 weeks later...
  • 4 weeks later...
  • 3 weeks later...
  • 2 months later...
On 1/11/2021 at 9:59 PM, Owenistheking said:

Having exactly the same problem.  on other pages the header is changed by adding another block directly underneath. ive added image headers this way on all my other pages.

but when i go to a product item page, its white! no way to add image or colour. so frustrating. any help?

Can you share site url? We can check easier

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
On 1/14/2021 at 6:23 PM, Owenistheking said:

https://www.paintedlegions.co.uk/store/p/7-dice-poly-set-marble-yellow

product pages all with blank white headers. logo isnt visible as thats white too!

 

https://www.paintedlegions.co.uk/

this is the eader on all my other pages. 

I see logo fine here. Do you still need help?

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

I'm having the same problem too. I'm wondering if the code provided was for 7.0. I'm working in 7.1.

Here's the overview page: https://studio411salon.com/haircare and here's it product item page. https://studio411salon.com/haircare/p/alchemic-shampoo-chocolate. The only thing you can see is the drop shadow I had to add to make the type more readable. 

I would like to add a color to the background since the type and logo are white. 

Link to comment
On 1/20/2021 at 6:21 AM, nwhittlesey said:

ARGH!!! Me again. That code also added a colored background to the top of my main page. The main product page should have an image all the way to the top. 

Screen Shot 2021-01-19 at 5.16.15 PM.png

Screen Shot 2021-01-19 at 5.16.32 PM.png

Screen Shot 2021-01-19 at 5.20.53 PM.png

use this class

body.collection-type-products.view-item .header .header-announcement-bar-wrapper

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
  • 1 month later...

I can get the background to change to black....  i can change the text to White.... 

BUT

the dropdown navigation menus are still white, so the text (white on white) is still invisible.  

How do we change the dropdown menue colour also?

body.collection-type-products.view-item .header .header-announcement-bar-wrapper {
    background: black;
}

Link to comment
On 3/20/2021 at 3:47 PM, Owenistheking said:

 

it seems like you found an answer, that's great! it doesn't seem to work for me. could you just run through how to apply this in case I'm getting something wrong. thanks!

 

 

Can you share link to your site? We can help easier

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
  • 1 year later...
On 5/3/2022 at 5:00 PM, Venera said:

https://calliope-tulip-rjr7.squarespace.com/config/

Hi! I have the same problem now, black on black. Could you help me please?

Your site is private. Can you setup password & check 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
On 5/6/2022 at 2:01 PM, Venera said:

I copied the site because the trial period ends there

https://reed-glockenspiel-rhkr.squarespace.com/
Password - support

🙂

Add to Design > Custom CSS

body.collection-type-products.view-item .header-announcement-bar-wrapper {
    background-color: white !important;
}

 

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
4 hours ago, tuanphan said:

Add to Design > Custom CSS

body.collection-type-products.view-item .header-announcement-bar-wrapper {
    background-color: white !important;
}

 

Thank you very much!
This works when the background is white and the menu and logo are black. But I need a black background and white text. When I change the color to black, the whole font turns black.

how to make the font white?

w.png

b.png

Link to comment
19 hours ago, Venera said:

Thank you very much!
This works when the background is white and the menu and logo are black. But I need a black background and white text. When I change the color to black, the whole font turns black.

how to make the font white?

w.png

b.png

use this

body.collection-type-products.view-item .header-announcement-bar-wrapper * {
    color: white !important;
}

 

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
  • 3 months later...

Thank you so much for the product page fix! I realized the same thing is happening if the 'shopping cart' is empty. I tested it out by removing an item from the cart and got this page. EDIT: I'm on v7.1image.thumb.png.21541136eb1586c048ae37027ca0ac02.png

 

Can you help with the proper code to make the header have a background color so the white logo/navigation can be seen? Thank you! 

Edited by mjrodriguez
Updating site version for clarity
Link to comment
On 9/12/2022 at 10:12 PM, mjrodriguez said:

Thank you so much for the product page fix! I realized the same thing is happening if the 'shopping cart' is empty. I tested it out by removing an item from the cart and got this page. EDIT: I'm on v7.1image.thumb.png.21541136eb1586c048ae37027ca0ac02.png

 

Can you help with the proper code to make the header have a background color so the white logo/navigation can be seen? Thank you! 

Try this CSS. If it doesn't work, please share link to your site

body#cart header#header {
	background-color: blue !important;
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.