SharePoint Design Tip: Secret to my CSS Trickery

Search:

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.

posted on Tuesday, October 11, 2005 8:18 PM

Comments

# re: SharePoint Design Tip: Secret to my CSS Trickery
Bil Simser
Posted @ 10/12/2005 5:07 AM
You probably know about the IE developer toolbar which is a great tool for examining pages as well. It's not as good as the FireFox one but works the same.

You can check it out here:
http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
re: SharePoint Design Tip: Secret to my CSS Trickery
Michaela
Posted @ 10/14/2005 12:40 AM
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!
# re: SharePoint Design Tip: Secret to my CSS Trickery
Heather
Posted @ 12/1/2005 12:15 PM
Michaela - The flashing issue of the original UI will occur. Best bet is to edit the stylesheets directly or to create your own.
re: SharePoint Design Tip: Secret to my CSS Trickery
Joko Widono
Posted @ 10/28/2007 7:42 AM
Miss, I am sorry, maybe this is not in the right place to ask

I want to ask something
Do 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 navigation
3. using Nifty CSS code in the Master Page
If you can show me an example for doing it in one button

Thank You and if you can reply, please send it to my e-mail

Title
Name
Email (never displayed)
Url
Comments
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Remember Me?
Please add 6 and 6 and type the answer here:

Blog Stats:
Posts - 388
Stories - 39
Comments - 1796
Trackbacks - 183