Changing a title bullet/icon to a custom image

  • Author
    Posts
  • #57411

    dukedavis
    Member

    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?

    #57519

    trent
    Member

    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

    #57521

    dukedavis
    Member

    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.

    #57522

    trent
    Member

    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

    #57523

    dukedavis
    Member

    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.

    #57528

    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

    #57547

    dukedavis
    Member

    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.

    #57548

    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)

    #57573

    dukedavis
    Member

    Cool. Thanks again.

The topic ‘Changing a title bullet/icon to a custom image’ is closed to new replies.