18

enter image description here

Hello,

I create an app using the Promoted Links in Sharepoint 2013. I chose to do this because the feature has the awesome hover effect and is easy to customize the image.

The issue is that I have been trying to figure out how to change the tile sizes. They are awesome the way they are, however I just need them smaller. I still want the hover effect as well and for the text to match the same ratio as the tile. I have tried web zones, I have done each ID but with no luck. I have attached a sample image of the tiles I'm referring to. Please help.

  • Thats what I thought too, but no luck. Theres are the classes and IDs that I used: code/ .ms-tileview-title-root{ Width: 50px; Height: 50px; } .ms-tileview-tile-content{ Width: 50px; Height: 50px; } .ms-tileview-tile-content img{ Width: 50px; Height: 50px; } .ms-tileview-tile-deailsBox{ width:50px; height:50px; } .ms-promlink-body{ width:50px; height:50px; } #promotedlinksbody_WPQ8{ width:50px; height:50px; }/code – Question-Everything Jan 6 '14 at 18:01
  • I can't give you a complete solution but you are on the right track with this. Keep going and you'll get there. Unfortunately SharePoint's CSS is notoriously difficult to work with. When you do come to a solution make sure to test the hell out it with different browsers. – Derek Gusoff Jan 6 '14 at 18:16
  • 1
    perfect its working fine after including this code in CSS file. But, image size in not reducing according to the tile size. It should decrease actually. What to write there to decrease the image size same as the tile size. Thanks.. – user24199 Mar 6 '14 at 13:37
21

For a CSS-only approach, add the following CSS inside a Content Editor web part or add it to your custom CSS. Remove the <style> tag as necessary.

<style type="text/css">

  /*  tile row height */
  div.ms-promlink-body {
    height: 100px;
  }

  /*  tile dimensions, including inter-tile margin */
  div.ms-tileview-tile-root {
    width: 110px !important;
    height: 110px !important;
  }

  /*  tile and title( + description) overlay dimensions */
  div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 100px !important;
    height: 100px !important;
  }

  /*  tile background image dimensions */
  div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
  }

  /*  title and description text  */
  ul.ms-tileview-tile-detailsListMedium {
    height: 100px;
    padding: 4px 7px 7px;
    font-size: 11px;
    line-height: 14px;
  }

  /*  description text class  */
  li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 11px;
  }

  /*  title text when description not shown  */
  div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 86px;
    height: 29px;
    position: absolute;
    top: -33px;
    left: 0px;
    padding: 4px 7px 0px;
    font-size: 11px;
    line-height: 13px;
  }

</style>

The code is for a tile size of 100x100. For your own images, the above code should do the trick. For the OOTB SharePoint images (the images that you get with the default tile set ("Share your site", "Working on a deadline?", etc.)), you'll have to make further changes.

  • 1
    THANK YOU SO MUCH! This did it! In relation to my own images I added code/ .ms-tileview-tile-content img{width:100px!important; height:100px!important;} /code Other than that, it works! I didn't bother with the positioning of the sprite images (because I'm confidient we won't be using them, but you never know) but will look into them much later. Again, thank you! – Question-Everything Jan 6 '14 at 20:05
  • This add will be old but to keep the title transparency, set the background property of "div.ms-tileview-tile-titleTextMediumCollapsed" to "background: none repeat scroll 0 0 rgba(0, 0, 0, 0.50);". When i tried the above code all was working great, expect that the tiles were not transparent anymore. :) – Christoffer May 18 '15 at 11:33
  • Unfortunately doesn't work as smoothly as the original one. Hovering on tile makes the sliding text start from bottom. When sliding down, there is 1 px missing from left side. – Jussi Palo Nov 9 '15 at 9:10
  • EDIT: Updated with relative dimensions, tweaks from comments, and so on. – skia.heliou Nov 24 '15 at 17:23
  • Thank you so much, i managed to work for 200 x 200 px. Now since my images are with background transparent, i still see the default light blue background. Is there an easy way to include it the script to change the color ? Thanks – Viral Jul 18 '17 at 4:35
2

Overview

This answer regards the issues with a CSS-only solution, and then provides a static solution for 125x125px-sized tiles, and a dynamic solution using SASS/SCSS for solutions in the 100x100px to 150x150px tile size range, exclusive.

Issues

