Targeting a Single Web Part with CSS

Targeting a Single Web Part with CSS

An important thing to note about using the CSS in general is that it saves a ton of time styling individual elements, and let you easily set a style for everything on the page.  Where this gets complicated is if you have multiple web parts on the page and dont want to modify all of them and would rather specify which one the CSS code modifies.

For example, if you were to add the following code to a SharePoint page, your CSS would be applied to all content on the page that was styled using the selector .someCSS{}.

<style>
 
.someCSS{
 
property: value;}
 
</style>

 

In order to make our CSS only apply to a specific web part on the page, we need to add in a declaration.  That is done using the following string: #MSOZoneCell_WebPartWPQXXX, (where XXX is the number in the div id of the web part on the page.)

<style>
#MSOZoneCell_WebPartWPQ2
.someCSS{
 
property: value;}
 
</style>

Here’s how to find out the number to add to the #MSOZoneCell_WebPartWPQXXX string.

  1. Use developer tools in Chrome (F12 when viewing a page).
  2. Choose the element selector in the top left corner of the developer tools window.
  3. Click the web part you want to target with your CSS code.
  4. You’ll see something like the image below.  The div id contains the number to add to the end of that string.

Jazz up Web Parts with CSS Styling

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
}

Hide “+ New Discussion” link on Discussion Board Web Part

Discussion Board Web Part

At this company I worked at, we had an anonymous suggestion box that was submitted through an honest broker. We wanted to disseminate the submissions to the company, and allow the managers/leadership to respond to them, but have a buffer between the live submissions (in the case that someone submitted a profanity-ridden rant about another employee, etc.)

The end result was that they wanted to utilize the discussion board to show the results, but didn’t want employees to be able to easily submit posts to the discussion board.

We basically needed to hide the “Start a new discussion” link on the discussion board webpart. Easy enough, right? Kind of… There are 5 views on the discussion board that you can navigate through, so you have to enter 5 different snips for each view to remove the link. Here’s how.

The element we need to hide is called  #forumX-NewPostLink — where X is the view you’re looking at, 0-4.  Set the display property to none, and you’re all set.

Want to hide it?

Drop this code in:

<style>
#forum0-NewPostLink{
display:none;
}
#forum1-NewPostLink{
display:none;
}
#forum2-NewPostLink{
display:none;
}
#forum3-NewPostLink{
display:none;
}
#forum4-NewPostLink{
display:none;
}
</style>

This article applies to other web parts too!  Play around with the “developer mode” of your favorite browser, find the ID of the element, and turn it off!

Promoted Links Webpart Modifications

Promoted Links Web Part Mods

One of the coolest web parts, that I find the most fun to work with and customize, is the Promoted Links web part in SharePoint.

There are a ton of elements within the promoted links, and this should cover most of them.

To see how the values affect the tile, in your browser (chrome is the one I use) open the developer toolpane, and use the element selector to click around on the tiles to see the ID of the elements that are in promoted links.  It’s really a ton of trial and error, but can make the promoted links look amazing. It’s one of my favorite web parts.

Body, keep big enough for the amount of tiles you want on a line. If your tiles are 150px by 150px, and you want 3 per row, set the width to 450(PLUS your padding set below– so like… 475px) and height to 150.   Check out this post on making the tiles be responsive to screen size — it deals with this specific snippet…

<style>
.ms-promlink-body {
height: 150px;
width: 475px;
}
</style>

This chunk is kind of self-explanatory: BG was larger than image by “right” class, this removes it:

<style> 
.ms-promlink-body img{
right:inherit!important;
}
</style>

This is the padding around the tiles. If your tile is 160×160 this will keep a 5px border around the tile. Keep this low to maintain the “Image map” look that I think you’re trying to achieve, but use it in some form, otherwise it’ll look like a blob of tiles on the page.

<style>
div.ms-tileview-tile-root {
height: 165px !important;
width: 165px !important;
}
</style>

This is the actual image canvas. Set this as the size of your image, and use the next section to stretch it to fit.

<style>
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox, div.ms-tileview-tile-content > a > div > span {
height: 160px !important;
width: 160px !important;
}
</style>

This is the image stretching section of the tile. Play with these values to get your image to fit correctly.

<style>
div.ms-tileview-tile-content > a > div > img {
max-width: 100%;
width: 100% !important;
}
</style>

Set this to the height of your tiles as you did above. Padding is important here as well.

<style>
ul.ms-tileview-tile-detailsListMedium {
height: 100px;
padding: 0;
}
</style>

I believe this is the text that is shown when the overlay is at the lowest point on the tile. Change these values and see what happens.

<style>
li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 16px;
}
 
div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
padding: 3px;
}
</style>

This section is the overlay, or the darker section that moves around when you mouse-over. Adjust this size to your tile size outlined above.

<style>
div.ms-tileview-tile-titleTextMediumCollapsed {
background: none repeat scroll 0 0 #002E4F;
font-size: 24px;
font-family: "Rockwell";
color: #0072C6;
line-height: 22px;
min-height: 96px;
min-width: 160px;
padding-left: 5px;
padding-top: 5px;
position: absolute;
top: 0px;
}
</style>

This section is the markup for the text within the link. Make sure you set this to make the descriptions look good, as the longer the text, the wonky-er it gets.

<style>
li.ms-tileview-tile-descriptionMedium {
font-size: 11px;
line-height: 24px;
padding: 3px;
}
</style>

This section turns the Arrows on or off. For responsive design purposes, I would keep this and maybe left justify it, or at least move around the webpart to make it look good, but retain the functionality you’re looking for.

<style>
.ms-promlink-header{ display:none; }
</style>