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.

4 thoughts on “SharePoint Design Tip: Secret to my CSS Trickery”

  1. You said you store the CSS modifications in a Content Editor Web Part. I did so and changed some styles for the first and second horizontal menu row.
    After this the page looks fine, but at every request for a short time the page without the custom styles flashes before the styles are applied. So one can see the "original" layout for a short moment and the screen is flashing – not good…
    Do you also have this effect? Or did I miss something and it can be avoided?

    Thanks!

  2. Michaela – The flashing issue of the original UI will occur. Best bet is to edit the stylesheets directly or to create your own.

  3. Miss, I am sorry, maybe this is not in the right place to askI want to ask somethingDo you know how to do these in sharepoint 2007?1. Horizontal Topnav flyouts.2. Applying different type of background in the topnav buttons Means that i want to have different type of background for each buttons or links in the top navigation3. using Nifty CSS code in the Master Page If you can show me an example for doing it in one buttonThank You and if you can reply, please send it to my e-mail

Comments are closed.