Add Some Style to Web Parts

Using Jquery and CSS, we can add some style to the web parts in SharePoint.

Here’s how it will look:

In the script below, we’ll target the icon <img> that SharePoint allows you to set via the Web Part properties (Advanced > Title Icon Image URL). We’re removing the width and height that are on the <img> tag so that we can control the size of the icon with CSS instead. Since we may not always have an icon set, we’ll add a class to the titles that have an image defined so that we can handle the styles differently in each case.

<script type="text/javascript">
function styleBubbles() {
    var itgImgColl = $("div.ms-webpart-zone div.ms-webpart-chrome div.ms-webpart-chrome-title h2.ms-webpart-titleText > img");
    itgImgColl.each(function() {
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });
    $("div.ms-webpart-zone div.ms-webpart-chrome div.ms-webpart-chrome-title h2.ms-webpart-titleText > img").parent().addClass("itgWebpartHasIcon");
}
_spBodyOnLoadFunctionNames.push("styleBubbles");
</script>

 

Then drop this code into your CSS file.

/*** Web Part Cells ***/
.ms-webpart-chrome-title {
    background:#969A9C;
    padding:10px 15px 5px
}
 
.ms-webpart-chrome-title .js-webpart-titleCell .ms-webpart-titleText,.ms-webpart-chrome-title .ms-webpart-titleText > a {
    text-decoration:none;
    color:#fff
}
 
.ms-webpart-chrome-title .ms-webpart-titleText > a:hover {
    color:#eaedf1
}
 
.ms-headerCellStylePressed {
    background:#dbdfe5
}
 
/*** Web Part Content Space ***/
.ms-wpContentDivSpace {
    padding:15px;
    background:#fff
}
 
/* web part title icons */
h2.itgWebpartHasIcon {
    padding-left:37px
}
 
h2.itgWebpartHasIcon img {
    position:absolute;
    vertical-align:top;
    width:55px;
    height:53px;
    top:-6px;
    left:-10px
}

2 Replies to “Jazz up Web Parts with CSS Styling”

    1. Drop this code in, and add the Jquery file to the location
      < script src="/ [YourLocationHERE] /jquery-1.11.2.min.js" type="text/javascript">< / script>

      Take out the extra spaces in the code above… couldn’t get it to post without them.

Leave a Reply

Your email address will not be published. Required fields are marked *