Skip to content

How to Create Custom Styles for a Specific Page in SharePoint 2010 – Custom Home Page

by on August 30, 2011

So you want to have some custom layout/styles on specific landing pages in SharePoint, but you are not using publishing, so relying on Page Layouts for some fancy footwork is not an option. You also don’t want to have to maintain 15 customized landing pages. In my case, I am implementing a homepage design on each main site in the site collection which is different from the “internal” page designs.

Here’s a way to create a “master class” which will allow you to override all styling on the page.

Create a Page in Site Pages called “Home”

  1. Open SharePoint Designer and navigate to appropriate site
  2. Click on Site Pages > in the ribbon, select a web part page of your choiceimage
  3. Name it “home.aspx” or other name of your choice

Create a custom property in Site Pages Library

  1. Go to the site pages library in the browser or SP Designer
  2. Create a new column called “Page Class” in the library
  3. Now edit the properties of the page you created (you can click on “edit file properties in the browser from the page details in SPD)image
  4. In the “Page Class” field, enter the class name of your choice, in my case I am using “home” for the homepagesimage
  5. Click on Save

Edit the master page to pull in the class

  1. Go to SharePoint Designer
  2. Click on Master Pages
  3. Open your custom master page for edit (please create a copy of the original – v4.master – if you are just using SharePoint’s default master page – remember that the master page must be saved, published, and approved before it can be applied successfully)
    • NOTE: to set the master page to work on the pages in Site Pages library, right click on the master page in SPD and click on “Set As Default Master Page”. This will change all system created pages and web part pages to use this master page. “Custom master page” refers to publishing pages in the Pages library. One of the major failings I find in SP is the lack of ability to apply different master pages to specific pages and override these two global defaults. Hopefully this will be addressed in the future. Meanwhile, this workaround can help.
  4. Find the “Body” tag and change to something like the below
  5. <body scroll="no" onload="javascript:_spBodyOnLoadWrapper();" class=‘<SharePoint:ListItemProperty runat="server" id="ListItemProperty2" Property="Page_x0020_Class" />’>

    NOTE: Spaces and other special characters are replaced with their corresponding character code in SP – in this case the space becomes _x0020_

  6. Save the master page and make sure it is applied properly

Create your overriding classes

  1. Go to your custom stylesheet ( I strongly recommend creating one if you do not have one yet) or add/use a style section within your master page
  2. Create classes like the following to override styles on the pages which now use the “home” class
  3. .home #s4-workspace{
            background:#080808;
    }
    .home #s4-bodyContainer{
            background:#333333;
    }

By appending .home to SP styles or parent/child drilldown styles, you can now override nearly everything if you are good with 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

%d bloggers like this: