Sharepoint學習筆記—Site Definition系列–8、如何在Site Definition中引入Master Page （2、Css等資源的引入）

    上一篇講了如何在Site Definition中引入Maste Page，作為實際操作這是必要的步驟，但僅僅這樣是肯定不夠的，因為我們不可能不對Master Page的外觀進行設計就部署並使用它了。而外觀的設計又必須要涉及到CSS等資源的引入與使用。這裡我們就繼續上面的操作，在本篇看看如何引入我們的CSS資源(當然，引入Img等資源的方法與引入CSS的方法相同)。
    還是在上述的項目中，新添加一個Module，命名為MyStyleLibrary

   新項目如：
 

把Sample.txt重新命名為MyCustomCss.css，並輸入內容如下:

body { background-color: #e5e5e5; color: #444; font-family: segoe wp,segoe ui,verdana,arial,helvetica,sans-serif;    font-size: 100%;  line-height: 1.125em; /* 16×1.125=18 http://spbuzz.it/why1125em   */  }
a, a:active, a:hover, a:link, a:visited { color: #1ba1e2; }

#s4-bodyContainer { overflow: auto; }
#s4-workspace { margin: 5px auto; padding: 0 10px; width: 1140px; }

/* make the body use its proper scrollbar again */
body { overflow: auto !important; }
body #s4-workspace { background-color: #fff; overflow: visible;  }

.s4-title { background: transparent none; display: inline; float: left; padding-left: 0px; margin-bottom: 16px; overflow:hidden;  width: auto; }   /** remove padding */

.s4-title h1 { display: block; font-size: 300%; line-height: 100%; margin: 10px auto; text-transform: lowercase; }
.s4-title h1 a { color: #1ba1e2;  }
.s4-title h1 a:hover {  text-decoration: none;}
.s4-title .s4-pagedescription { font-size: 80%; }

.info { float: right; display: block;}
.info li { display: inline; }

/** Top Navigation */

body #s4-topheader2 { background: transparent none;  font-size:small; height:25px; border: 0px; display: inline; float: right; padding-top: 16px; width: auto;}
.s4-toplinks  { display: inline; float: left;  }
.s4-toplinks .s4-tn A.selected { background: transparent none; border: 0px;  font-weight: bold;  margin: 0px;  padding: 5px 10px; }
.s4-tn LI.static > .menu-item {  height: auto;   }
.s4-toplinks .s4-tn A:hover {  height: auto;  text-decoration: none; }

.s4-searcharea {  display: inline; float: right; margin-top: 16px; }
.s4-search input.ms-sbplain { background: transparent none;  font-size: 80%; }
.s4-search .srch-gosearchimg  { background: transparent none; }

/** Quick launch */

BODY #s4-leftpanel-content {
     border: 0px;
}
.s4-ql A.selected { background: #1ba1e2 none; background-position-x: left; background-position-y: bottom; border: 0px; color: #fff !important;  padding-bottom: 5px; padding-left: 15px; padding-right: 15px; }
.menu .menu-item .additional-background {     margin-bottom: 5px; }

BODY #s4-leftpanel {
     width: 100%;
}

.s4-ql {
    margin: 0px;
}

.s4-ql UL.root > LI > .menu-item, .s4-ql UL.root UL > LI > A {
     padding-left: 15px; padding-right: 15px; color: #1ba1e2; font-size: 1.25em;
}

.s4-ca {
        margin-left: 0px; 
}

.s4-ca H2 {
    font-size: 1.3em;
    margin-top: 10px;
}

.s4-ca H1 {
    font-size: 1.4em;
    margin: 5px 0px 5px 0px;

}
.ms-rte-layoutszone-inner { padding: 0px; }
.ms-WPHeader { background-color: #1ba1e2; margin-bottom: 5px; }
.ms-WPTitle, .ms-WPTitle A, .ms-WPTitle A:visited, .ms-WPTitle A:hover {     font-size: 1.25em; color: #fff; text-transform: uppercase;  font-weight: bold; }

TD.ms-addnew {
    padding: 5px 0px 5px 0px; text-transform: uppercase;
}
.ms-partline {
    padding-bottom: 5px;
}
A.ms-addnew { padding: 5px;  background-color: #ccc; color: #333;  }

.s4-recentchanges {
    display: none;
}

.ms-v4propertysheetspacing {
    margin-left: 0px;
}

.login {
    background: #1ba0e1;
}

然後修改MyStyleLibrary下的Elements.xml內容如下

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Module Name="MyStyleLibrary"  Url="Style Library" RootWebOnly="FALSE">

        <File Path="MyStyleLibrary\MyCustomCss.css"
              Url="MyCustomCss.css"
             Type="Ghostable" />
    </Module>
</Elements>

   這裡我們把MyCustomCss.css檔案放置到新建立Site的Style Library列表中

   並且把File的Type設定為Ghostable,如果我們設定為GhostableInLibrary則可能會出現如下報錯:

Failed to instantiate file "MyStyleLibrary" from module "MyStyleLibrary": The specified list does not exist 

    本項目部署後可以通過SP Designer查看到:

  

 

指定了MyCustomCss.css的內容並指定了它的部署位置，接下來，我們需要操作我們的MasterPage來達成兩個任務

 1、通知它上哪兒去找我們的MyCustomCss.css

 2、覆蓋系統預設的CoreV4.css

我們需要作的就是在我們的MyCustom.master檔案內容中找到如下代碼

<SharePoint:CssLink runat="server" Version="4"/>

在它的下面加入如下代碼   

<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/MyCustom.css %>" After="corev4.css"  runat="server"/>

 效果如下:

 

 這裡我們使用到了CssRegistration: 它的作用就是讓CssLink讀取此處註冊的Css然後插入到Link元素中以達到調用外部CSS定義的目的。

 關於CssRegistration類的定義，請參考CssRegistration說明

 我們可以在部署後可以查看此處引入的Css效果，方法是在部署後的頁面上查看資源檔，如

 

 從中我們可以看到我們的MyCustomCss.css在CoreV4.css後進行了載入，所以達到了覆蓋CoreV4.css的目的。

重新Build並部署項目，效果如: