SharePoint Online CSS Tips

I am a SharePoint architect\developer currently employed by a global manufacturing company that has close to 10k SharePoint online users.  We are 100% in the cloud with Office 365 and do not have any on prem SharePoint servers.  I often get asked how to "spruce" up the look of team and project sites. Here are a few simple pieces of code that can be added to sites to improve the overall look.  These are very easy to modify by users without any coding experience.

Change the background color and font of web part headers:

• Edit your page and add a script editor
• Copy and paste any of these snippets into the script editor.  If you want to use multiple, start with <style type="text/css"> and end with </style>

<style type="text/css">  
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {    
background-color: black;     /* changes the background color of the web part header.  Hex too! #000000 */
font-size: 20px;            /* Font Size */
font-weight: bold;         /* Font bold, italics, */
color: white;             /*Font color */
padding: 5px 5px;        /*padding around fonts */
} </style>

Remove the Edit Links from the global navigation so users cannot edit the links

<style type="text/css">  
.ms-navedit-editSpan { 
 display:none;
}</style>

Add a background Image to a Content Editor webpart.  This allows the user to put text or buttons in front of an image to dramatically improve the look of the site.

• Add a CEWP to your Page and use F12 dev tools in IE or Firebug in Firefox to retrieve the ID of the webpart.  It should look something like WebPartWPQ2.
• Add a Script Editor WebPart to your page with the following code

<style type="text/css">
#WebPartWPQ3 {
 background-image:url(https://server/path to image/image_name.png); /* path to image saved in ShPoint */
 background-size: 100% 100%;                           /* Sets the background image to the full size of the webpart */
 background-repeat:no-repeat;                          /* Only show one image, delete this line to show repeating */ 
 padding:5px 0px 0px 15px;        /* Add padding if needed to any of the sides of the webpart */  
 background-position:right top; /* move background image to right top of the wp, to center delete this line */
}
</style>

 

 

by Jerry Ober via Everyone's Blog Posts - SharePoint Community