SharePoint 2013 Master Page and CSS control

Site Pages => Content store in Content Database, Template store in WFE file system

Application Pages => File System /_layouts

v4.master serves as master page for 2010 UI mode

seattle.master serves as default master page in 2013 (Primary in Team Site)

mysite15.master –> My Site 2013

Site Pages and Moduls

  • Site pages and related resources added with Modules
  • Site pages don’t accept in-line code (SafeControl only)
  • Feature activation create instances from the templates
  • Site pages initially in uncustomized state (ghosted)
  • <%@ Page MasterPageFile=”~masterurl/default.master” %> this token in Site pages will be replaced with the value of SPWeb.MasterPageUrl property (a selected master page in MPG for current site).
  • PlaceHolderAdditionalPageHead: the last placeholder shows up inside of <head> of the page
  • PlaceHolderPageTitle: define what shows in the browser window (search engine title)
  • PlaceHolderPageTitleInTitleArea: shows title in the page itself
  • PlaceHolderMain: for contents

Although it has always been possible to include the standard HTML <link> attribute to include CSS style sheets in Master Pages, the CssLinkCssRegistration and Theme controls provide special functionality, and continue to be the recommended approach for inserting stylesheet links into your design. Here is a brief overview of what each of these controls does:

  • The <SharePoint:CssLink> control is responsible for injecting the default core styles used by SharePoint, and any custom style sheets that are registered using the CssRegistration control.
  • The <SharePoint:CssRegistration> control allows registration of any custom CSS style sheets. The links are actually rendered into the page using the CssLink control.
    1. This control registers the CSS files with SharePoint and once it is time to render the page it only renders one link tag for each, even though you might have registered the same CSS file multiple times. It is the CssLink control that is responsible for the actual rendering and this control is normally placed in your master page.
      The new implementation of the CssRegistration have a number of new features. First of all you can specify the order using the After property. The After property contains the name of the CSS that you want to place the CSS after.
      Registering two CSS files like this: CssRegistration
      Adding the After property to the controls like this, so that out myCss2 is rendered after corev4 and myCss aftermyCss2CssRegistration and After
      would yield this order:
      1. wiki.css
      2. corev4.css
      3. myCss2.css
      4. myCss.css
      Pretty smooth!
    2. Another useful new feature of the CssRegistration is that you can add Conditional-CSS expressions so that you can target the CSS files to different browsers.CssRegistration and ConditionalExpression
      By adding the ConditionalExpression parameter to the control we tell the CssLink to render the Conditional-CSS code as well as the CSS link. The result of the registration above is:Conditional Expression
    3. The CssRegistration control also has a parameter called EnableCssTheming that allows your CSS to be themed. You need to specify the Name attribute, which is the name of your CSS file. The EnableCssTheming attribute is not necessary since the default value is true. If it's set to false the CSS in the Styles folder will always be used. If you leave it out or set it to true and provide no CSS in the Themable folder then your CSS will not be loaded.
  • The <SharePoint:Theme> control checks if a theme has been applied to the current site, and is responsible for rendering links to the Theme stylesheets. NOTE: This control seems to continue to be included in SharePoint 2010 Master Pages for legacy support. It no longer seems to be necessary for supporting or enabling SharePoint 2010 themes.n

MySite Master Page:

The Ribbon control row is hidden by default on mysite15.master which is different to seattle.master.

<div id=”mysite-ribbonrow”> …. </div>

To make the behaviour consistent, remove the mysite-ribbonrow element, and the ribbon row will always show.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s