Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS

Hiding Title Bar, Navigation, Breadcrumb section in SharePoint 2010

4.00/5 (1 vote)
10 Apr 2012CPOL 56.6K  
Customizing your SharePoint pages without editing the master page.

Introduction

In looking for a way to hide some of the navigation / bloat in SharePoint 2010, I found many articles instructing people to edit the master page in order to hide various sections.

In my opinion, it is preferred not to edit the master page and instead use JavaScript or CSS when you can in order to achieve the same goal.

Using the code 

Add a "Content Editor" web part to your page. Click "Edit web part" and choose "Edit HTML source".

A box will appear which will allow you to put in any custom JavaScript or CSS you want. In this case, I want to remove the left nav, the top breadcrumb / title bar, but keep the top nav:

CSS
<style type="text/css">
BODY #s4-leftpanel {
	DISPLAY: none
}
.s4-ca {
	MARGIN-LEFT: 0px
}
.s4-title {
	DISPLAY: none
}</style>

Finally, set the "Chrome Type" to None so that the title of the web part is not visible.

If you open your master page, you can look at the ID or class names in order to tailor this look to what you need.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)