Forum Discussion

Vanessa Martin's avatar
Vanessa Martin
Brass Contributor
Nov 19, 2017

Customizing promoted links style in SharePoint online classic page

Hi Folks,

I would like to use CSS to style my promoted links. I found the desired behavior at https://maartenboonen.wixsite.com/sharedsolutions/single-post/2015/09/24/How-to-make-the-Promoted-Links-app-fluffy-and-sexy, Example #1.

The desired results accomplished: tile size 200x200; title font size increased.

I am unable to get

  • the overlay background to either decrease in height or to not be visible.
  • the description to appear on hover
  • increase title font in hover
<style type="text/css">

/* Body, keep big enough for the amount of tiles you want on a row, width plus padding, and height */
.ms-promlink-body {
height: 200px;
width: 808px;
}

/* Distance between tiles, grid lines*/
div.ms-tileview-tile-root {
height: 202px !important;
width: 202px !important;
}

/* Image canvas, set this as the size of your image */ 
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox,  div.ms-tileview-tile-content > a > div > span {
height: 200px !important;
width: 200px !important;
}

/* This is the image stretching section of the tile. Play with these values to get your image to fit correctly.*/ 
div.ms-tileview-tile-content > a > div > img {
max-width: 100%;
width: 100% !important;
}

/* Set this to the height of your tiles as you did above. Padding is important here as well. */ 
ul.ms-tileview-tile-detailsListMedium {
height: 200px;
padding: 0;
}


/* EXPLAIN */ 
div.ms-tileview-tile-titleTextMediumExpanded, div.ms-tileview-tile-titleTextLargeCollapsed, div.ms-tileview-tile-titleTextLargeExpanded {
padding: 5px;
}

/* Text when overlay is at lowest point. */
div.ms-tileview-tile-titleTextMediumCollapsed {
background: none;
font-size: 16px;
line-height: 16px;
min-height: 20px;
min-width: 200px;
padding-left: 3px;
position: absolute;
top: 72px;
}

/* Markup for the text within the link. */ 
li.ms-tileview-tile-descriptionMedium {
font-size: 12px;
line-height: 14px;
padding: 5px;
}

/* Turns the Arrows on or off */ 
.ms-promlink-header{
display:none;
} 
</style>

Thanks for the help.

No RepliesBe the first to reply

Resources