Need help? Check out our Support site, then


Changing a title bullet/icon to a custom image

  1. So I'm using the Neat! skin, and I did some basic color changing and image rerouting so that I could have my own background image and header. It's right here http://dukedavis.wordpress.com As you can see, though, the icon next to each individual title http://dukedavis.wordpress.com/wp-content/themes/pub/neat/images/h1.gif is still the old blue color. Anyone have any tags I can throw in the CSS to change it to a custom image?

  2. I would imagine if you use custom CSS, you could find the image that is referenced in the current CSS and then change that to an image of your choice (color included) and that would work. Without the custom CSS upgrade though, you are stuck with the image that is referenced by default.

    Trent

  3. I have the custom CSS upgrade, and I was able to change the header and background because they both had the URL's referenced. But the image for the bullet (h1.gif) isn't there.

  4. You are absolutely right! The CSS sheet doesn't reference wp-content/themes/pub/neat/images/h1.gif anywhere in the theme! I would imagine that this is an oversight! This is something that should be referenced in CSS, but is hardcoded in the theme itself. Maybe send in feedback!

    Trent

  5. Is there something I can just type in that would override the hardcode or whatever? Like, is there a standard CSS line that specifies the icon for the bullet that works in every theme, or would it be unique to Neat! itself? Thanks.

  6. yeah, the bullet is actually in the html, not the CSS. bad form. it has it's own class, though, so you can just turn it off:

    img.lefth2img { display: none; }

    now you can add your own background image to .post h2

  7. The first tag worked and got rid of the existing bullet, but I'm sorry; I'm an idiot and can't figure out CSS for the life of me. I even have basic C++ knowledge and I still don't understand CSS :)

    So I got the bullet to show up with this

    .post h2 {
    background:url('http://i3.photobucket.com/albums/y100/samsanov316/bullet.gif') no-repeat;
    display:inline;
    padding-bottom:5px;
    margin-bottom:5px;

    But now it's just showing up on top of the post text. Here's a screenshot
    http://i3.photobucket.com/albums/y100/samsanov316/error.jpg
    What am I doing wrong? Thanks for all your help so far.

  8. you need to add
    padding-left: 20px;
    the padding-left can be anything, as long as it's greater than the width of the image. (anything bigger than 16px, for the bullet you used)

  9. Cool. Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic