Clean Home – Changing hover and bullet colors

  • Unknown's avatar
    alwayswellwithin · Member ·

    Hello!

    I’m having 2 small challenges:

    I managed to change the hover color in Clean Home from red to the color of my choice (Chartreuse 4). But I still have these two problems:

    1. The bullet points in the widgets with lists remain red. Ick!

    2. The Recent Comment Widget (titled “Conversations) in the sidebar, still has the red hover cover.

    Any code you can give me to change this horrific state of affairs would be seriously appreciated. Thanks so much!

    My blog is: http://alwayswellwithin.com

    Super thanks. Sandra

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    1. The “bullets” are actually two images (one when inactive, and one on hover) so you will need to make a new image like the existing, upload it to your media library and then replace the existing URL with the new URL in the following.

    #sidebar .block li a:hover {
background: url("images/bullet_red.gif") no-repeat scroll 6px 52% rgba(255, 255, 255, 0.5);
}

    2.

    The recent comments widget has separate styling located in

    #sidebar .widget_recent_comments li a:hover

    Change the color value there.

  • Unknown's avatar
    alwayswellwithin · Member ·

    Thanks, Sacred Path. I really appreciate your help. I was afraid of that on the bullet front, but always an opportunity to learn something I don’t know.

    It looks like I need to learn more about bullets! Maybe my thinking and understanding is wrong, but wouldn’t it make sense for the WordPress theme team to make the bullets in a way that they can be changed via CSS instead of via creating an image?

    I will check out the recent comments style again. I didn’t see anything that indicate bold, but I will look again.

  • Unknown's avatar
    thesacredpath · Member ·

    They can. There are some plain, generic bullets that are a standard such as the round dot, a circle (no colored center) and a square. The bullets were done this way so that they could have a plain and a hover color for the bullets for aesthetics and to match the hover color for the text. With images as bullets, it gives one the ability to use more complex and interesting shapes.

    It is just a 3px x 6px block. Not anything difficult to make really.

  • Unknown's avatar
    alwayswellwithin · Member ·

    Sacred Path,

    Thanks for the explanation. That makes sense. It’s probably easy, but I have no clue how to make an image like this. I’ve never used an image making program and don’t even know how to find or get one. What program do you use to make images? Someone told me you can download Paint for free to make headers. Would the Paint program do the trick.

    Is there a way to override the hover color for the bullets? I can live with the plain grey color of the bullets but the red hover color with my green text is gross.

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Use my contact form on my blog and give me your preferred hover color (and inactive color if you want to change that as well) and I’ll make them for you.

  • Unknown's avatar
    thesacredpath · Member ·

    The hover color on the image bullets is in the image so no, it cannot be overridden. The image has to be replaced.

  • Unknown's avatar
    thesacredpath · Member ·

    I’m going to rest for a while so it might be a little bit before I get them done for you.

  • Unknown's avatar
    alwayswellwithin · Member ·

    Hi Sacred Path,

    That’s very kind of you to offer. You are awesome.

    However, I think it would be good for me to learn how to do this myself. There’s always the chance that I will want to change the color again and I don’t want to have to bother you every time I’m hit by the impulse to change colors on my blog.

    I’ll try to find a program where i can make an image. It can’t be so difficult to make a little square!

    Thanks for all your kindness.

  • Unknown's avatar
    thesacredpath · Member ·

    There are a lot of freebee image editing/paint programs out there that can do this. All you will have to do is make a 3px x 6px rectangle, save it as a PNG and then upload it.

  • Unknown's avatar
    alwayswellwithin · Member ·

    Thanks!

    In the meantime, I had a brilliant idea. I replaced the one that says:

    url(“images/bullet_red.gif”)

    with the one that says “black” (presumably for the inactive).

    Now there’s no bullet when you hover. That’s not what I expected (I thought I would get a gray one) but nothing is far better than a red one!

    I’ll still check out making an image, but I don’t need to stress over the red bullets in the meantime. ;)

  • The topic ‘Clean Home – Changing hover and bullet colors’ is closed to new replies.