New Affiliate Discoveries

Inspired by Matt Blancarte’s bulleted icons in his lists and overall rockin’ website design, I made a short list of easy mods to my default CutLine Theme. Most of them took only a few minute each, and while subtle, the look is gradually looking less cluttery to me.

This post will show you how I went from boring bulleted lists to stylish “Sparklet” icons for my lists. For more information that you could ever imagine on styling lists, check out Listutorial, from which I got the following information.

Step One:

Choose an Icon for your bullets. I chose “Sparklet” from StyleGala’s page titled “Bullet Madness” with over 200 bullet icons..

Step Two:

Using an FTP Program, upload the icon file to the images folder in your current theme.

Step Three :

This is the fun part … editing your CSS. In your WordPress Dashboard, select Presentation -> Theme Editor. From the list on the right, I edited my “Style.css” file, which contains nearly all the CSS for my theme. Your file names may vary depending on the theme. You want to look for the CSS tags for your lists, both ordered and unordered. In Cutline, they look like this:

.entry ul, .entry ol { ... }
.entry li { ... }

Step Four:

Remove the default shape from your list times by specifiying list-style-type: none; within the tags for your unordered lists style. It should look a little like this:

.entry ul { list-style-type: none;}

There will probably be a few more items inside the curly brackets. If there is already a list style specified, like “square”, simply change it to “none”

Step Five:

Add the icon image to your list item css like this (replace “sparklet.png” with your image name, and double check the proper location of images for your style sheet and theme). Adding “no-repeat” prevents the icon from displaying mulitple times across the line:

.entry li { background: url(images/sparklet.png) no-repeat;}


Step Six:

Position the image vertically next to your list text. I started with positioning of “0″ and “.4″ em. ‘Em’ is the width of an “m” character, and will vary from font to font. Experiment with various values to get the image centered up and down. We’ll worry about right and left in the next step. By using “em” in specifying your positions, it doesn’t matter what font or size is ucrrently being used. Insert the new code into your list item style like this:

.entry li { background: url(images/sparklet.png)
background-position: 0 .4em; }

Step Seven:

Position the text away from the image by adding some padding to your list time text. Just add the following padding , I used .7 em, but you can experiment depending on the size of your image:

.entry li { background: url(images/sparklet.png)
background-position: 0 .4em;
padding-lfet: .7em 0 0 0; }

Preview a bulleted list in a new browser window and tweak the position and padding until the image is lined up just right. Here’s what it might look like:

• Congratulations on adding your own little sparklet!
• If you found any other resources for bullet icon images, just leave a comment below.
• Have fun tweaking your blog.

Popularity: 14% [?]