Custom Bullets Using CSS – Personalize Your Blog

Almost every blog design uses unordered lists to display the different items in the sidebar. By default unordered lists have only three different types of bullets (disc, square and circle) which are not very good looking to the eye. By using custom bullets you can make your blog design unique and more appealing to your site’s visitors.

How To Use Custom Bullets

For using custom bullets you need to add a bit of CSS to your blog’s stylesheet.

Blogger users can add the following code bits just before the ]]></b:skin> tag and Wordpress users need to add the following code at the end of their template’s style.css file.

1. Disable the default bullets

The code is as following :

ul { list-style:none; margin:0 0 0; padding:0 0 0; }

The above code disables the default bullets and also makes indentations set by your template (if any) zero.

2. Add The Custom Bullets

The code is as follows:

ul li { background:url(arrow_right.png) no-repeat left center; padding-left:20px; margin-bottom:10px; }

Replace the url field with the location where you have placed the image to be used as bullet. To move the bullet up or down to align with the text properly, replace center in the above code by custom values (use 1px, 2px etc. and see which value works better).

For example,

background:url(arrow_right.png) no-repeat left 1px;

You can also increase the padding and margin values in the code above to space the individual items in the list a bit more elegantly.

Save your template and exit. View your blog, you should now have custom bullets in your blog.

Some Custom Bullets For Use

In case, you are wondering where you can get good bullets, then your problem is solved. Here are some icons from the fabulous famfamfam silk icons pack which you can use for your blog.

Just right click on the bullet you like and save.