Friday, 6 February 2015

Display Promoted Links Over Multiple Lines

How to get Promoted Links in Sharepoint 2013 to display over multiple lines, rather than having to scroll through them;

http://www.rbradbrook.co.uk/blog/2013/08/11/display-promoted-links-multiple-lines/

Thursday, 5 February 2015

Image Renditions In Sharepoint 2013

A useful resource explaining how to enable Image Renditions in Sharepoint 2013. I used this for resizing photographs for a contact list;

http://sharepoint.rackspace.com/how-to-change-image-size-and-shape-in-sharepoint

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.