1,646 articles and 12,003 comments as of Tuesday, July 27th, 2010

Monday, October 5, 2009

New CSS Tool for SharePoint Users at SharePointCanvas.com

2009-10-01-CheckBox

As we were going through the process of customizing a template for our SharePoint intranet, one question kept popping up. How do I make an item on the template go away?

Here are some common items, on the default template, that people have asked to hide:

  • The Left Navigation
  • The “View All Site Content” tab on the left nav
  • The My Sites Tab
  • The Global Bread Crumb
  • The Search Box
  • The Help Icon

And so on….

Figuring out how to hide elements on the Default SharePoint Templates can be a daunting challenge for even a seasoned designer. So we undertook making a tool, SharePoint CSS Builder, which allows an end user with no CSS knowledge to check and uncheck the items they want to see on the page. 

Twenty five items on the default team site template have been listed with a corresponding checkbox. If the box is checked, the item stays, if it is un-checked then CSS code is produced that a user can copy and paste into a Content Editor Web Part or master page.

We placed this site at http://SharepointCanvas.com/spc

Due to our blogging hosts restrictions there was no way we could  run the script on our blog.

The CSS Builder features an icon that will show you a picture of where each item is on the default template. 

  1. Un-Check all items you want to hide
  2. Click “Generate CSS” and the CSS will appear in the top text box
  3. Copy the CSS and paste directly into a Content Editor Web Part in your SharePoint Page

*Note: If you place the CSS code into a style sheet, be sure to remove the opening and closing <style> tags

Bryon Wyly
Brian Shilling

Bryon WylyGuest Author: Bryon Wyly

Bryon has been a Microsoft Developer for 6 years and is currently the SharePoint developer and administrator for the Xavier University. He is responsible for SharePoint collaboration sites, CIO dashboards and the campus wide intranet.

Bryon enjoys finding solutions with SharePoint that an end user can implement out of the box or with SharePoint Designer.

Brian ShillingGuest Author: Brian Shilling

Brian has been working as a web developer, both part-time as a student and freelance for the last two years. In this time, he has worked on many sites for clients ranging from huge corporations to small organizations. Although Brian specializes in XHTML and CSS development with the latest standards, he has been studying the amazing technology of Microsoft Office SharePoint Server (MOSS).

View all entries in this series: BryonWyly - Show-Hide»
Entries in this series:
  1. New CSS Tool for SharePoint Users at SharePointCanvas.com
 

Please Join the Discussion

5 Responses to “New CSS Tool for SharePoint Users at SharePointCanvas.com”
  1. Gene Perry says:

    This is a fantastic tool, thank you SO much for putting this together.

    Gene Perry
    Abbott Vascular

  2. Erich O'Donnell says:

    Fantastic! This is a great start. Will this tool be enhanced to include other CSS elements within SharePoint?

    Thanks again!

  3. Carolina says:

    I agree, this is an awesome tool. Safes so much research and time :)..thanks again

  4. Peter Allen says:

    Mark,

    This link in this article needs to be changed to http://www.sharepointcanvas.com/spc/. The current link takes you to a different site not related.

    Thanks.

  5. Natasha says:

    Thanks, Peter. We’ve corrected the link.


Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!