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>

4 Replies to “Promoted Links Webpart Modifications”

  1. Hello, thank you for posting this tutorial. I am trying to play around with the tile and font size of my promoted links on a sharepoint page. However, when I click save and go out of edit mode the changes never save. I assume it is because the underlying CSS cannot be overwritten but I am new to CSS so I’m wondering if you know why this may be.

    1. Try adding !Important *before* the semi-colon on the css properties. That may work, but they change the UI and things quite often. For example “.element { border-top: 5px !Important; }”

  2. If I have 4 tiles on two rows capable of holding 3 tiles on each row, is there a way to display the row 2 tile centered below tile position 2 of row 1?

  3. I’m trying to make the tiles larger rather than smaller, but when I do (about 200px square), the description text displays before being moused over. I’ve played around with all of the CSS and cannot figure out how to get the top of the description tab to be lower AND still slide up. I have made the top move down to the right spot using the “Top: #” element, but then the div doesn’t slide up. Has anyone figured out making them larger rather than just smaller?

Leave a Reply

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