Forum Discussion
Vanessa Martin
Nov 19, 2017Brass Contributor
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