CSS-only solutions are difficult with SharePoint tiles. The div.ms-tileview-tile-detailsBox object always resets its top style to 100px on mouseout, and because of this:

  • The title text cannot be bottom-aligned when at rest, because...
  • div.ms-tileview-tile-titleTextMediumCollapsed needs to be rigged to show the title text at rest (as shown by @Aveenav).
  • For tile sizes in the 100x100px to 150x150px range exclusive, additional rigging is needed to hide div.ms-tileview-tile-detailsBox.
  • The 100x100px tile size is a special case.

Lastly, these solutions will not work for the default SharePoint tile lists, such as those seen when you build a new (sub)site.

Solution for 125x125

I've determined the necessary CSS rigging for 125x125px, as shown below (tested on Firefox 42, Chrome 46, IE 11).

/*  --------------------------------------------------------------------------------
     SharePoint Tile Resizer
    --------------------------------------------------------------------------------
     This solution found at: https://sharepoint.stackexchange.com/a/163178/43827
    -------------------------------------------------------------------------------- */

/*  tile row height */
div.ms-promlink-body {
    height: 125px;
}

/*  tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
    width: 134px !important;
    height: 134px !important;
}

/*  tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: 125px !important;
    height: 125px !important;
}

/*  renders detailsBox effectively invisible at rest, and ensures that it returns to invisible after a short delay on mouseout  */
div.ms-tileview-tile-detailsBox {
    background-color: transparent;
    transition: background-color 0s linear 0.3s;
}

/*  restores the detailsBox overlay color on mousein    */
div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox {
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 0s linear 0s;
}

/*  tile background image dimensions */
div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
}

/*  title and description text  */
ul.ms-tileview-tile-detailsListMedium {
    height: 125px;
    padding: 5px 8px 8px;
    font-size: 14px;
    line-height: 18px;
}

/*  description text class  */
li.ms-tileview-tile-descriptionMedium {
    padding-top: 13px;
    font-size: 14px;
}

/*  title text when description not shown   */
div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 109px;
    height: 37px;
    position: absolute;
    top: -16px;
    left: 0px;
    padding: 5px 8px 0px;
    font-size: 14px;
    line-height: 17px;
}

Some style value changes were needed compared to the 100x100px, but in particular notice the additional background-color and transition styles set in the div.ms-tileview-tile-detailsBox and the div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox rules.

SASS/SCSS Solution (100px to 150px)

