Customizing user interface of SharePoint 2010 system pages

Since SharePoint 2010 system pages are often used by end-users and not just administrators, you might need to customize the user interface of those to match your company’s theme.
As you know SharePoint 2010 has 2 sets of masterpages: System and Site masterpage.
Assuming you’re running a publishing portal, click Site Actions -> Site Settings -> Master page to see where you can set both of the masterpages.
Here, you are likely to have a site masterpage which is custom and a system masterpage which is by default v4.master.
In this article we’re not going to be discussing how to modify your site masterpage, for that you can check out my branding book, instead I’m going to focus on how and when to customize system page maasterpage.
Depending on the type of customization you require for your system pages you may just get away with still using v4.master and applying custom CSS.

If you don’t require any structural changes to system pages to make them appear different than out-of-the-box UI, you can get away with attaching a custom CSS to existing system masterpage.
To do that, you need to create a new CSS file and place it somewhere on the site where it’s accessible to all users. In my case, I’m going to place my CSS file into the Style Library of the root site.

Next, I’m going to Site Actions -> Site Settings -> Master page and connect to my custom CSS as show below:

Any changes applied to this file will take effect on both site and system masterpages.
Here is what I have in my custom CSS fle

.menu-item-text {
 color: red;
}

Resulting in the menu color to change as below:

If you don’t need to make any structural changes to the page such as adding custom controls or removing the menu etc, this approach will work well for you.
Again, any changes made here will apply to all pages that use system and site masterpages. This means that before you release any of your CSS customizations to production, ensure you tested majority of the pages to ensure elements of the page are not distorted or invisible. Take a special care when trying to hide elements on the site.

For example, you might think that hiding left hand side navigation bar is not a big deal; the problem is that some pages, such as People and Groups page (Site Actions -> Site Settings -> People and Groups) uses left hand navigation to ensure you’re adding people to the proper group. If this navugation menu was hidden – this system interface would be pretty much unusable.

So take a special care when hiding elements on the page.
In my next post, I discuss how you can make a bit more significant changes to the look of your pages by using custom system masterpage and it’s own dedicated file.