SPS 2003 to MOSS Migration – Applying the same CSS

Article
06/03/2009

Many think that just to get same look and feel for any migrated site, we can directly modify Out of the box style sheet pages to get it done. But, it’s not recommended to modify any Out of the box files in SharePoint. We need to use custom css file to achieve this task.

1. Create custom css file and place it under layouts/1033/styles folder.

2. In MOSS, Out of the box css file core.css is the important file that contains almost all branding for the sites.

3. So go through the Core.css file and you should be able to find most of the branding works in that file ( menu, web parts,etc..)

4. In the custom.css file, override the css that you want to. Only add classes and elements into the custom CSS that you are using to override the default. For e.g. if we want to change the font of web part title, just have only font-size property.

.ms-WPTitle

{

Font-weight:bold;

Color:#4c4c4c;

Padding-left:3px;

Padding-right:2px;

Padding-top:2px;

Padding-bottom:2px;

Font-size:10pt;
}

Have only this elements in the custom css file.

.ms-WPTitle

{

Font-size:20pt;
}

5. Now, in the default.master page (that uses Core.css), we need to point it to custom.css file. For this, we can specify the custom CSS file in the Master Page settings (Site Actions/Site Settings/Master Page). In this case, the custom CSS file will get pulled after CORE.CSS. Also the custom CSS overrides and new styles will also be applied to _layouts pages.

6. This approach works only for site level. We need to go to each site and make this changes. We don’t want to make changes in each of the sites but rather we want to apply custom css throughout the web application level. This can be achieved by adding custom css url tag in the default.master page ( like <link rel="stylesheet" type="text/css" href="https://blogs.msdn.com/_layouts/1033/styles/custom.css"/> )

7. Rather than modifying the default.master page, we can have custom master page and add the link tag.

8. Create a copy of default.master page and rename to custom.master page and place it under same location. In the custom.master page, add the following line just below <Sharepoint:CssLink> tag.

9. Now, we have custom master page using custom css file. To use this, we need to point our sharepoint site to the custom master page. The changes can be done in ONET.xml file ( located under site templates folder). In the ONET.xml file, we need to add custom.master page in the module section and set default master page to custom master page.

Adding Custom master page URL in the module.

Setting default master page to custom master page.

As modifying out of the box ONET.xml file is not supported, we need to create custom site definition. Creating Custom Site Definition https://msdn.microsoft.com/en-us/library/ms454677.aspx In that custom site definition, you will find ONET.xml file and make the above mentioned changes in that file.

10. For creating any sites, use this custom site definition as a template and create. With this, the default master page for the site will be our custom master page which will have custom css file in it.

Please note that we can also customize the default master page using SharePoint Designer. For this approach, we need to follow till step 6. In step 6, add custom css url using sharepoint designer and it should also work fine as expected. Only if we don’t want to make changes on default master page, we need to use custom master page and custom site definition.

SPS 2003 to MOSS Migration – Applying the same CSS

Additional resources