SOLVED

Landing Page Template 2-A Hero Overlay

Go to solution
Kelly_Chang
Level 2

Landing Page Template 2-A Hero Overlay

I've been trying to figure out how to change the overlay color on the hero image, but there was no selection option in the right sidebar or a place that I saw within the code. Does anyone know how I can alter the color? TIA!

pastedImage_0.png

1 ACCEPTED SOLUTION

Accepted Solutions
Gerard_Donnell4
Level 10

Re: Landing Page Template 2-A Hero Overlay

Hi Kelly Chang

So the style you need to change is this: 

<style>

#hero .section-dark {    background-color: #060606 !important;}

</style>

Its on line 282 of the style.css file. 

Rather than editing the css document, if you go to the landing page and then go to the "Landing Page Actions" dropdown in the top left and select "Edit Page Meta Tags" and then in the "Custom HEAD HTML" you can past whatever code you want.  The code above will work for you, just change the colour to what you like. See the screen shots below.

Screen Shot 2017-12-08 at 23.42.32.png

Screen Shot 2017-12-08 at 23.59.44.png

Thanks,

Gerard

View solution in original post

5 REPLIES 5
Gerard_Donnell4
Level 10

Re: Landing Page Template 2-A Hero Overlay

Hi Kelly Chang​,

Can you post the URL? If not, can you DM it to me.  I should be able to fix this for you pretty easily but I need to see the code.

Thanks,

Gerard

Kelly_Chang
Level 2

Re: Landing Page Template 2-A Hero Overlay

Hi Gerard, I was trying to figure out how to DM you - can you tell me how and I'll send you the URL?

TIA! Kelly

Gerard_Donnell4
Level 10

Re: Landing Page Template 2-A Hero Overlay

We had to both be following each other to DM.  I just sent you a message.

Thanks,

Gerard

Gerard_Donnell4
Level 10

Re: Landing Page Template 2-A Hero Overlay

Hi Kelly Chang

So the style you need to change is this: 

<style>

#hero .section-dark {    background-color: #060606 !important;}

</style>

Its on line 282 of the style.css file. 

Rather than editing the css document, if you go to the landing page and then go to the "Landing Page Actions" dropdown in the top left and select "Edit Page Meta Tags" and then in the "Custom HEAD HTML" you can past whatever code you want.  The code above will work for you, just change the colour to what you like. See the screen shots below.

Screen Shot 2017-12-08 at 23.42.32.png

Screen Shot 2017-12-08 at 23.59.44.png

Thanks,

Gerard

View solution in original post

Gerard_Donnell4
Level 10

Re: Landing Page Template 2-A Hero Overlay

Hi Kelly Chang​,

I forgot to say, when you have a second can you move this thread to the product discussion board using the move button at the right hand side.

Thanks,

Gerard