none
Tile Image Not Centered in the Tile

    Frage

  • I am pretty new to SharePoint. I was able to make my tiles smaller. But the images did not shrink/get smaller. Below is the code I copied from various Google finds and am using. My tile is 100px x 100px correct? I made an 'M' in a 100px x 100px PowerPoint slide with a pink background. The background fills the slide, but the 'M' is off center.

    How should I create my images? How should my code be modified and enhanced? Thank you for your help.

    I cannot include a screenshot of my tiles because my account is not verified.

    <style>
    /*display rows of 3 items*/
    .ms-promlink-body {
          width: 720px;
    }
    </style>

     <style>
    /*hide the arrows when you have more items than viewable*/
    .ms-promlink-header{
    display:none;
    }
    </style>

    /*------------ CUSTOMIZE PROMOTED LINKS ------------*/
    <style type="text/css">
    /* The height of the Promoted Link Webpart */
    .ms-promlink-body {
         height: 100px;
    }

    /*  Tile and border size. Delta between ms-tileview-tile-root and size of the promoted link tiles is the space between tiles  */
    .ms-tileview-tile-root {
         width: 120px! important;
         height: 120px !important;
    }

    /*  size of the promoted link tiles */
    .ms-tileview-tile-content, .ms-tileview-tile-detailsBox {
         width: 100px !important;
         height: 100px !important;
    }

    /*  size of the image within the promoted link tile */
    .ms-tileview-tile-content > a > img {
         width: 100% !important;
         height: 100% !important;
    }

    /* Changes the Promoted Link Title when you hover over it*/
    .ms-tileview-tile-detailsListMedium {
         font-weight: bold;
         height: 100px;
         padding: 4px 7px 7px;
         font-size: 12px;
         line-height: 14px;
    }

    /* Changes the Promoted Link Description when you hover over it*/
    .ms-tileview-tile-descriptionMedium {
         font-weight: normal;
         padding-top: 10px;
         font-size: 11px;
         /*  If you want to change the font size, change above */
    }

    /*  Remove this if you only what to show the images and not the text */
    /*  Adjust the text in the Collapsed Promoted Link */
    .ms-tileview-tile-titleTextMediumCollapsed {
         font-weight: normal;
         background-color: rgba(0, 0, 0, 0.6);
         width: 100px;
         height: 40px;
         ;
         top: -20px;
         left: 0px;
         text-align: center;
         vertical-align: middle;
         font-size: 11px;
         /*  If you want to change the font size, change above */
         line-height: 20px;
         word-wrap: break-word;
    }

    </style>


    • Bearbeitet TFoutris Dienstag, 15. Mai 2018 14:03
    Montag, 14. Mai 2018 20:18

Alle Antworten

  • Hi,

    Does the "M" present inside your pink background?

    If yes, you need to edit your background picture. Using some third-party tool to change the location of "M" in your picture .Code cannot change the location of contents inside a picture.

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Dienstag, 15. Mai 2018 07:24
  • Thank you for your response.

    Yes the M, as all the images partially show up in the lower right quadrant of the tile. I will go back to PowerPoint and adjust the M within the square. Will update.

    Dienstag, 15. Mai 2018 14:05
  • Hi,

    How are things going?

    If you think my suggestion is helpful, you could mark it as an answer.

    Best regards,

    Allen Bai


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.


    Freitag, 18. Mai 2018 02:15
  • Hi,

    Is there any update on your issue?

    If you think it is helpful, you could mark it as an answer. It will help others who meet the similar question in this forum.

    Best regards,

    Allen


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Donnerstag, 31. Mai 2018 03:26