1

I wanted to customize my promoted links. First of all I added this code to my SharePoint Website and changed the size of the tiles. After that I uploaded the graphics I want to show in my promoted link as background-image. I did this with Photoshop with the exact specification of the pixels. Then I add the graphics to the promoted links.

Problem: The position of the graphic is always moving to the left. I tried it with

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

but it does not work. I also tried with exact specification of the pixels. It does not work. I dont know why. Maybe some of your professionals can help me?:)

My current code:

<style type="text/css">
    div.ms-tileview-tile-content {
        background-color: grey; 
    } 
    .ms-promlink-body {
        width: 1170px;
    }  

    .ms-promlink-header
    {
                display: none;
    }

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

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

    /*Image*/
    .ms-tileview-tile-content img {text-align:center; width: 86px; height: 96px;}

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

    /*  title text when description not shown  */
    div.ms-tileview-tile-titleTextMediumCollapsed {
        /* background-color: rgba(0, 0, 0, 0.6); */

        width: 230px;
        height: 150px;
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 5px 5px 5px;
        font-size: 13px;
        line-height: 18px;
    }
</style>     

I would be grateful for any reply :)

0

Change

div.ms-tileview-tile-content > a > img {

to

div.ms-tileview-tile-content > a > div > img {

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.