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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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?
Jamie McAllister MVPSharePoint 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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.