SharePoint 2010 themes – all you need to know about customisation

In this post I will write about:

  • Out of the box themes overview
  • How SharePoint 2010 themes work
  • Theming core4.css and v4.master and why it is never enough
  • How to create your own theme-able css and package in WSP solution
  • Css 3 gradient backgrounds workaround

Themes in SharePoint 2007 are utterly dull and useless so I am not going to waste time to compare them with newer and better engine that we find in SharePoint 2010. Out of the box, every SharePoint site comes with about 15 predefined themes that you can find by going to Site actions > Site settings > Theme. You can apply theme on both site and web level. You can apply theme to the site and inherit the setting to all site subsites. New interface also allows you to modify theme on the fly. By changing 12 theme variables (tokens) you have limitless variations to color your site. This way usually only makes it uglier but feel free to try- why not to make your site look like a vomit :) You can also create a new theme using PowerPoint 2010, good news is that it comes with the same engine, so, theoretically, if you have nice company presentation template you could quickly apply similar look and feel to your SharePoint site. Moreover, you can save your new theme to theme gallery and make it available for other sites. To go to theme gallery, go to site collection settings (every site collection has separate theme gallery), theme gallery will be always available at this address http://yoursiteURL/_catalogs/theme/Forms/AllItems.aspx  You can upload your .thmx file there. This way, you can control what colors and fonts your site has, but you cannot control how they are used. Also, you will not really know the site will look until you actually apply your theme. E.g. you changed Light2 color to be BLUE, after you apply this change, you will find out, that left navigation, some of header, and some text will be colored with this color, some other components on the page can have slight ligher tone, some will appear as darker blue. This is because of the fact, that every color you choose can be used by someone who creates CSS style-sheet file in many different ways. E.g. someone decided that Light2 color will be used as navigation background, but for active navigation item – background will be Light2-Lightest – this tells SharePoint to use lighter tone of this color. Colors you choose are also used to color images for gradient effects (site header, navigation bars). It is very easy to come up with rainbow like sites when you are not careful. To understand how it works it is the easiest to look at out-of-the-box css that is used for SharePoint collaboration sites (most commonly seen sites). This file sits on the server under C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1033STYLESThemable and C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1033STYLES.  Yes, there are two files which are exactly the same but sit on different locations. This is location where you can deploy your custom css, because this is one of possible places SharePoint allows to store themable css files (other one is Style Library) First, let’s focus on file content, below a few fragments:

[sourcecode language="css"]
.ms-toolbar{
font-family:verdana;
font-size:8pt;
text-decoration:none;
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC;
}
[/sourcecode]

This styles tells SharePoint to use Hyperlink theme color to paint in toolbar.

[sourcecode language="css"]
body #s4-ribboncont{
padding:0px;
/* [RecolorImage(themeColor:"Dark2-Darker",includeRectangle:{x:0,y:589,width:1,height:20})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -565px;
}
[/sourcecode]

This style paints ribbon with a slightly darker from Dark2 color, and it is not just a color, it is coloring the image.

[sourcecode language="css"]
.ms-dlgTitle
{
/* [RecolorImage(themeColor:"Light2",includeRectangle:{x:0,y:51,width:1,height:21})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -51px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.90")] */ background-color:#21374c;
height:32px;
white-space:nowrap;
cursor:default;
overflow:hidden;
}
[/sourcecode]

So we have special comments in css file that will tell SharePoint how to modify css after theme is applied. /* [WhatToDo(use what theme token and how) ] */ before the style

[sourcecode language="css"]
.ms-WPBody a:link
{
/* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072bc;
text-decoration:none;
}
.ms-WPBody a:visited{
/* [ReplaceColor(themeColor:"FollowedHyperlink")] */ color:#b10069;
text-decoration:none;
}
[/sourcecode]

So, when there is no theme applied, all links in webparts will have this color: #0072bc. When the theme is applied, SharePoint will derive completely new css file when it will replace all default colors with theme colors. The output css will be like below (fragment)

[sourcecode language="css"]
.ms-WPBody a:link
{
color:<span style="color: #123456;">#123456;</span>
text-decoration:none;
}
.ms-WPBody a:visited{
color:<span style="color: #654321;">#654321;</span>
text-decoration:none;
}
[/sourcecode]

Important to note that SharePoint generate this new css once, when the theme is applied. It will store it in a special folder with a special unique name. SharePoint masterpage will automatically reference this css. E.g. /_themes/20/corev4-7B0CDD7F.css?ctag=21 Implication to this behavior is that once you set the theme for a site, any changes to original css will not take any affect. Of course you are not going to modify core css, but this fact will be important when you plan for your custom css you deploy and then maintain. Imagine scenario that you have to upgrade your css  (e.g. you need to change left menu width) – you will need to ensure that themed sites are reprocessed again (which means you would have to identify which sites are themed). If you think this gets a bit tricky,  you should consider creating multiple css files for your branding: one for layouts alignment (things that should never change) and one for themable elements. This way you have nice separation and control what is and what is not themed. With themes you have a few levels of customization possible, starting from the simplest and least flexible one:

