Hide the SharePoint ribbon on a page via simple CSS

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

}</style>

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

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.