Changing gradient fill for homepage section header background, keep solid white fill for rest of pages

Hi,

I've seen similar posts for this and have tried chat GPT.

Is there a way to create a gradient fill for my homepage background section header and keep a white solid fill for all other page headers?

The URL slug is /home, I'm not sure if my problem has been not inputting the correct page ID in CSS, if this could be done with just page settings- general, PAGE HEADER CODE INJECTION that would be great.

Thanks!

Alexander

What is site url?

This is the homepage url:

CarbonPlan engineering (squarespace.com),

https://gecko-orb-3p2m.squarespace.com/config/

Thank you

Any luck with this so far?

I want section header shown below to be white and then home page to look like the section image if that makes sense.

On 5/15/2023 at 4:20 PM, Alexander12345678 said:

This is the homepage url:

CarbonPlan engineering (squarespace.com),

https://gecko-orb-3p2m.squarespace.com/config/

Thank you

What is password?

On 5/31/2023 at 12:33 AM, visualcreative said:

I have a related question. Does anyone know how to trigger a different header style for only some pages? i.e., default gradient style on most pages; solid on others.

I have two brands on one website; I have created a replacement navigation menu using Will Meyers Nav Replacement plug-in, and a second footer with hide globally / show locally logic.

I am using the gradient style for the main brand's nav (Brush Education https://brush-education.squarespace.com). I was able to revise the colour of the gradient for the second nav.

<style>
:root {
--gradientHeaderBackgroundColor: *insert gradient* !important;
}
</style>

 

Instead I want the second brand's nav to be SOLID.

Does anyone know how can I trigger this in CSS? I'd like to include it in the header code for each page that belongs to the second brand (Dog Training Press https://brush-education.squarespace.com/dtp-catalogue/p/retriever).

PW: brushview

Thanks!

 

 Add this code to Page Header to remove gradient and add solid background

<style>
.header-background-gradient {
    background-image: unset !important;
    background-color: #f1f !important;
}
</style>

On 6/2/2023 at 6:43 PM, tuanphan said:

 Add this code to Page Header to remove gradient and add solid background

<style>
.header-background-gradient {
    background-image: unset !important;
    background-color: #f1f !important;
}
</style>

Thank you @tuanphan! That worked perfectly.

With the gradient turned off here, the nav folder dropdown now holds on to the original banner colour (blue, vs the solid red I have added to the Page Header code). I'm not seeing how to target that drop-down folder here. Help once more @tuanphan? Much gratitude in advance!

On 6/5/2023 at 4:42 AM, visualcreative said:

With the gradient turned off here, the nav folder dropdown now holds on to the original banner colour (blue, vs the solid red I have added to the Page Header code). I'm not seeing how to target that drop-down folder here. Help once more @tuanphan? Much gratitude in advance!

 

 

With folder, use this code

<style>
  .header-nav-folder-content {
    background-image: unset !important;
    background-color: #f1f !important;
}
</style>

Hoorah! Thank you @tuanphan That solves it perfectly!

Hello. I am doing my own website for the very first time! and I have encounter a challenge that I believe is the same that the one mentioned above, 

I need to keep the TOP banner in "GRADIENT" background but for the section next to the top banner I need to be solid or not gradient so the whole image looks as a continuous homogeneous color

Please see pic below, The idea is not seeing the "line" between the top banner and the section, but as a continuous same image, hope that makes sense when It's read 🙂

Thanks to all in advance for helping 🙂

Erika

On 5/6/2024 at 2:57 PM, innerspacebali said:

Hello. I am doing my own website for the very first time! and I have encounter a challenge that I believe is the same that the one mentioned above, 

I need to keep the TOP banner in "GRADIENT" background but for the section next to the top banner I need to be solid or not gradient so the whole image looks as a continuous homogeneous color

 

Please see pic below, The idea is not seeing the "line" between the top banner and the section, but as a continuous same image, hope that makes sense when It's read 🙂

Thanks to all in advance for helping 🙂

Erika

 

Did you ever figure it out? I'm having the same issue...

I just found this code on another page: 

.header-background-gradient {
    background-color: transparent !important;
}

.header-dropshadow {
    opacity: 0 !important;
    box-shadow: unset !important;
}

7 hours ago, justoceans said:

Did you ever figure it out? I'm having the same issue...

I just found this code on another page: 

.header-background-gradient {
    background-color: transparent !important;
}

.header-dropshadow {
    opacity: 0 !important;
    box-shadow: unset !important;
}

You can share link to page where you have problem, we can check easier