SharePoint Customization Tip: Hiding Bullets without a blank gif

As I’ve mentioned before there are several items you can modify or hide just by using CSS and themes in SharePoint. This is another example of that.

Most of you have at one point or another wanted to either change or remove certain bullets from SharePoint. One way I have seen people mention they got around this was by adding a “Blank.gif” file to overwrite the existing bullet.

I guess that is one way you could do it but it’s not really something I would recommend. The better solution is usually to pay attention to the document structure and use CSS to simply hide the bullet via the theme.

Advantages of doing it this way
1) It’s site (well at least THEME) specific – you don’t have to hide it for “all sites” – just do it in the theme you use.
2) You don’t need to modify your site in FrontPage and unghost it.
3) You don’t have the hassle of creating/editing site definitions.

The main thing I recommend for anyone involved with SharePoint customization is to create a dummy site which you don’t mind unghosting so that you can take a look at the document structure, and learn how to manipulate the page with CSS be simply following the DOM. This is one such example:

Hide the bullets on the “Site Settings Page” using only the theme:

If you look at the document structure (View Source) of the sitesettings.aspx page you will notice the “Rect.Gif” image which is the bullet being used.

You will also notice it’s inside a table cell with the ms-descriptiontext class applied to it.

based on this we can add the following class to our stylesheet to hide the image:

/* Added this class to hide the bullets on the site settings page – Shane */
.ms-descriptiontext img {
display:none;
}

Another simple but effective tip :)

You may also like...

1 Response

  1. Daniel says:

    How about changing the image? for example rect.gif, if I would want plus.gif instead? Throu the default list defintion is not an option. Can I do it throu css? Doing it by overwriting the file seems to be the only way, but it’s ugly…

I would love to hear from you.

%d bloggers like this: