Supporters of End User
Web

Microsoft Theme Builder: What does everything do?

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Site Manager/Power User; MOSS; WSS; 2007; 2010; Design

 

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.

2011-07-28-MSTheme-EachElement-01.jpg
Figure 1: Colours & Fonts

Text/Background Colors:

Light 1

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.

2011-07-28-MSTheme-EachElement-02.jpg
Figure 2: Light 1 changed to bright pink

Light 2

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.

2011-07-28-MSTheme-EachElement-07.jpg
Figure 3: Light 2 made a bright orange.

This is how our theme is looking so far so you can see the colour changes.

2011-07-28-MSTheme-EachElement-03.jpg
Figure 3.1: The theme in the Site Theme selection page

2011-07-28-MSTheme-EachElement-04.jpg
Figure 3.2 : The theme activated (horrid isn’t it :P ). Note the text in the ribbon.

2011-07-28-MSTheme-EachElement-05.jpg
Figure 3.3: The home page of a team site. Note the Browse tab background colour.

2011-07-28-MSTheme-EachElement-06.jpg
Figure 3.4: The Site pages page. With my mouse hovered over a list item.

Dark 1

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.

2011-07-28-MSTheme-EachElement-08.jpg
Figure 4: Light 1 in bright pink

Dark 2

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.

2011-07-28-MSTheme-EachElement-13.jpg
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.

2011-07-28-MSTheme-EachElement-09.jpg
Figure 5.1: The theme in the Site Theme selection page

2011-07-28-MSTheme-EachElement-10.jpg
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)

2011-07-28-MSTheme-EachElement-11.jpg
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.

2011-07-28-MSTheme-EachElement-12.jpg
Figure 5.4: The Site pages page. Note the colours for the various text elements

Accent Colours

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
Accent 1 handles the colour for the Quick Launch Hover Text and your Top Link Selected Tab.

Accent 2
This is the text colour for class .ms-error and your Heading 2 styles

Accent 3
This is the colour of the “Caption” text.

Accent 4
This is the colour for the border under the Web Part Selector

Accent 5
This is the colour for your Heading 4 styles.

Accent 6
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.

2011-07-28-MSTheme-EachElement-19.jpg
Figure 6: Accent colours

I have tried to include as many examples of this theme in action as I could.

2011-07-28-MSTheme-EachElement-14.jpg
Figure 6.1: The theme in the Site Theme selection page

2011-07-28-MSTheme-EachElement-15.jpg
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.

2011-07-28-MSTheme-EachElement-16.jpg
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”

2011-07-28-MSTheme-EachElement-17.jpg
Figure 6.4: The Site pages page. Note the colours for the various mouse over elements.

2011-07-28-MSTheme-EachElement-18.jpg
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.

Hyperlink Colors

HyperLink

This colour controls the Toolbar Text and the Body Hyperlink text. It is the colour used in the a:link class.

Followed Hyperlink

This colour is used in the Body Hyperlink for when a link has been visited (the class is .ms-WPBody a:visited)

2011-07-28-MSTheme-EachElement-23.jpg
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)

2011-07-28-MSTheme-EachElement-20.jpg
Figure 7.1: The theme in the Site Theme selection page

2011-07-28-MSTheme-EachElement-21.jpg
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.

2011-07-28-MSTheme-EachElement-22.jpg
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.

Theme Fonts

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).

Major Font
The Major Font choice is the font used for Headings.

Minor Font
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.

2011-07-28-MSTheme-EachElement-24.jpg
Figure 8: The font choice made

2011-07-28-MSTheme-EachElement-25.jpg
Figure 9: You can see my selected fonts in the drop down boxes.

2011-07-28-MSTheme-EachElement-26.jpg
Figure 10: this is the preview mode in the Site Theme page to demonstrate the font changes.

In Conclusion

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.

Comments

Chris Quick

Awesome Breakdown

Thank you for taking the time to present this -- it helps a lot and may actually help the theme engine in SP2010 be a viable option for some that want to apply a brand without doing anything with CSS or Master Pages. Of course, nothing really can compare with the types of customizations you can achieve with CSS and Master Pages -- but not everyone has a budget to spend on a custom brand for every team site in the organization.

Posted 01-Aug-2011 by Chris Quick
Kerri

Fantastic!!

Excellent resource, everyone needs to keep this post bookmarked.  Terrific job!

Posted 01-Aug-2011 by Kerri
Lou van der Bijl

Thanks :)

Thanks Chris and Kerri :) I actually had a ton of fun writing this article, and had my son giving me "colour" advice over my shoulder. The power of a well-thought out theme is incredible, as it can save time and effort for those small companies that just want a "smarter looking" intranet without the cost of hiring a brander. :)

Posted 02-Aug-2011 by Lou van der Bijl
Brandy

So Simple Now

This was so cumbersome for me before - thank you for breaking it down! I have some priorities over branding right now, but I need a decent theme in the meantime. Within minutes of reading this post, I had what I needed! Theme Builder makes this process easier, but your article really made it clear. Thank you!

Posted 04-Aug-2011 by Brandy
Lou van der Bijl

:) Brandy

Hey Brandy, I am so pleased I was able to help in some small way!

Posted 04-Aug-2011 by Lou van der Bijl
Florian

own picture as background

hey lou,
we have a problem. we would like to have a own picture as background (where the color of light1 is). so we added the picture to the programm, and in the powerpoint preview, the picture is the background . but using the theme with sharepoint, it still has the color of light1 and the picture is nowhere to be seen.
it would be great, if you could help us.
 

Posted 10-Aug-2011 by Florian
keerthiprasad

theme builder

hi i am not able to get themebuilder @ http://connect.microsoft.com/themebuilder can i get it anywhere else?

Posted 18-Jul-2012 by keerthiprasad
Chris

Theme Builder Page Broken

The Theme Builder page appears to be broken and is displaying an error. I reported it via the help menu.

Posted 26-Jul-2012 by Chris
Chris

Theme Builder Page Broken

I received the following reply from Microsoft regarding Theme Builder" "Thank you for contacting Microsoft Connect Help (mchelp@microsoft.com) and for your interest in Microsoft products! Our records indicate that the Site834 (Theme Builder) has been closed and you may not be able to access any resource on this site. We apologize for the inconvenience. If you have a question regarding MS Connect please provide us with more details of the error you are receiving so that we may assist you further."

Posted 31-Jul-2012 by Chris
Bobbins

Found theme builder ;]

http://openxmlthemebuilder.codeplex.com/

Posted 21-Sep-2012 by Bobbins

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: