Sharepoint: Hide Page Elements via CSS
Alright, first official post!
How to Hide Ribbon/Page Elements in Sharepoint using CSS
1. Add a Content Editor webpart to the page you wish to remove elements from. (Site Actions > Edit Page; can do for Libraries/Lists/Pages) 2. Remove the title bar.(Click the ‘Edit Web Part’ button; under Appearance, select ‘None’ for Chrome Type) 3. Click the “Click here to add new content” in the webpart. The top Ribbon now goes into the Editing Tools. Under ‘Markup’, click on the HTML button and ‘Edit HTML Source’. 4. Add the CSS to hide the page elements/ribbon items you would like to hide.** (If you are hiding by class, add a period [ . ] before the class name. If you are hiding by id, add a pound sign [ # ] before the id name. If the id name has periods [ . ] in it, use a backslash [ \ ] before the periods to reference that id. 5. Click on ‘Stop Editing’ and check to see if the area is now hidden.
Example Image of CSS:
ADD. INFO: -The command DISPLAY: none makes the element and its place disapear, moving everything else to the left to cover the empty space. -VISIBILITY: hidden hides the element, but leaves the space where it was located. -This is with Sharepoint 2010
**To find the elements, open another window of the page in Internet Explorer (I know, I know, just do it). Hit F12, click on the mouse in the new window that pops up, and then search for the class/id name of the element you want to hide.