Change header gradient color on single page

Site URL: https://mushroom-turquoise-9rne.squarespace.com/mtuccis-italian

https://mushroom-turquoise-9rne.squarespace.com/mtuccis-italian

Password: siera

I've been trying to figure out how to change the global site header gradient (which is a red color) to a cream color on a single page, but I only seem to be able to add the cream color to the red color. The code I used to add the cream color (in the header code injection) is below. (I also added code to change the font color/weight, as you can see)

<style>
#collection-622288e6faf996118ccf210b #header {background:linear-gradient(to bottom, #FFFDF1,#22000000) !important}
#collection-622288e6faf996118ccf210b #header a {color: #FFFDF1 !important; font-weight: 450}
<style>

I've tried a number of things I could think of and that I found on Google and nothing has worked yet. That said, I'm a total noob. 

Thx in advance!

3 hours ago, megpow said:

Site URL: https://mushroom-turquoise-9rne.squarespace.com/mtuccis-italian

https://mushroom-turquoise-9rne.squarespace.com/mtuccis-italian

Password: siera

I've been trying to figure out how to change the global site header gradient (which is a red color) to a cream color on a single page, but I only seem to be able to add the cream color to the red color. The code I used to add the cream color (in the header code injection) is below. (I also added code to change the font color/weight, as you can see)

<style>
#collection-622288e6faf996118ccf210b #header {background:linear-gradient(to bottom, #FFFDF1,#22000000) !important}
#collection-622288e6faf996118ccf210b #header a {color: #FFFDF1 !important; font-weight: 450}
<style>

 

I've tried a number of things I could think of and that I found on Google and nothing has worked yet. That said, I'm a total noob. 

 

Thx in advance!

This code make your header gradient color. 

If you want to set a color on a specific page, i suggest selecting it with the page id to overwrite it

#collection-622288e6faf996118ccf210b .header-background-gradient {
  background:linear-gradient(to bottom, #FFFDF1,#22000000);
}

Let me know how it goes on your site

@bangank36 I'm trying something similar, maybe you can help me (I tried the above code and it didn't work). 

I am trying to remove the gradient header background on product pages only. 

Site: https://bamboo-shark-gdla.squarespace.com/products/p/style-01-6ywld

pw: lanai

I appreciate any pointers!

4 hours ago, MariaFY said:

I'm trying something similar, maybe you can help me (I tried the above code and it didn't work). 

I am trying to remove the gradient header background on product pages only. 

Site: https://bamboo-shark-gdla.squarespace.com/products/p/style-01-6ywld

pw: lanai

 

I appreciate any pointers!

Add to Design > Custom CSS

body[class*="type-products"].view-item .header-background-gradient {
    background: unset !important;
}

Thank you @tuanphan, this worked! I am trying to do the same for the cart page and tried the following code, not sure if systems-page is the correct class selector? 

body[class*="system-page"] .header-background-gradient {
    background: unset !important;
}

Your help is appreciated!

1 hour ago, MariaFY said:

Thank you @tuanphan, this worked! I am trying to do the same for the cart page and tried the following code, not sure if systems-page is the correct class selector? 

body[class*="system-page"] .header-background-gradient {
    background: unset !important;
}

Your help is appreciated!

Try this

body#cart .header-background-gradient {
    background: unset !important;
}

That worked perfectly once I saved & reloaded the site. Thank you @tuanphan, always appreciate the help 🤙🏼

Hi @tuanphan, Is it possible to add a black gradient (80% Black) to the homepage site header only and not all the other pages?

Website: https://wvcharge.squarespace.com/ 

Many thanks

Joe

On 8/23/2022 at 1:09 PM, HG-Design said:

Hi @tuanphan, Is it possible to add a black gradient (80% Black) to the homepage site header only and not all the other pages?

Website: https://wvcharge.squarespace.com/ 

Many thanks

Joe

Use some code like this

body.homepage header#header {
     background:linear-gradient(to bottom, #FFFDF1,#22000000);
}

body.homepage means target homepage only

if you need to target other pages, just change to body:not(.homepage) 

2 hours ago, tuanphan said:

