Hide SharePoint Online Page Elements Using CSS

A SharePoint page looks pretty cool but often we want to customize it according to our needs and standards. Some organizations do not allow the use of SharePoint Designer for reasons of security and integrity. Without access to SharePoint Designer, it looks tough to achieve.

This article will help you to hide SharePoint page elements without using javascript and using only simple css and a content editor webpart.

Below are the steps,

1. Use developer tools to access the element on the page and note the value of its id or class name. If it uses multiple classes, try to take the Id or the first name of the classes it uses.
   
   
2. Edit the page and add a content editor Webpart.
   
   
3. Add the <style> and </style> tags.
   
   
4. Now, we have to access the elements within the tags. If you are going to access it, using Id, then use “#” before the Id's name like #DeltaPlaceHolderSearchArea. If you are going to access the element, using class name, then use “.” Like .ms-breadcrumb-top.
   
   
5. Afterwards, add the style property, which you want to modify with the value you want the element to have, separated by a “:” and within “{“ and “}”. In this case, we would like to set the value of the “display” property to “none”. Our final tag would be kind of like “<style>#DeltaPlaceHolderSearchArea { display : none; }</style>” OR “<style>.ms-breadcrumb-top { display : none; }</style>”.
   
   
6. You can add the multiple elements within the same style tag.
   
   
7. Once you are comfortable with the process, you can add your styles to another text file (without the style tags) and save it with extension “.css”. You can link this file to your page, using a content editor Webpart. The main advantage is that you do not have to take your page down to make the changes. All the changes made to the CSS file will reflect in your page by simply refreshing the page.
   
   
8. Below are the Id's and classes of a few elements to get you started.
   
   
1. Hide the Title Row
   #s4-titlerow { display : none; }
   
   
2. Hide the Search Box
   #DeltaPlaceHolderSearchArea { display : none; }
   
   
3. Hide the Bread Crumb
   .ms-breadcrumb-top { display : none; }
   
   
4. Hide the Top Bar
   .ms-cui-topBar2 { display : none; }
   
   
5. Hide the BROWSE and PAGE Tabs
   .ms-cui-tts { display : none; }
   
   
6. Hide the Browse Tab Only
   #Ribbon.Read-title { display : none; }
   
   
7. Hide the Page Tab Only
   #Ribbon.WikiPageTab-title { display : none; }
   
   
8. Hide the Buttons on the right of top bar
   #RibbonContainer-TabRowRight { display : none; }
   
   
9. Hide the Full Screen Button on the right of top bar
   #fullscreenmodebox { display : none; }
   
   
10. Hide the Site Icon
    #siteIcon { display : none; }
    
    
11. Hide the Bread Crumbs
    .ms-breadcrumb-box { display : none; }
    
    
12. Hide the Left Navigation Panel
    #sideNavBox { display : none; }

Screenshots

• Page Elements
  
  
  
  
• Code
  
  
  
  
• Demo page