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.

Hover Color For View Post Button

  • Creator
    Topic
  • #17586

    I have tried firebug to no avail for the correct custom .css to change the hover color of the VIEW POST button.
    All I can find is the color for the button itself.

    Any suggestion for the correct custom.css would be greatly appreciated.

    I just need the hover color to be #c1a47c

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

    Hello,

    Here’s a trick you can do with Google Chrome’s built-in developer tools (opposed to using Firebug) that makes it really easy see what effects the hover state of HTML element. Here’s a screenshot:

    http://www.uploadblvd.com/uploads/image_53b5b511b8078.png

    So, you’d do this from your custom CSS or child theme’s style.css:

    .element-post_list_paginated .read-more:hover, 
    .post_list_paginated .read-more:hover {
    	background-color: #c1a47c;
    	background-image: none;
    }

    Note that I’m setting background-image: none because the theme is adding a white transparent image that appears on hover over top the current color. This is how the user is able to select any “Accent Color” from a color wheel in the theme options and have the background color of the button appear to lighten on the hover.

    =========

    For general reference:

    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‘s style.css 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.

    #17629

    Thanks, it did not change the hover color of the button, it stayed the same, but no big deal, it still looks ok. Not going to fret over the small stuff. It’s my own private blog, so it is not an issue.
    I appreciate the suggestion about chrome, nice

    #17634
    Jason Bobich
    Keymaster

    Can I see a link to the site with the CSS change implemented?

    #24219

    God I know this was a long time ago, but I am updating a few things and would like to change that color.
    Here is the HOMEPAGE with the VIEW POST button ( still grey )
    I did notice that when you actually click on the blog category radio button ( Help and How To )
    the VIEW POST button hover color is indeed changed if that helps.
    BTW, the latest theme version is installed.

    Here is the custom css being implemented: ( child theme )

    /* Add your custom CSS here. */
    #access li a:hover { background: #c1a47c; }
    .element-post_list_paginated .read-more:hover,
    .post_list_paginated .read-more:hover {
    background-color: #703b12;
    background-image: none;
    }

    SITE:
    http://harleyshelphut.com/

    looking at it, are we targeting the wrong area?
    .post_list_paginated?

    perhaps we should be targeting
    .btn_default?

    I am gonna try it and will post back

    • This reply was modified 1 year, 10 months ago by Leila's Lass.
    #24221

    did not work, but then again, I am css challenged

    I could easily have used the wrong css statement

    that’s definitely it, I was able to change with firebug, however
    can not get the custom css statement right…color me code challenged

    a.btn.btn-default

    #24231
    Jason Bobich
    Keymaster

    It appears you’ve made customization to how the posts display since you originally posted. Checkout the screenshot I originally posted and you can see the different structure you had previously.

    I think this is what you’re currently looking at and trying to change now:

    .btn-default.active,
    .btn-default.focus, 
    .btn-default:active, 
    .btn-default:focus, 
    .btn-default:hover, 
    .open > .dropdown-toggle.btn-default {
      background-color: #703b12;
      color: #fff;
    }
Viewing 6 replies - 1 through 6 (of 6 total)

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