SharePoint 2010 presents a few branding challenges with the introduction of the “ribbon” into the Master Page. However, while the ribbon adds a level of complexity to the branding exercise other parts of the job seem to be easier. Adding a little style to the left or current navigation is a breeze.
Don’t over think it
There is always a temptation to start with an existing template and begin overriding the existing classes…DON’T DO IT! Create your own style and reference it in the control.
I started with Randy Drisgill’s Starter Master Page. Open your starter master page in SharePoint Designer 2010 and switch to split view so you can see your code in the top pane and your design in the bottom pain. Click on the left navigation in design view and you will see the left navigation code highlighted. Notice the line for “CssClass”? That’s where we are going to put out class name but first let’s build our style.
Build your own style
First, take a look at the style code already in your Starter Page. Randy has included a class called “customLeftNavHolder”. This class is there to help keep the left navigation in roughly the right position. I started by cutting that class from the master page and including it in my primary style sheet. This class will allow us to tweak the position of the left navigation so we may as well keep it. I added a top and left margin for some much needed white space.
The next step is to create your own style code. I am keeping it simple with a background and image hover effect.
A note about CSS
I created a code block just for Current Navigation. Over the years I have developed my own style for writing clean organized CSS markup. While you can’t control the condition of Microsoft’s CSS you can control your own. I would encourage you to do whatever works for you in your style sheet. You will be referencing this CSS a lot so make sure you do what works for you! I always create a clear block header and then nest my classes according to classes and their descendants. Another thing I like to do is place the properties of each class in alphabetical order.
Once we have established our class we can add it to the master page.
Where should I put my CSS?
Good question, I guess the answer depends on your objectives. I created a folded inside the style library and place my own image and style folders inside it. This allows you to apply SharePoint check out and check in processes to your style sheets and images. If security and performance is a huge concern you may consider putting your assets in the hive.
The final product
SHAZAM…that was easy! Five minutes of work and our left navigation is custom
Leave a Reply