When you add a widget to the sidebar of your WordPress blog, you are essentially adding a specialized list. These lists are formatted to include things like recent posts, pages, or blogroll. In most themes, these lists are formatted with a negative list-style, meaning they do not follow a bullet. In many instances, this creates a clean simple look, but sometimes it’s fun to create custom bullet graphics to add a bit of pizazz. Here’s the way you do just that using the Slate theme:
Using Photoshop, create the image that you would like to display as your bullet. A good rule of thumb is to make this image no larger then 15x15px. For this demonstration, I created an image for the Slate theme that’s 12x11px and displays a blue arrow on a gray background. The colors were chosen to match the color pallete of the Slate theme. I named my image arrow.png. The result was an image that looked like this:
To make this image available to call upon, it needs to be uploaded into the images folder within the theme directory. If your theme doesn’t include an images folder, I recommend creating one. For the Slate theme, we are dropping the image into wp-content/themes/slate/images/.
Now that the image is in place, we can specify its use in the stylesheet. Open style.css by selecting Editor under the Appearance section on your WordPress dashboard. Scroll down to the section titled sidebar and add this snipit:
#sidebar ul li ul{
list-style-image: url(images/arrow.png);
padding: 0 0 0 5px;
}This style describes the list-style-image for all list items that fall bellow the sidebar title in the list hierarchy. With the Slate theme, a small left padding was needed to bump the images away from the content/sidebar dividing line. In other themes, you may find that greater or lesser padding is needed.
Here is the final result using this technique on the Slate theme demo page.
Related Media
Comments
10.16.09
… I also find myself torn between the coffee shop and my dual monitor setup
11.04.09
May I suggest ABR Viewer as an alternative to loading and trying each brush in Photoshop? It’s free, and I use it regularly. You may find this a great time-saving alternative!
http://abrviewer.sourceforge.net/
Hope it helps!
11.04.09
Thanks for the referral, Cyndi! I’ll have to spend some time tonight trying it out.
02.11.10
I love you to pieces man!!
10.14.10
I wished and wished for a Mac, then was given one at work.
So I moved all my files over.
I HATE it. I’m a designer. I have about 50 folders for 50 different projects. I name the banner psd “banner.psd” for all of them. Try and search for them all, yeah the Mac finds them but then you have to do “get info” for each one (or change some such setting and still click on each to see where the dang thing is located. On windows. I glanced at the path to the folder and voila. Yeah changing permissions on Vista is a headache but it’s far better than the constant problems I have on the Mac. Photoshop is twitchy at best, the thing crashes, although my Roku, PS3, Wii, personal laptop all do fine with my wirless, the mac drops it all the time. I use multiple monitors. Oh my god what idiot thought of leaving the application menu on one screen when the application is on another? You can only choose one little sprout because Steve Jobs knows better than you how you should work.
can’t wait to ditch it.
sorry tirade over.
ps tons of free windows applications out there.
11.26.10
Um… how about not naming all of your files the same name? Sounds more like an organizational issue than an operating system issue, either way.
I might recommend using an identifier and THEN _banner.psd? I assume it’d be difficult to find photos as well if every picture on a drive had its own folder and was named “photo.jpg”.
Examples:
Projectname_size_banner.psd
Clientname_size_banner.psd
etc…
04.17.11
Ok, so… I’m a total newbie to photoshop. I have CS5 and a brickton of brushes. I have tried renaming them, but they do NOT show up in the list like I want them to. I’ve played around with it for like a half hour. Can anyone please help?