2015-05-28

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.

1. 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>

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

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

3. 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>

 

 

(Visited 1,779 times, 1 visits today)

About the author 

Jerry Ober

Leave a Reply

  1. I found this very useful, however I have a bit of a different issue. I need to change the image of the edit item icon that appears when you display the list view web part on the page. I have found the script that allows me to change the size but I am unable to figure out how to replace the image. I can do this directly on the page in the list but i need to happen on the home page when the list view is added to that page. Is that possible?

    Thanks
    Dorinda

  2. I am desperately needing to find a way to style the modern SPO web part headers and am not finding a way to do this. Do you have any input for how to go about doing this?

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

2 Free Ebooks: How to govern Microsoft teams 

Download your 2 free Microsoft Teams governance Ebooks and learn the steps necessary to create a bullet-proof governance strategy.