Microsoft Theme Builder: What does everything do?
I have become a firm believer in this wonderful tool. But with my blog posts, a lot of people have asked me “So what does each element do in SharePoint?”. So this is a post that will explain the blow by blow on each element we will use for SharePoint 2010. For SharePoint, we only work in the Colours and Fonts tab (the first one) – the rest of the tabs are meant for PowerPoint. Thanks to Raja Dandu and his blog post, which helped me to write this article.
So lets’ begin. Figure One is the Colour and Fonts tab, with system colours unticked.
Figure 1: Colours & Fonts
This is the colour that will be your main body background, as well as your web part background. It also controls your Left Navigation border colour, the Site Action Menu background and the pop up window background. It will also be your Site Action and Welcome Text Colour.
So to emphasize the colours I made it a bright pink.
Figure 2: Light 1 changed to bright pink
This colour controls your Browse Tab and your Hover background. It also is the colour of the Title Container background, the Left Navigation Background, Top Navigation background, Header 2 background and the Web Part Add background. I made this a bright orange.
Figure 3: Light 2 made a bright orange.
This is how our theme is looking so far so you can see the colour changes.
Figure 3.1: The theme in the Site Theme selection page
Figure 3.2 : The theme activated (horrid isn’t it ). Note the text in the ribbon.
Figure 3.3: The home page of a team site. Note the Browse tab background colour.
Figure 3.4: The Site pages page. With my mouse hovered over a list item.
Dark 1 controls the text colour for Page Title, Hovering (main links), the main body text, Site Action Menu text, Left Navigation text and the Site Settings Page Headers Text. It is a good idea to make this a stand out colour compared to Dark 1 (Dark Grey on Black, or Light Grey on White), least you have your users up in arms. I have cleared the Dark colours for this example and made Light 1 the bright pink.
Figure 4: Light 1 in bright pink
Dark 2 controls the colour for the Left Navigation Header text and the text for the Recycle Bin and View All Site Content. It is also important because it will be the colour of your “I like it” and Tags text, as well as the bread crumb (current location). It is the colour of your border for the Site Action Drop down menu, and the text colour for List Descriptions. Again, try making it a stand out colour compared to your Light choices. Your text colours are very important. Content drives the site, and if you can’t see it, you have missed the boat on theme’ing. I made Dark 2 a green, as the orange colour was not really visible.
Figure 5: Dark 2 as a green
This is how our theme is looking with the Dark changes, so you can see the colour changes.
Figure 5.1: The theme in the Site Theme selection page
Figure 5.2 : The theme activated. Note the white on white text as we didn’t change the Dark colours for this theme. Also note the right hand Site information, the Ribbon and the Left hand navigation (Quick Launch)
Figure 5.3: The home page of a team site. Note the Body text colours and the List description text. The Header “Getting Started” is a Heading 2 style.
Figure 5.4: The Site pages page. Note the colours for the various text elements
The accent section is a bit trickier than the Text and Background colour section, and you must be very careful with your colour choices.
Accent 1 handles the colour for the Quick Launch Hover Text and your Top Link Selected Tab.
This is the text colour for class .ms-error and your Heading 2 styles
This is the colour of the “Caption” text.
This is the colour for the border under the Web Part Selector
This is the colour for your Heading 4 styles.
This is the background colour for text highlights.
In most cases you won’t see much of the accent colours, but when you do and they are “clashing colours” it will be a bit of an eye sore. So use one of the colour-match sites I suggest in most of my articles like Adobe Kuler and Color Scheme Designer
I chose these colours for emphasis not colour coordination.
Figure 6: Accent colours
I have tried to include as many examples of this theme in action as I could.
Figure 6.1: The theme in the Site Theme selection page
Figure 6.2 : The theme activated. Note the white on white text as we didn’t change the Dark colours for this theme. Also see the background colour of ‘Home’ which is Accent 1 with the standard gradient.
Figure 6.3: The home page of a team site. The Header “Welcome to your site” is a Heading 1 style. And when you mouse over the list, the line becomes red. The mouse over of the Site Actions menu is the same colour as the background for “Home”
Figure 6.4: The Site pages page. Note the colours for the various mouse over elements.
Figure 6.5: I added this to show the ribbon colours, you can see the green (Accent 3), and the background of the selected ‘Calendar’ link on the left hand side is blue (Accent 5). The mouse overs also change to Accent 1 (red) on hover.
This colour controls the Toolbar Text and the Body Hyperlink text. It is the colour used in the a:link class.
This colour is used in the Body Hyperlink for when a link has been visited (the class is .ms-WPBody a:visited)
Figure 7: the hyperlink colours in pink and green
And this is what it looks like. (you can’t really see much, but look at the boxes)
Figure 7.1: The theme in the Site Theme selection page
Figure 7.2: The theme activated. If you look under Site information you will see that the link is green because it has been visited, and the others are pink.
Figure 7.3: I have added Bing and EUSP as links. You can see Bing is pink as it is unvisited, and EUSP is green as it has been visited.
You will use this to control the main font choices for your site. This can be overridden when you edit the different bodies of text by using the standard ribbon Format Font editing tool. Since SharePoint only uses the two fonts, you don’t need to worry with the Option sections, and the Complex Script and East Asian font selections are not used (as far as I know, I could be wrong – I did try testing this, but was not successful in getting them to show).
The Major Font choice is the font used for Headings.
Minor Font choice is used as the Body Font.
For this example I chose two non standard fonts. Always make sure that the fonts you chose are available across platforms.
Figure 8: The font choice made
Figure 9: You can see my selected fonts in the drop down boxes.
Figure 10: this is the preview mode in the Site Theme page to demonstrate the font changes.
I hope this has given you a better understanding on how to use Microsoft’s Theme Builder and its’ different elements. It is a very powerful tool, which saves you many hours. It was raised by Kerri Abraham that when she created themes in Powerpoint – the themes colours would change and not be the true hex colours she had chosen. Kerri would have to “hack” the theme to get the colours ‘true’. I tested this with theme Builder and am happy to say that this does NOT happen with these themes. The colours remain true.
You can download Microsoft’s theme Builder here.