Starting a SharePoint 2010 Branding Project: Using v4.master as base

There are several ways that you can pursue a branding project with SharePoint 2010. You can use one of the new themes, override existing styles with a new css file, alter an existing masterpage, or go completely custom. For this series of posts I will share how I go about altering an existing masterpage and styles.

Make a copy of the v4.master
Open the v4.master in Designer and do a save as. Save the new file as something different, such as custom.master, and then open it in Designer. Make sure the file is checked out before you start editing it.

Create a custom css file
Create a new css file and save it to a location that makes sense to you. You can save it to the Styles library, or on the server in the 14 hive, or anywhere that is accessible.

Create a changes.txt file
Use this file to record changes made to the masterpage as well as to paste in any controls that have been removed from the masterpage.

Link to the new css file in your copy of the masterpage:
Paste the following code into the HEAD of the masterpage and change the link to refer to your custom css file:

<!-- custom css -->
<SharePoint:CssRegistration name="http://spimages.stei.com/sp2010/styles_senet03.css" After="corev4.css" runat="server"/>

This code assures that your custom styles will always be able to override the corev4 styles.

Apply your custom masterpage to a site

Right-click on the new masterpage and select Set as Default Masterpage. You will only be able to preview fully your masterpage changes if the custom masterpage is applied to a site. Make sure that after each change you save the masterpage, check it in and then approve it. Make sure to check the file out before editing it again.

Now you can start altering the masterpage and overriding the css.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s