Hide the SharePoint ribbon on a page via simple CSS

August 10th, 2011 | Posted by Marijn in css | sharepoint 2010

On some pages I just want to hide the SharePoint ribbon.

Right now I am working in a multinational who has a lot of different technologies at their disposal: Fill-in forms all have a very uniform look&feel, no matter what technology is behind it.
When you want to make them in SP2010, the SharePoint ribbon is ruining that uniformity.

I have tried to do it with an aspx page and a custom “new item form” , but that gives me issues with the attachment functionality.

The solution? A Content Editor webpart page that I can use to add code to hide the SharePoint ribbon! That way I can create my own header, and create just a link to add attachments.

The way you do this is simple:

1. edit the page

2. add a new webpart: Content Editor Webpart

3. edit the webpart’s html code

4. Add following code

5. Save the page.

Just hide the title of the webpart and you can’t even see it is there!

The code to hide the SharePoint ribbon

<style type="text/css">

#s4-ribbonrow {

        DISPLAY: none


So, what this code does is just hide the whole ribbon row.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Leave a Reply

%d bloggers like this: