Changing a title bullet/icon to a custom image

dukedavis · Member · Feb 7, 2007 at 7:00 am
Copy link

Add topic to favorites
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?
trent · Member · Feb 7, 2007 at 8:14 am
Copy link
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
dukedavis · Member · Feb 7, 2007 at 8:18 am
Copy link
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.
trent · Member · Feb 7, 2007 at 8:32 am
Copy link
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
dukedavis · Member · Feb 7, 2007 at 8:44 am
Copy link
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.
sunburntkamel · Member · Feb 7, 2007 at 1:00 pm
Copy link
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
dukedavis · Member · Feb 7, 2007 at 6:14 pm
Copy link
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.
sunburntkamel · Member · Feb 7, 2007 at 7:22 pm
Copy link
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)
dukedavis · Member · Feb 7, 2007 at 9:36 pm
Copy link
Cool. Thanks again.

No items found.