[CSS Customizations] How to remove the gradient on header tags

[Jason Bobich]

The Alyeska theme has a unique styling on header tags (i.e. h1, h2, h3, h4, etc). Basically, a transparent gradient image is overlaid over top these header tags to give the elusion the text has a gradient on it. This can sometimes cause problems with other 3rd-party plugins that may be incorporating header tags into unexpected scenarios, or maybe you just don’t like the effect to begin with.

Here’s how you’d hide it throughout your site with CSS:

.header-shade { display: none !important; }

========

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

Topic

[billmorganmedia]

Thanks Jason!

[outofnowhere]

Hi, I was having a problem with the gradient on an H3 spreading across then entire content area and gray out part of a photos that is right aligned. http://proving-ground.us/attorneys/jeff-leaverton/

Is there a way that I can remove the gradient only from my H3 tag but not the other heading tags? I like the gradient look but I don’t want it messing up my photos.

Thanks, Mary Beth

[Jason Bobich]

@Mary Beth — Sure, you could just target all header shades just in the content area by drilling in like this:

.entry-content .header-shade { display: none; }

Or if you’re really wanting to target h3 tags in the content only, you could do this:

.entry-content h3 .header-shade { display: none; }

[outofnowhere]

Victory! Thanks. As always, you are the best. Love your themes.

[pyleitonthere]

What if I wanted to remove the gradient on a very specific case, say in just one place?
Instead of creating a class or id for this, I’d like to just put the markup in the HTML (I know, not typically recommended).

Is there a way to target the background of the span in the html?

Like <h1 style="background-image:none;">, only something that actually works? =)

[Jason Bobich]

@pyleitonthere — You could add a class to your header tags like “no-gradient” and then just style that class specifically.

So, in your markup:

<h1 class="no-gradient">Example</h1>

And then in your CSS:

.no-gradient .header-shade { display: none; }

[Ed Bustya]

For those of you having problems with the “Ship to a different address” not being selectable on a WooCommerce cart checkout page on Alyeska, the following code in your child CSS will fix it so you can check or uncheck the checkbox.

.woocommerce-shipping-fields h3 .header-shade { display: none !important; }

[cthebrush]

Hi
I injected the Custom CSS in the styles section of the template options, but it doesn’t work on my localhost version of my website. On the other hand, I injected the same css customizations in my live website that also uses Alyeska and it works.
Any ideas why?
Thanks!

Here is what I injected:
.header-shade { display: none !important; }
.no-gradient .header-shade { display: none !important; }

[Jason Bobich]

@cthebrush On localhost do you have the latest version of the theme?

If you’re using any version of the theme prior to 3.1.8 combined with WordPress 4.2+, CSS you input from theme options page won’t get applied.

[cthebrush]

Well, that explains it! Thanks for the fast response.
Have a great day 🙂

[wswriter]

Thank you Jason.
.header-shade { display: none !important; }
Will this code work in the Custom CSS in the Theme Options?

Currently, I have the bogy code in there and it works great:
body,
.boxed-layout .boxed-inner,
.boxed-layout .element-inner,
.post_grid,
article,
#comments .comment-body,
#respond {
color: #000;
}

Would I simply place it below this code in the Custom CSS box so it’s like this?
body,
.boxed-layout .boxed-inner,
.boxed-layout .element-inner,
.post_grid,
article,
#comments .comment-body,
#respond {
color: #000;
}
.header-shade { display: none !important; }

[Jason Bobich]

@wswriter Yup, that should be all there is to it, and should do the trick for you. Give it a try and see what happens. That’s always the best way to learn. 😉

[wswriter]

It worked. Thank you, Jason!

[Author]

Replies