SharePoint 2010 Branding – Part Four

In the last part of the series we were looking at getting our custom SharePoint MasterPage hooked up to SharePoint and making sure that it was selected as the working MasterPage.

Now we need to create our own CSS file and link that as well.

If we resume from where we left off then we should have SharePoint Designer open and the SharePoint site warmed up. Now if you take a look in the MasterPage there is a line that looks like this;

<!-- link to our custom css -->
<SharePoint:CssRegistration name="/Style Library/sitename/style.css" After="corev4.css" runat="server"/>

What this says is that there is a style sheet that is located at “/Style Library/sitename/style.css” now we know that to be false and there isn’t one located there at the moment and at this point you have two options, either create a style sheet with the same path and name or create your own with your own path and name.

My preferred option is to create my own located at “/Style Library/SharePoint365.css” Make your choice and make sure that you have changed line 75 to reflect this (see video).

Now this series isn’t just meant to be a walkthrough so we should talk about some of the ways in which we check things are working, the problem here is that although we have made our decision, we want to be sure that the style sheet is loaded and accessible to the MasterPage, if it isn’t then none of the following parts of the series will work.

How do we test our styles?

1. Firstly we have my favourite method – The aggressive method.
   This involves changing the body tag to a silly colour with the idea that it will become obvious that the style sheet is loaded if the colour has changed.The following code will achieve this method.

   Body{
   background-color:green;
   }
   

   Nothing wrong with that right? It seems fairly straight forward and you get a pretty much instant result give or take approval on your CSS.
   

2. Secondly, we have the simple method – The IE Developer Toolbar
   This little delight, brought to you by the same software house that brought you Microsoft Frontpage (shhhhhh), is wonderful and if you hit F12 in any IE7+ browser you will see it load and then click on the CSS tab and you will see if your custom CSS has loaded, now you do need some kind of style defined in the custom style sheet for it to be registered but it could be anything totally made up such as

   .testing
   {
   background-color:blue;
   }
   

   Although you could argue that you may as well try step a but we will skip over that

3. Lastly – Open the style sheet
   This is my least favourite method but probably the most simple method.
   If your style sheet is located in /Style Library/ you will find it by navigating to http://domain/Style Library/stylesheet.css
   If the style sheet downloads or offers to be downloaded then you know that it exists in that location.

Expecting more? Well don’t worry, I am prepping you up to design your own sites without getting into those sticky situations that I have been in by the end of the series these tips will seem a lot more useful than they appear.

For now, check back all this week for more in the series as SharePoint Saturday The Conference takes hold.

About Matthew Hughes

Matthew Hughes has written 56 post in this blog.

I am a SharePoint Developer for UK based Intelligent Decisioning Ltd. Check us out id-live.com I setup SharePoint 365 as I saw that there was a need for introductory blog posts and knew there were some fantastic authors out there who might not have time to run their own blogs and keep them updated reguarly.

• View all posts by Matthew Hughes →
• Blog
• Twitter
• Facebook
• Google+