SharePoint Web Part Style

Looking to add a bit of sass to your web parts? With this bit of jQuery and CSS, we’ll take control of the display of SharePoint web parts and their titles and icons.

Here’s an example:

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.

[code lang=”js”]
<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>
[/code]

[code lang=”css”]
/*** 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
}
[/code]

Happy styling!

sharepoint web part style