Remove site-wide shading – Essence Pro

[Shelley_E]

I recently started working on a site using Essence Pro. While I was setting it up, there was a selection to create a tint (I'm sure that's not the right terminology) across the header on all pages. I thought I'd play with this and selected a gold tone. Now I want it gone but can't find the setting! I just spent 45 minutes going through the Essence Pro, WordPress and Genesis settings and searching the discussion groups here. I've come to the end of my rope. Does anyone know where this setting is? Here is the shading over the home page image https://eagleadvancementassociation.org/

I'd be grateful for anyone who could shed some light on this setting.

https://eagleadvancementassociation.org/

[AnitaC]

I see this code "inline". Check the Additional CSS box under Appearance > Customize. See if it's there.

.header-hero {
 background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(https://eagleadvancementassociation.org/wp-content/uploads/2019/10/red-circle-1600x800.png);
}

---

Need help with customization or troubleshooting? Reach out to me.

[andytc]

Try looking here -

https://wpsites.net/web-design/essence-pro-remove-background-gradient-from-header-hero-image/

or is it in the customizer ? it doesn't mention it in the docs , so maybe not.

[Shelley_E]

OK, I guess I used this setting when I tried a different theme. The setting isn't available in Essence. When I switched to Essence Pro, the setting didn't reset. I received this from StudioPress Support:
Thank you for reaching out to us.

There is not an option in Essence Pro to change the overlay color without editing the theme code. You will find an option to change the color on the links by going to Appearance ==> Customize ==> Colors.

To adjust the darkness or color of the header in Essence requires editing a PHP file in the child theme files.

You will need to edit this line in essence-pro/lib/header-functions.php file:

$output = '<style type="text/css">.header-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%), url(' . esc_url( $bg_image ) . '); }</style>';

Reducing the 0.5 and 0.85 values there will make the overlay more transparent, with 0 being fully transparent. For example, this will make it a little lighter:

$output = '<style type="text/css">.header-hero { background-image: linear-gradient(0deg, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.65) 100%), url(' . esc_url( $bg_image ) . '); }</style>';

Keep in mind, we highly recommend using FTP or your host’s file manager to edit PHP files instead of the WordPress editor. A typo or missing comma could cause your site to show the “white screen of death” and could kick you out of your dashboard completely. If that happens, you’ll need to use FTP or a file manager to remove the code and regain access to your site. So if you are already using FTP or the file manager to make those changes, you’ll be able to remove them quickly if needed.

We have a guide on safely editing child theme files using FTP access at:https://my.studiopress.com/documentation/ftp-guide/

Thank you and have a wonderful day!

[AnitaC]

So the code they gave you is what I was seeing "inline" then.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts