none
Sharepoint 2013 Tile size CSS ? RRS feed

  • Question

  • Hello everybody,

    I want to change the tile size from the promoted links app, and I already tried to change to values in the corev15 CSS file in my SharePoint designer. But nothing works.

    The tiles are 150x150 but want it smaller for other computers that don't have a widescreen.

    Hopefully some of you can help me out!

    Kind Regards

    Malortje

    Thursday, September 26, 2013 1:15 PM

Answers

  • press F12 and check the class for detail box .Make some changes and adjust according to your requirement.

    hope this helps. :)


    Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

    • Marked as answer by JasonGuo Sunday, October 6, 2013 2:38 PM
    Friday, September 27, 2013 10:37 AM

All replies

  • The following should work - I set it in my custom css file; the root adjusts the space for each tile so keep it a little bigger to allow for space between each tile.  The !important is required to override the default set in core15.css

    /* adjust the size and spacing of tiles on promoted links */
    .ms-tileview-tile-root { height:60px !important; width:60px !important }
    .ms-tileview-tile-content { height:50px !important; width:50px !important }

    • Marked as answer by Malortje Friday, September 27, 2013 8:02 AM
    • Unmarked as answer by Malortje Friday, September 27, 2013 8:38 AM
    • Proposed as answer by will.owen Tuesday, October 15, 2013 3:18 PM
    Thursday, September 26, 2013 2:20 PM
  • That worked but now the detail box that comes up is messed up. Before the title was on the bottom of the tile buw now its under it. we've tried a couple of things to get the title of the tile back in the bottom of the image/tile but it doesnt seem to change position. Any ideas on that ?

    we've put the tile-content to both 100px height and width.

    Friday, September 27, 2013 8:37 AM
  • press F12 and check the class for detail box .Make some changes and adjust according to your requirement.

    hope this helps. :)


    Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

    • Marked as answer by JasonGuo Sunday, October 6, 2013 2:38 PM
    Friday, September 27, 2013 10:37 AM
  • Although you can change the size of the details box, you cannot change its initial top position, which is set in sp.ui.tileview.js. The top value is set to 2/3 of the original size value, and the original size is hard-coded as 150, in the SP.UI.PromotedLinks.PromotedLinksTileRenderer function, which results in a top value of 100.

    Peter DeBetta, Technology Strategist, http://sqlblog.com


    • Edited by debettap Wednesday, October 30, 2013 9:21 PM
    Wednesday, October 30, 2013 9:20 PM
  • Does that mean this can't be changed?
    Wednesday, November 6, 2013 4:16 PM
  • I managed to make it work via Javascript -

      function functionApp_Bar_Resize_Tiles()
      {
      for (var i=1; i<7; i++)
       {
       document.getElementById("Tile_WPQ2_" + i + "_1").style.width =  '180px';
       document.getElementById("Tile_WPQ2_" + i + "_2").style.width =  '180px';
       document.getElementById("Tile_WPQ2_" + i + "_4").style.width =  '180px';

       }

    };

    There were some other small tweaks made, but they were for coloring, positioning, etc.  The default classes that this overwrote were .ms-tileview-title-root (Tile_WPQ2_i_1), .ms-tileview-tile-content (Tile_WPQ2-i-2), and ms-tileview-tile-deailsBox (Tile_WPQ2_i_4).  Keep in mind the image usually defaults to 150x150 as well.  So if you were to convert the JS to CSS, my suggestion would be:

    .ms-tileview-title-root {

       Width: ??px;

       Height: ??px;

    }

    .ms-tileview-tile-content {

       Width: ??px;

       Height: ??px;

    }

    .ms-tileview-tile-content img {

       Width: ??px;

       Height: ??px;

    }

    ms-tileview-tile-deailsBox {

       Width: ??px;

       Height: ??px;

    }

    Monday, November 25, 2013 8:54 PM
  • Added note- the reason why I would suggest JS over CSS is if you needed the tiles to be more dynamic or wanted to use them on more than one page.  If you overwrite the class, then that class will carry over from page to page. 
    Monday, November 25, 2013 8:56 PM