Hide SharePoint toolbar


I would like to hide the SharePoint toolbar shown below.

hide tool bar
How can I do it with Jquery or CSS?
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
Jamie McAllister MVPConnect With a Mentor SharePoint ConsultantCommented:
You can "view source" for the page an work it out that way too - but it's slower is all.

Alas I dont have a 2007 box available to me right now or I could do it myself.
Jamie McAllister MVPSharePoint ConsultantCommented:
You can do it with either.

Use the IE Developer Toolbar to determine the class or id of the markup that surrounds the toolbar, and insert some CSS or JQuery into a content editor webpart to set style of display=none.

If this should be hidden beyond single page, reference the CSS via masterpage instead.

Developer toolbar is opened by pressing F12 in IE. If you dont have it by default it can be downloaded from MS.
IsaacSharePoint Client Side DeveloperAuthor Commented:

The govt agency I work for blocks that download.

Any other suggestions?
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

IsaacSharePoint Client Side DeveloperAuthor Commented:
Ok.  That worked but it hid more than I wanted.

Not only did it hide the tool bar but it also hid the top and bottom buttons.  Check out before and after below.  Didn't know it will do the 'After' that way.

no toolbar
I will like to at least keep the bottom buttons.
Jamie McAllister MVPSharePoint ConsultantCommented:
Probably just a question of refining which DIV or other element is not displayed. Try one further in the markup.

Further, if all else fails you could add some more css to set the display of those particular button elements to 'inline' with the !important attribute to trump your other css that's hiding the bar...
Jamie McAllister MVPSharePoint ConsultantCommented:
display: inline I mean!
IsaacSharePoint Client Side DeveloperAuthor Commented:

I view source and it was pretty ugly.  I have highletted the buttons.  How would I do the inline? The name are long
<td width="99%" class="ms-toolbar" nowrap><IMG SRC="/_layouts/images/blank.gif" width="1" height="18"></td><td class="ms-toolbar" nowrap><a onclick="GoToLink(this); return false;" target="_self" href="../../Lists/Registrations/Register.aspx?CourseID=1&amp;CourseTitle=Action+Officer+Training+Session&amp;CourseStartTime=2012-04-12T18:00:00Z&amp;CourseEndTime=2012-04-12T19:00:00Z&amp;IsAvailableSeating=true"><input type="button" class="ms-ButtonHeightWidth2" [b]value="My Registration" [/b]name="btnFormAction2"></a></td><td class="ms-separator"> </td><td class="ms-toolbar" nowrap align="right">
		<TABLE cellpadding=0 cellspacing=0 width=100%><TR><TD align="right" width=100% nowrap>
		<input type="button" name="ctl00$m$g_c948d588_d488_486e_91d2_8a335c180cf9$gobackbutton2$ctl00$diidIOGoBack" [b]value="Close"[/b] onclick="STSNavigate('https:\u002f\u002fintranet\u002fciog6\u002fGACKO\u002fptr\u002fLists\u002fCourses\u002fcalendar.aspx');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$m$g_c948d588_d488_486e_91d2_8a335c180cf9$gobackbutton2$ctl00$diidIOGoBack&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_m_g_c948d588_d488_486e_91d2_8a335c180cf9_gobackbutton2_ctl00_diidIOGoBack" accesskey="C" class="ms-ButtonHeightWidth" target="_self" />
		</TD> </TR>

Open in new window

IsaacSharePoint Client Side DeveloperAuthor Commented:

Thanks for your help.  It led me to this.

table.ms-toolbar, .ms-toolbarContainer{ display:none}

The above hid the toolbar except the buttons.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.