Sunday, May 21, 2006

Custom Bullets in Blogger

You can use cascading style sheet definitions to change the bullet points in blogger:

Look for the section defining CSS post attributes (the part of your template that starts /* Posts
----------------------------------------------- */
)

Add this code (I added it at the bottom of the section, but you can do it wherever):


.post ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

.post li {
background: url(http://www.locationofbulletimage) left top no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}

The parts in green are the parts you will change to customize the look. You will need to store the image you want to use as your bullet online somewhere, and put the URL in the background tag. The padding-left tag tells the browser how far to the left to move the text, so it's not overlapping the bullet.

To apply the changes to the entire page (not just the posts) or to use it on a regular page, put the code in your header and leave out the .post before the UL and LI tags. Here's a page with instructions for that.

2 Comments:

Blogger Bridget said...

thanks for posting this, i'm so programming challenged... i still have to figure out a place to store images.

1:37 AM  
Blogger purple_kangaroo said...

If you need help with it, drop me a line. I'm just an e-mail away (address in my profile).

10:15 PM  

Post a Comment

<< Purple Puzzle Place Home