使用CSS 客戶化 SharePoint 2013 中的 promoted links 樣式

本文講述如何使用CSS客戶化客戶化 SharePoint 2013 中的 promoted links 樣式。

promoted links 是SharePoint 中提供的一個圖片鏈接的展示的 App，原始效果 如下：

     當鼠標 hover 到某個標題(Training sytem)上時：

    

但是實際開發 過程中總會對佈局和樣式做一些客戶 化，比如 將四個鏈接 分爲 兩行 顯示，第一圖片個寬 100px, 第二個寬 200px，第三個圖片寬200px,第四個圖片 寬 100px, 標題部分的 背景色 改爲紫色 ：

下面分享做到以上 效果的 CSS代碼

            div.ms-promlink-body {
               height: 200px;
                width: 400px;
            }

            div.ms-tileview-tile-root:nth-of-type(3) {
                height: 150px !important;
                width: 200px !important;
                 margin:10px;
            }

              div.ms-tileview-tile-root:nth-of-type(3) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(3) img
                {
                      height: 150px !important;
                      width: 200px !important;
                      left:0px;
                      right:0px;
                }

                div.ms-tileview-tile-root:nth-of-type(3) div.ms-tileview-tile-detailsBox
                {
                    width: 200px !important;
                }  

            div.ms-tileview-tile-root:nth-of-type(1) {
                height: 150px !important;
                width: 100px !important;
                margin:10px;
            }

                div.ms-tileview-tile-root:nth-of-type(1) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(1) img
                {
                      height: 150px !important;
                      width: 100px !important;
                      left:0px;
                      right:0px;
                }

                 div.ms-tileview-tile-root:nth-of-type(1) div.ms-tileview-tile-detailsBox
                {
                     width: 100px !important;
                }


            div.ms-tileview-tile-root:nth-of-type(2) {
                height: 150px !important;
                width: 200px !important;
                margin:10px;
            }

             div.ms-tileview-tile-root:nth-of-type(2) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(2) img
                {
                      height: 150px !important;
                      width: 200px !important;
                      left:0px;  
                      right:0px;
                }

                 div.ms-tileview-tile-root:nth-of-type(2) div.ms-tileview-tile-detailsBox
                {
                    width: 200px !important;
                }


            div.ms-tileview-tile-root:nth-of-type(4) {
                height: 150px !important;
                width: 100px !important;
                 margin:10px;
            }

              div.ms-tileview-tile-root:nth-of-type(4) div.ms-tileview-tile-content,  div.ms-tileview-tile-root:nth-of-type(4) img
                {
                      height: 150px !important;
                      width: 100px !important;
                      left:0px;
                      right:0px;
                }

               div.ms-tileview-tile-root:nth-of-type(4) div.ms-tileview-tile-detailsBox
                {
                     width: 100px !important;
                }

.ms-tileview-tile-detailsBox
{
    background-color:#7a44a2;
    font-weight:600;
    font-size:16px;
}