{"id":73,"date":"2015-06-27T03:04:00","date_gmt":"2015-06-27T03:04:00","guid":{"rendered":"https:\/\/bangimportant.itgroove.net\/?p=73"},"modified":"2023-02-24T21:39:43","modified_gmt":"2023-02-24T21:39:43","slug":"sharepoint-web-part-style","status":"publish","type":"post","link":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/","title":{"rendered":"SharePoint Web Part Style"},"content":{"rendered":"

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.<\/p>\n

Here’s an example:<\/p>\n

\"webparttitles\"<\/a><\/p>\n

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.<\/p>\n

[code lang=”js”]
\n<script type="text\/javascript">
\nfunction styleBubbles() {
\n var itgImgColl = $("div.ms-webpart-zone div.ms-webpart-chrome div.ms-webpart-chrome-title h2.ms-webpart-titleText > img");
\n itgImgColl.each(function() {
\n $(this).removeAttr(‘width’)
\n $(this).removeAttr(‘height’);
\n });
\n $("div.ms-webpart-zone div.ms-webpart-chrome div.ms-webpart-chrome-title h2.ms-webpart-titleText > img").parent().addClass("itgWebpartHasIcon");
\n}
\n_spBodyOnLoadFunctionNames.push("styleBubbles");
\n<\/script>
\n[\/code]<\/p>\n

[code lang=”css”]
\n\/*** Web Part Cells ***\/
\n.ms-webpart-chrome-title {
\n background:#969A9C;
\n padding:10px 15px 5px
\n}<\/p>\n

.ms-webpart-chrome-title .js-webpart-titleCell .ms-webpart-titleText,.ms-webpart-chrome-title .ms-webpart-titleText > a {
\n text-decoration:none;
\n color:#fff
\n}<\/p>\n

.ms-webpart-chrome-title .ms-webpart-titleText > a:hover {
\n color:#eaedf1
\n}<\/p>\n

.ms-headerCellStylePressed {
\n background:#dbdfe5
\n}<\/p>\n

\/*** Web Part Content Space ***\/
\n.ms-wpContentDivSpace {
\n padding:15px;
\n background:#fff
\n}<\/p>\n

\/* web part title icons *\/
\nh2.itgWebpartHasIcon {
\n padding-left:37px
\n}<\/p>\n

h2.itgWebpartHasIcon img {
\n position:absolute;
\n vertical-align:top;
\n width:55px;
\n height:53px;
\n top:-6px;
\n left:-10px
\n}
\n[\/code]<\/p>\n

Happy styling!<\/p>\n

sharepoint web part style<\/h2>\n","protected":false},"excerpt":{"rendered":"

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 … <\/a><\/p>\n","protected":false},"author":4,"featured_media":79,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2,3,5,7,8,9],"tags":[],"acf":[],"yoast_head":"\nSharePoint Web Part Style - Archive<\/title>\n<meta name=\"description\" content=\"SharePoint web part style - make your web parts pop and gain more control of title icons.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SharePoint Web Part Style - Archive\" \/>\n<meta property=\"og:description\" content=\"SharePoint web part style - make your web parts pop and gain more control of title icons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Archive\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-27T03:04:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-24T21:39:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"656\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matt Lonpre (Alumni)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Lonpre (Alumni)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/\",\"url\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/\",\"name\":\"SharePoint Web Part Style - Archive\",\"isPartOf\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg\",\"datePublished\":\"2015-06-27T03:04:00+00:00\",\"dateModified\":\"2023-02-24T21:39:43+00:00\",\"author\":{\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\"},\"description\":\"SharePoint web part style - make your web parts pop and gain more control of title icons.\",\"breadcrumb\":{\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage\",\"url\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg\",\"contentUrl\":\"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg\",\"width\":656,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Archive\",\"item\":\"https:\/\/regroove.ca\/archive\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SharePoint Web Part Style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regroove.ca\/archive\/#website\",\"url\":\"https:\/\/regroove.ca\/archive\/\",\"name\":\"Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regroove.ca\/archive\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0\",\"name\":\"Matt Lonpre (Alumni)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g\",\"caption\":\"Matt Lonpre (Alumni)\"},\"url\":\"https:\/\/regroove.ca\/archive\/author\/mlongpre\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SharePoint Web Part Style - Archive","description":"SharePoint web part style - make your web parts pop and gain more control of title icons.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/","og_locale":"en_US","og_type":"article","og_title":"SharePoint Web Part Style - Archive","og_description":"SharePoint web part style - make your web parts pop and gain more control of title icons.","og_url":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/","og_site_name":"Archive","article_published_time":"2015-06-27T03:04:00+00:00","article_modified_time":"2023-02-24T21:39:43+00:00","og_image":[{"width":656,"height":200,"url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg","type":"image\/jpeg"}],"author":"Matt Lonpre (Alumni)","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Matt Lonpre (Alumni)","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/","url":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/","name":"SharePoint Web Part Style - Archive","isPartOf":{"@id":"https:\/\/regroove.ca\/archive\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage"},"image":{"@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage"},"thumbnailUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg","datePublished":"2015-06-27T03:04:00+00:00","dateModified":"2023-02-24T21:39:43+00:00","author":{"@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0"},"description":"SharePoint web part style - make your web parts pop and gain more control of title icons.","breadcrumb":{"@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#primaryimage","url":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg","contentUrl":"https:\/\/regroove.ca\/archive\/wp-content\/uploads\/sites\/6\/2015\/07\/webparttitles.jpg","width":656,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/regroove.ca\/archive\/2015\/06\/27\/sharepoint-web-part-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Archive","item":"https:\/\/regroove.ca\/archive\/"},{"@type":"ListItem","position":2,"name":"SharePoint Web Part Style"}]},{"@type":"WebSite","@id":"https:\/\/regroove.ca\/archive\/#website","url":"https:\/\/regroove.ca\/archive\/","name":"Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regroove.ca\/archive\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/0deb86ff016aebc76f86a79a0e7236d0","name":"Matt Lonpre (Alumni)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/regroove.ca\/archive\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f084e0ef8fd6992834b5b085b737a7a2?s=96&d=mm&r=g","caption":"Matt Lonpre (Alumni)"},"url":"https:\/\/regroove.ca\/archive\/author\/mlongpre\/"}]}},"_links":{"self":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/73"}],"collection":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/comments?post=73"}],"version-history":[{"count":1,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":2800,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/posts\/73\/revisions\/2800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media\/79"}],"wp:attachment":[{"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/media?parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/categories?post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regroove.ca\/archive\/wp-json\/wp\/v2\/tags?post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}