Hover Color For View Post Button

[Leila’s Lass]

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

Topic

[Jason Bobich]

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.

[Leila’s Lass]

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

[Jason Bobich]

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

[Leila’s Lass]

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 7 years, 4 months ago by Leila's Lass.

[Leila’s Lass]

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

[Jason Bobich]

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

[Author]

Replies