METHOD 1.

No css/html skills required.  -  Create thmx file and upload to your site, if your site is using out of the box masterpage and css – this will work and you see the effect once theme is applied. Once you try this method, you will quicly run into obvious limitation. You can control what colors and fonts your site has, but you cannot control howthey are used. Below are some example of playing with themes, just to show you the idea:

All tokens white, black links, Accent1 - RED
All tokens white, black links, Accent1 - RED
Accent1-red, Links - Black, TextBackground 1 - yellow, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, TB3 - Black, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, TB3 - Black, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, TB3 - Black,TB4 - Green, Other - White
Accent1-red, Links - Black, TextBackground 1 - yellow, TextBackground2 - Blue, TB3 - Black,TB4 - Green, Other - White
Accents in edit mode
Accents in edit mode
Sharepoint 2010 Font theming
Sharepoint 2010 Font theming

METHOD 2.

Some css/html skills required, no Visual Studio. Use SharePoint Designer. Create a new css file (in Style Library), copy all core4.css content to it (or not, if you decide to still reference corev4.css, you can start from empty new css and only copy styles as you go). Use Firebug to identify lines of css you need to change. Copy them to your custom.css  and modify to your taste. Register your css in masterpage.

<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/~language/ Themable /custom.css %>After=”corev4.css”runat=”server”/>

This method is sufficient when you need to change some default behavior. E.g. If you don’t want left navigation background to be the same as top navigation background. Also, it is only way if you are not allowed to deploy anything to the server. Assuming you are customizing v4.master and core4.css, this will give you very limitless flexibility in terms of changing things on your SharePoint site. You usually start from css changes but you will quickly find it hard to not to touch masterpage as well. E.g. to modify top navigation or breadcrumb behavior, or to add “People search box”.

METHOD 3.

Use Visual Studio 2010 to package your custom branding components. When working with deeper branding files you have to deploy are:

  • images (icons, gradients, logos, headers etc.) – after some time of working on SharePoint branding I find /_Layouts/IMAGES/customfolder/ folder the best place for them. Mostly because of easier referencing them in masterpage and css (always same path that does not depend on whether this is the site on managed path or on root server level)
  • masterpage (one or more) – this gets deployed to masterpage gallery through module
  • page layouts (you can sometimes leave without them) – these get deployed to masterpage gallery through module
  • css files – I was usually happily deploying these to Style library, for themable css under /locale/themable/customfolder/custom.css. But I have recently got the case when I needed to reconsider and to deploy to TEMPLATELAYOUTS1033STYLE. This was because in my css I had some gradient coloring using newer techniques like:
/* For Firefox 3.6+ */ background: -moz-linear-gradient /* For WebKit (Safari, Chrome, etc.) */ background: -webkit-gradient .../* for Internet Explorer */
filter:progid:DXImageTransform.Microsoft.gradient( ...

Because there are multiple colors in one line and it is all in function, to theme it you would need to do something intense like this:
[sourcecode language="html"]
background: -webkit-gradient(linear, left top, left bottom, from(/* [ReplaceColor(themeColor:"Light2-Lightest")] */ #FEFEFB), to(/* [ReplaceColor(themeColor:"Light2-Lighter")] */ #E9E9E9));

[/sourcecode]

Surprisingly, theme engine was quite happy to process these lines of css, but css file was corrupted when theme was not applied and gradient was not working. So I had to use the trick of having one custom.css file at LAYOUTS1033STYLEScustom.css and another one at LAYOUTS1033STYLESThemablecustom.css.  In first one, I didnt have any tokens, in themable one, I had tokens. Then in my masterpage, I referenced my custom.css as:

[sourcecode language="html"]

  <SharePoint:CssRegistration ID="anmm_portal" name="custom.css" EnableCssTheming="true" After="corev4.css" runat="server"/>

[/sourcecode]

This way - when no theme is used LAYOUTS1033STYLEScustom.css is used. When theme is applied, same named file from Themable folder is taken. I figured it out thanks to this post: http://stackoverflow.com/questions/4900215/can-ms-filter-styles-be-themeable-in-sharepoint/

  • js files
  • jQuery framework ( a must for web developers)
  • Themes variations that will work with your masterpage and css. You can deploy color variations as a module

[sourcecode language="xml"]
<!--?xml version="1.0" encoding="utf-8"?--><?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="MOThemes" Url="_catalogs/theme" Path="MOThemes" RootWebOnly="true">
<File Url="Blue.thmx" Type="GhostableInLibrary" Path="Blue.thmx">
</File>
<File Path="Red.thmx" Url="Red.thmx" Type="GhostableInLibrary" />
</Module>
</Elements>

[/sourcecode]

One Response to “SharePoint 2010 themes – all you need to know about customisation”

  1. Chris

    Cool guide!

    Another way for creating cool looking custom SharePoint styles is using the SharePoint Online Designer for generating css files.

    Have a look:
    http://www.nextflow.at/pages/plugnplay.aspx

    Cheers Chris

    Reply

Leave a Reply