SharePoint Design Tip: Secret to my CSS Trickery

It may be painfully obvious, but if not… I go about doing lots of little things here and there in the SharePoint user interface (UI) by manipulating the display using CSS and IDs and class names that are already in the code.  Luckily there are a lot of ID/classes assigned to elements in the page, and if you know a little about CSS, you can use it to your advantage to morph or hide UI items.   This technique is how I hide the Site Settings and My Site links for portal.

Adjusting the UI is as easy as doing a View Source on the page, or what I love to use now is the View Partial Source that is a part of the Internet Explorer 5 Web Developer Accessories.  View the source and see if there are any ID or class names associated with the item, or look a level up or so and see if there are any ID or class names associated with the parent container.  Sometimes you can change things by using grouping and nesting in CSS.

Store your CSS modifications in your custom CSS file or in a Content Editor Web Part on the page itself.  It is clean, doesn’t require programming and is very easy to “back out” changes from the UI.