How to add master page with styles and images in site definition

There is often a requirement to add customized master page (with images and css) while creating a site definition. Here I’m going to explain “How to add these items while creating a site definition”.

As you can see in the following image, under “12->SiteTemplates->NACBAChapterSite” folder there is one master page “Chapter.master” that will be used while creating a site using this template. Supporting images and css files are placed under “styles” and “images” folders.Now, our goal is to put these files in master page gallery when the site is created using this template. To achieve this, do the following in “onet.xml” file (see above solution structure image).

Below image shows the structure of my Visual Studio solution structure

  • Add the following entry under “node
<listtemplates>

<listtemplate Name="mplib" DisplayName="$Resources:MasterPageGallery;" Description="$Resources:global_onet_mplib_desc;" SetupPath="globallistsmplib" Type="116" BaseType="1" Path="GLOBAL" Hidden="TRUE" HiddenList="TRUE" NoCrawl="TRUE" Unique="TRUE" Catalog="TRUE" OnQuickLaunch="FALSE" SecurityBits="11" AllowDeletion="FALSE" AllowEveryoneViewItems="TRUE" Image="/_layouts/images/itdl.gif" AlwaysIncludeContent="TRUE" DocumentTemplate="100" />

</listtemplates>
  • Add following entry in thenode
<modules>
<module Name="MasterPage" />
<module Name="Images" />
<module Name="Css" />
</modules>
Here first module entry is to locate master page, second one is to locate different images and the third one is used to add CSS files.

 

  • This step actually adds the files to the master page gallery. Add the following entry under “” to add chapter.master to the master page gallery
<module Name="MasterPage" List="116" Url="_catalogs/masterpage" RootWebOnly="FALSE">

<file Url="Chapter.master" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

</module> Here "Name=MasterPage" refers to the module entry created in step 2. Similarly to add css add the following entry under "<project><modules>"

<module Name="Css" List="116" Url="_catalogs/masterpage/styles" Path="styles" RootWebOnly="FALSE">

<file Url="color_layout1_blue.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<file Url="color_layout1_green.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<file Url="color_layout1_orange.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<file Url="color_layout1_purple.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<file Url="color_layout1_red.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<file Url="template_layout1.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

</module></modules></project>

Same you need to do for the images.

Once done with the above steps, you need to deploy the solution. You can do this with WSPBuilder or MSBuild. Deployment is not in the scope of this article.

Related Posts

Leave a reply