Thursday, 5 February 2015

Change The Size Of Promoted Links In Sharepoint 2013

The Promoted Links in Sharepoint 2013 are fantastic but at 150x150 pixels are way to big for use. The following script reduces the size of the tiles to a more reasonable 100x100. Place it inside a Script Editor Web Part on the same page that your Promoted Links are displayed on;


 <style type="text/css" unselectable="on">
            div.ms-promlink-body {
                height: 100px;
            }

            div.ms-tileview-tile-root {
                height: 110px !important;
                width: 110px !important;
            }

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

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

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

            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;
            }

            div.ms-tileview-tile-titleTextMediumCollapsed {
                background: none repeat scroll 0 0 #002E4F;
                font-size: 12px;
                line-height: 16px;
                min-height: 36px;
                min-width: 97px;
                padding-left: 3px;
                position: absolute;
                top: -36px;
            }

            li.ms-tileview-tile-descriptionMedium {
                font-size: 11px;
                line-height: 14px;
                padding: 3px;
            }

 .ms-tileview-tile-content img{width:100px!important; height:100px!important;} 

</style>
The div.ms-tileview-tile-root value should be set to slightly more than the tile size so as to preserve a border.

No comments:

Post a Comment