The following solution has been tested on Firefox 42, Chrome 46, and IE 11 in multiple sizes between 100 and 150px exclusive (tiles default to 150px, and there is a solution for 100px in @Aveenav's answer). Mind the "Using this SCSS" section and then compile with your favorite SASS editor or at http://sassmeister.com/

// -----------------------------------------------------------------------------------
// Using this SCSS:
// • Change the $desired-tile-size value ("REQUIRED").
// • Optionally, look for "OPTIONALLY" in this document and tweak values as desired.
// • Compile with your favorite SASS editor or at http://sassmeister.com/
// -----------------------------------------------------------------------------------

// ===== Variables -------------------------

// REQUIRED: Change the following line to the desired tile size and compile.
// REQUIRED: Be sure to retain the unit "px", such as: $desired-tile-size: 125px;
$desired-tile-size: 125px;

$tile-spacing: round($desired-tile-size * 0.07);
// OPTIONAL: For non-size-relative spacing, set the following instead of the above:
//$tile-spacing: 10px;
$tile-with-margin: $desired-tile-size + $tile-spacing;

$top-padding: round($desired-tile-size / 25);
$other-padding: round($desired-tile-size / 15);

$font-size: round($desired-tile-size * 0.11);
// OPTIONAL: Alternatively, set the multiplier to one of the following instead of the above:
//$font-size: round($desired-tile-size * 0.087);
//$font-size: round($desired-tile-size * 0.133);
$title-line-height: round($font-size * 1.18);
$description-line-height: round($font-size * 1.27);

$overlay-height: round($desired-tile-size / 3);
$title-height: $overlay-height - $top-padding;
$title-position: $overlay-height - if($desired-tile-size >= 100, round(120px - $desired-tile-size / 2), 0px);
$title-width: $desired-tile-size - $other-padding * 2;

$title-description-spacing: round($desired-tile-size / 10);

// ===== CSS ----- ----- ----- ----- ----- 
/* --------------------------------------------------------------------------------
        SharePoint Tile Resizer
     --------------------------------------------------------------------------------
        This solution found at: https://sharepoint.stackexchange.com/a/163178/43827
     -------------------------------------------------------------------------------- */

/*  tile row height */ 
div.ms-promlink-body {
    height: $desired-tile-size;
}

/*  tile dimensions, including inter-tile margin */
div.ms-tileview-tile-root {
    width: $tile-with-margin !important;
    height: $tile-with-margin !important; 
}

/*  tile and title( + description) overlay dimensions */
div.ms-tileview-tile-content, div.ms-tileview-tile-detailsBox {
    width: $desired-tile-size !important;
    height: $desired-tile-size !important;
}

// add the transparency and transition delay functionality for tile sizes > 100x100px
@if $desired-tile-size > 100px {
/*  renders detailsBox effectively invisible at rest, and ensures that it returns to invisible after a short delay on mouseout  */
div.ms-tileview-tile-detailsBox {
    background-color: transparent;
    transition: background-color 0s linear 0.3s;
}
}

// add the transparency and transition delay functionality for tile sizes > 100x100px
@if $desired-tile-size > 100px {
/*  restores the detailsBox overlay color on mousein    */
div.ms-tileview-tile-content:hover > a > div.ms-tileview-tile-detailsBox {
    background-color: rgba(0, 0, 0, 0.6);
    transition: background-color 0s linear 0s;
}
}

/*  tile background image dimensions */
div.ms-tileview-tile-content > a > img {
    width: 100% !important;
    height: 100% !important;
}

/*  title and description text  */
ul.ms-tileview-tile-detailsListMedium {
    height: $desired-tile-size;
    padding: $top-padding $other-padding $other-padding;
    font-size: $font-size;
    line-height: $description-line-height;
}

/*  description text class  */
li.ms-tileview-tile-descriptionMedium {
    padding-top: $title-description-spacing;
    font-size: $font-size;
}

/*  title text when description not shown   */
div.ms-tileview-tile-titleTextMediumCollapsed {
    background-color: rgba(0,0,0,0.6);
    width: $title-width;
    height: $title-height;
    position: absolute;
    top: $title-position;
    left: 0px;
    padding: $top-padding $other-padding 0px; 
    font-size: $font-size; 
    line-height: $title-line-height;
}

I may update with a SASS solution for/including tile sizes over 150x150px at some point in the future.

References

0

check this post to change the tile size. "press F12 and check the class for detail box .Make some changes and adjust according to your requirement." http://social.msdn.microsoft.com/Forums/vstudio/en-US/ab960b52-8013-469a-8fd5-05a7230e6337/sharepoint-2013-tile-size-css-?forum=sharepointgeneral

  • I saw that forum before I posted my question. It helped, but not much. – Question-Everything Jan 6 '14 at 23:01
0

I also used the CSS solution mentioned above. But if you use the CSS Code without customizing it will also resize your picture gallery thumbnails.

To make sure only promoted links are customized use this code:

/*------------ CUSTOMIZE PROMOTED LINKS ------------*/

  /*  tile row height */
  div.ms-promlink-body {
    height: 100px;
  }

  /*  tile dimensions, including inter-tile margin */
 div.ms-promlink-body > div.ms-tileview-tile-root {
    width: 110px !important;
    height: 110px !important;
  }

  /*  tile and title( + description) overlay dimensions */
  div.ms-promlink-body > div.ms-tileview-tile-root > div.ms-tileview-tile-content {
    width: 100px !important;
    height: 100px !important;
  }

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


  /*  tile background image dimensions */
  div.ms-promlink-body > div.ms-tileview-tile-root > div.ms-tileview-tile-content > a > img {
   height: 100% !important;
    width: 100% !important; 
  }


  /*  title and description text  */
  div.ms-promlink-body > div.ms-tileview-tile-root > div.ms-tileview-tile-content > a > div.ms-tileview-tile-detailsBox > ul.ms-tileview-tile-detailsListMedium {
    height: 100px;
    padding: 4px 7px 7px;
    font-size: 11px;
    line-height: 14px;
  }

  /*  description text class  */
  div.ms-promlink-body > div.ms-tileview-tile-root > div.ms-tileview-tile-content > a > div.ms-tileview-tile-detailsBox > ul.ms-tileview-tile-detailsListMedium > li.ms-tileview-tile-descriptionMedium {
    padding-top: 10px;
    font-size: 11px;
  }

  /*  title text when description not shown  */
  div.ms-promlink-body > div.ms-tileview-tile-root > div.ms-tileview-tile-content > a > div.ms-tileview-tile-detailsBox > ul.ms-tileview-tile-detailsListMedium > li.ms-tileview-tile-titleMediumCollapsed {
    background-color: rgba(0, 0, 0, 0.6);
    width: 86px;
    height: 29px;
    position: absolute;
    top: -33px ;
    left: 0px;
    padding: 4px 7px 0px;
    font-size: 11px;
    line-height: 13px;
  }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.