This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

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

  • Creator
    Topic
  • #2925
    Jason Bobich
    Keymaster

    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.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Author
    Replies
  • #7408
    billmorganmedia
    Participant

    Thanks Jason!

    #8955
    outofnowhere
    Participant

    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

    #8956
    Jason Bobich
    Keymaster

    @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; }
    #8959
    outofnowhere
    Participant

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

    #13951
    pyleitonthere
    Participant

    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? =)

    #13959
    Jason Bobich
    Keymaster

    @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; }
    #16121
    Ed Bustya
    Participant

    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; }
    #22535
    cthebrush
    Member

    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; }

    #22537
    Jason Bobich
    Keymaster

    @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.

    #22546
    cthebrush
    Member

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

    #25879
    wswriter
    Member

    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; }

    #25880
    Jason Bobich
    Keymaster

    @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. 😉

    #25881
    wswriter
    Member

    It worked. Thank you, Jason!

Viewing 13 replies - 1 through 13 (of 13 total)

The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.