Solved

Hide SharePoint toolbar

Posted on 2012-04-05
8
670 Views
Last Modified: 2012-04-05
Hello,

I would like to hide the SharePoint toolbar shown below.

hide tool bar
How can I do it with Jquery or CSS?
0
Comment
Question by:Isaac
  • 4
  • 4
8 Comments
 
LVL 31

Expert Comment

by:Jamie McAllister MVP
ID: 37812684
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.
0
 
LVL 5

Author Comment

by:Isaac
ID: 37812784
OUCH!

The govt agency I work for blocks that download.

Any other suggestions?
0
 
LVL 31

Accepted Solution

by:
Jamie McAllister MVP earned 500 total points
ID: 37812809
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.
0
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
LVL 5

Author Comment

by:Isaac
ID: 37813072
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.

Before:
img1
After:
no toolbar
I will like to at least keep the bottom buttons.
0
 
LVL 31

Expert Comment

by:Jamie McAllister MVP
ID: 37813092
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...
0
 
LVL 31

Expert Comment

by:Jamie McAllister MVP
ID: 37813097
display: inline I mean!
0
 
LVL 5

Author Comment

by:Isaac
ID: 37813218
Ok.

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

0
 
LVL 5

Author Comment

by:Isaac
ID: 37813311
JamieMcAllister,

Thanks for your help.  It led me to this.

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

The above hid the toolbar except the buttons.
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question