SharePoint Study Notes-site definition series-8. How to introduce master page in site definition (2. Introduction of CSS and other resources)

In the previous article, we talked about how to introduce the maste page in site definition. This is a necessary step, but it is definitely not enough, because it is impossible for us to deploy and use the master page without designing it. The appearance design must involve the introduction and use of CSS and other resources. Here we will continue with the above operations. In this article, we will look at how to introduce our CSS resources (of course, the methods for introducing IMG and other resources are the same as those for introducing CSS ).
Or Add a new module named mystylelibrary in the above project.

New projects include:

Rename sample.txtas mycustomcss.css and enter the following content:

Body {background-color: # e5e5e5; color: #444; font-family: segoe WP, segoe UI, verdana, Arial, Helvetica, sans-serif; font-size: 100%; line-Height: 1.125em;/* 16x1.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 ;}

. The 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> {
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 ,. 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;
}

Modify elements. XML in mystylelibrary as follows:

<? 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>

Here, we place the mycustomcss.css file in the style Library list of the newly created site.

Set the file type to ghostable. If we set it to ghostableinlibrary, the following error may occur:

Failed to instantiate file "mystylelibrary" from module "mystylelibrary": the specified list does not exist

After the project is deployed, you can view it through SP designer:

 

Specify the content of mycustomcss.css and its deployment location. Next, we need to operate our masterpage to achieve two tasks.

1、notice where to find our mycustomcss.css

2. Override the corev4.css of the system.

What we need to do is to find the following code in the mycustom. Master File

<SharePoint: csslink runat = "server" version = "4"/>

Add the following code below it:

<SharePoint: cssregistration name = "<% $ spurl :~ Sitecollection/Style Library/mycustom.css %> "after =" corev4.css "runat =" server "/>

The effect is as follows:

 

Here we use cssregistration: it enables csslink to read the registered CSS and insert it into the link element to call the external CSS definition.

For more information about the definition of the cssregistration class, see the cssregistration description.

After deployment, we can view the CSS effect introduced here by viewing the resource file on the deployed page, as shown in figure

 

From here, we can see that our mycustomcss.css has gone into the future in corev4.css, so as to cover the purpose of corev4.css.

Re-build and deploy the project. The effect is as follows: