Design Minutes are quick design changes that you can make to your SharePoint site, adding flavor to the overall style of your design.

This Design Minute will focus on SharePoint bullets.  Out of the box, you get a yellowish / orangeish square bullet (yes, those are words that I just made up) that can leave a foul taste in your mouth if those colors don't exactly fit into the overall theme of your design.

Fortunately, it's quick and easy to change the appearance of the bullets that appear in almost every area of the site.  A custom bullet should be part of every design that you do, simply because it's so easy to change.  First of all, you'll need an image for your custom bullet.  Here's an example:

The size and shape of the bullet don't really matter, but obviously you can't make it bigger than the default text size for your site, otherwise it won't really display properly.  In general, you want a square image between five and ten pixels in size (height and width).

1. Save your bullet image on the server, preferably in a location where it won't get moved or overwritten
2. Open the default CSS file for your master page
3. Add the following CSS to this file:
   .bullet { background-image: url('/images/bullet.gif'); }Note:  You may have to add "!important" to the .bullet style, depending on your master page configuration
4. In the CSS (above), make sure that you have the correct relative path to your bullet image

Once your CSS file is saved and checked in, you should see the updated bullets throughout your site.  The .bullet style is used in Content Query Web Parts, the Summary Links Web Part, Link Lists, and much more.  You should see the new image appear in all these locations.