Jump to content

Change header gradient color on single page

Recommended Posts

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!

Screen Shot 2022-03-25 at 2.16.14 PM.png

Link to comment
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!

Screen Shot 2022-03-25 at 2.16.14 PM.png

This code make your header gradient color. 

image.thumb.png.0b391ddf46c81f23e41dfa03cfa7cd7f.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
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!

Screen Shot 2022-06-20 at 3.37.51 PM.png

Add to Design > Custom CSS

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

 

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

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!

Link to comment
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;
}

 

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

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
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, 

Screenshot 2022-08-25 at 11.22.25 am.png

Link to comment
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, 

Screenshot 2022-08-25 at 11.22.25 am.png

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

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
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;
}

 

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

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, 

Link to comment
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

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
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;
}

 

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
  • 2 months later...
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;
}

 

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

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.