Solved: How do I change header color on one type of header...

Skunk · ‎04-21-2019

Hi, I do not have much experience with SEO but I was wondering if it's possible to change the header color on only one type of header, not the whole site. My site's pages use the Landing page header, so what I want to do is have one landing page have a green header, and another landing page have a blue header. Is this possible?

BJ5 · ‎05-01-2019

That's exactly what I was looking for! Try this:

View Best Answer >

Skunk · ‎05-01-2019

Solved! Here's the result from the code:

I found why this happened and it was a quick fix!

The hex color code I am using is #109ee5 which does not have transparency, the color code the site uses for the green overlay is rgba(12,71,54,0.8) That 0.8 at the end is the transparency so in the chrome web inspector I converted the #109ee5 hex color code to an rgba color code and I added the 0.8 transparency to it, then I converted it back to a hex color code which gave me #109ee5cc, so i put it in your code and it worked!

Thanks for your help!

View Best Answer >

BJ5 · ‎04-22-2019

Since they are landing pages and you can't use section options, you can do that by overriding the CSS for each specific page with code in that page's header code field. If you post a link to one of your landing pages I can give you the code so all you need to do is change the color hex value.

Skunk · ‎04-22-2019

Thanks a lot, here's the landing page code.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>

<body class='landing-page  wsite-theme-dark'>
	
	<div id="banner-wrap" class="wsite-background">
		<div class="container">
			<div id="banner">
				<h2>{headline:text global="false"}</h2>
				<p>{headline-paragraph:text global="false"}</p>	
				<div class="button-wrap">{action:button global="false"}</div>
			</div>
        </div><!-- end container -->
    </div><!-- end banner-wrap -->
	
    <div id="nav-wrap">
        <div class="container">
            <table id="header">
                <tr>
                    <td id="logo">{logo}</td>
					<td>{menu}</td>
                </tr>
            </table>
        </div><!-- end container -->
    </div><!-- end nav-wrap -->

    <div id="main-wrap">
        <div class="container">
   			{content}
        </div><!-- end container -->
    </div><!-- end main-wrap -->

    <div id="footer-wrap">
        <div class="container">
       		{footer}
        </div><!-- end container -->
    </div><!-- end footer-wrap -->
</body>

</html>

BJ5 · ‎04-22-2019

Is your site live? There are difference in the way the code looks on the live site versus what you see in the HTML templates.

Skunk · ‎04-22-2019

Yes my site is live.

BJ5 · ‎04-23-2019

Ok, cool. Can you post a link to it? Btw, is your header a header section? If that's the case you could probably just use the usual method of change the background of a section and avoid having to use CSS changes.

Skunk · ‎04-24-2019

Sorry my site is not a public site and cannot be shared, but to answer your question my header is not a section and the theme of my site is the Dusk theme. In the theme's settings you can change the color of the website to green, blue, red and black, but the problem is when you change the color like that it changes the entire website to the same color. I need a method that only changes a specific header's color. I hope this helps.

BJ5 · ‎04-28-2019

Ok, try something like this in the header code of the page you want to change the background of:

The hex color I have there right now is white, but you can it to something else.

Skunk · ‎04-28-2019

Thanks for the help, unfortunately this didn't work. The header has a background with a transparent green overlay on it, I need a way to change the transparent green overlay to a transparent blue overlay so that the background image stays the same but has a blue overlay on it. The code you gave me changed the background to the color, not the overlay. I am happy to provide any other codes from the theme if they will be any help.

(Also the color I had in mind is #109ee5)

BJ5 · ‎04-29-2019

Ok, try switching it to use the banner ID instead:

Skunk · ‎04-29-2019

Thanks again, this solution is closer, but still not the one. To make things easier I created a test page and I will send screenshots of what has happened so far.

Skunk · ‎04-29-2019

Original landing page header. It has a green overlay over the header background (no codes)

First code you gave me (background code)

Second code you gave me (banner code)

I want to change the transparent green overlay to a transparent blue overlay.

BJ5 · ‎04-30-2019

How familiar are you with using the web inspector in Chrome/Safari? Mostly I just need to know which class/id is tied to the CSS adding the green overlay.

Skunk · ‎04-30-2019

I have used it before, I don't know a whole lot about it but here's some stuff from the chrome web inspector that are related to the overlay.

In web inspector I clicked on this:

<body class="landing-page  wsite-theme-dark  wsite-page-index" style="min-height: 100%; position: relative; height: auto !important; padding-bottom: 62px !important;">

Then I clicked on this:

<div id="banner-wrap" class="wsite-background wsite-custom-background">

Then in the "Styles" I found this:

.splash-page:before, .landing-page #banner-wrap:before, .tall-header-page #banner-wrap:before, .short-header-page #banner-wrap:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #07bececc;

I then clicked on the "background-color: #07bececc" and I was able to change the color of the green overlay in the web inspector, so that part controls the color of the background. I hope this helps finding the solution.

BJ5 · ‎05-01-2019

That's exactly what I was looking for! Try this:

Skunk · ‎05-01-2019

Solved! Here's the result from the code:

I found why this happened and it was a quick fix!

The hex color code I am using is #109ee5 which does not have transparency, the color code the site uses for the green overlay is rgba(12,71,54,0.8) That 0.8 at the end is the transparency so in the chrome web inspector I converted the #109ee5 hex color code to an rgba color code and I added the 0.8 transparency to it, then I converted it back to a hex color code which gave me #109ee5cc, so i put it in your code and it worked!

Thanks for your help!

BJ5 · ‎05-01-2019

Nice!! Looks great!

How do I change header color on one type of header only