Use some code like this

body.homepage header#header {
     background:linear-gradient(to bottom, #FFFDF1,#22000000);
}

body.homepage means target homepage only

if you need to target other pages, just change to body:not(.homepage) 

Thank you @tuanphan however it is actually the Opacity that I wanted to change. Black with 100% fade from top - bottom as shown in screenshot below. 

Thank you fun advance, 

On 8/25/2022 at 5:31 PM, HG-Design said:

Thank you @tuanphan however it is actually the Opacity that I wanted to change. Black with 100% fade from top - bottom as shown in screenshot below. 

Thank you fun advance, 

Can you keep gradient in screenshot? I can check its code easier

All updated @tuanphan

On 8/29/2022 at 4:21 PM, HG-Design said:

All updated @tuanphan

The code will be

body.homepage header#header {
     background:linear-gradient(#000,rgba(0,0,0,0)) !important;
}

Thank you @tuanphan, that has worked perfectly!

I'm not sure if it is related but I have now lost my cart icon in the header and it only shows the cart qty number. 

I have a custom cart logo so use the below code which has always worked fine:

If I remove this code, the standard cart icon reappears so not sure what is causing it. 

Quote

.icon--cart {   
  svg {     
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6213b21b916cab632ae08e18/t/62155ad07581533ff33c52bf/1645566672623/shopping-cart-icon-white-12.jpg.gifhttps://static1.squarespace.com/static/6213b21b916cab632ae08e18/t/62155ad07581533ff33c52bf/1645566672623/shopping-cart-icon-white-12.jpg.gifhttps://static1.squarespace.com/static/6213b21b916cab632ae08e18/t/62155ad07581533ff33c52bf/1645566672623/shopping-cart-icon-white-12.jpg.gifhttps://static1.squarespace.com/static/6213b21b916cab632ae08e18/t/62155ad07581533ff33c52bf/1645566672623/shopping-cart-icon-white-12.jpg.gif);   
  background-size: 25px 25px;   
  background-repeat: no-repeat; 
}

If I remove the below, the new cart logo is shown with the standard cart logo behind it. 

svg {     
    display:none;   
  }   

Thank you once again Tuanphan, 

On 8/31/2022 at 4:09 PM, HG-Design said:

Thank you @tuanphan, that has worked perfectly!

I'm not sure if it is related but I have now lost my cart icon in the header and it only shows the cart qty number. 

I have a custom cart logo so use the below code which has always worked fine:

If I remove this code, the standard cart icon reappears so not sure what is causing it. 

 

If I remove the below, the new cart logo is shown with the standard cart logo behind it. 

svg {     
    display:none;   
  }   

 

Thank you once again Tuanphan, 

The file url in the code doesn't exist. If you check it, you will see

Thank you @tuanphan, in the end I removed the full code and started again which seems to have worked well. 

Can I ask, is there a way to move the cart icon on mobile view, slightly further to the right and close to the main logo. Currently it sits a little close to the left and edge of screen. 

Thank you, Joe

23 hours ago, HG-Design said:

Thank you @tuanphan, in the end I removed the full code and started again which seems to have worked well. 

Can I ask, is there a way to move the cart icon on mobile view, slightly further to the right and close to the main logo. Currently it sits a little close to the left and edge of screen. 

Thank you, Joe

Add this CSS

div.showOnMobile .header-actions-action.header-actions-action--cart {
    position: relative;
    right: -20px !important;
}

Thank you @tuanphan

@tuanphan I'm trying to do something similar where I want the linear gradient on the homepage but I don't want it on the secondary content pages (about us, etc.) What would that target class be?

W: heptagon-oriole-ytkm.squarespace.com

P: rose

On 11/16/2022 at 7:40 AM, StephanieR said:

@tuanphan I'm trying to do something similar where I want the linear gradient on the homepage but I don't want it on the secondary content pages (about us, etc.) What would that target class be?

 

W: heptagon-oriole-ytkm.squarespace.com

P: rose

Use code I posted above

body.homepage header#header {
     background:linear-gradient(#000,rgba(0,0,0,0)) !important;
}