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.

Problem with Slogan Button Color & Click Area

  • Creator
    Topic
  • #7828

    Hello,

    When changing the color of the Slogan button, there remains a lighter horizontal line at the bottom of the button. However this only happens on the pages other than the Home page. Also, the clickable area for the button is small and positioned at the bottom of the button. Please advise on solving this problem, thank you!

    Here’s the page:
    http://greenpeaklabs.com/avr1/services/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #7836
    Jason Bobich
    Keymaster

    Hello,

    The issue is because of the combination of trying to put header tags (i.e. h1, h2, h3, etc) into the slogan text. This is designed to be just a block of text.

    You could always hide the header gradients in the slogan element on header tags something like this:

    .element-slogan .header-shade { display: none; }

    http://support.themeblvd.com/forums/topic/css-customizations-how-to-remove-the-gradient-on-header-tags/

    =========

    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.

    #7844

    Thank you for that Jason! Unfortunately, it did not solve the problem of the entire button not being clickable. Only the lower part of the button was clickable still after I removed the gradient. So I just removed the header tags, removed the CSS you gave me and separated my text into a Headline and a Slogan.

    But now the Slogan button sits really low. Do you have any CSS to center the button vertically with both the Headline and the Slogan? Or at least with the Slogan text?

    Thank you!

    #7850
    Jason Bobich
    Keymaster

    Can you please put it back the way you had it and let me see what it looks like with my CSS fix in there?

    #7860

    I have updated and added your CSS change and it didn’t help. Actually, I like the header shade to be there …

    Any other thoughts as to what may be causing the clickable area to get so small when I include an H1 tag?

    #7861
    Jason Bobich
    Keymaster

    I have updated and added your CSS change and it didn’t help.

    It’s just missing a piece.

    .element-slogan .header-shade { display: none; }
    .element-slogan h1 { position: static; }

    Here’s another approach, as well, without hiding the header-shade.

    .element-slogan .tb-button { position: relative; z-index: 2; }
    #7862

    second one worked well for me. thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.