How to apply a "THEME" using sharepoint or "Microsoft THEME BUILDER" and also understand its differnent elements.

So lets’ begin. Figure One is the Colour and Fonts tab, with system colours unticked.


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.

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.

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

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.

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.

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)

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.

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.

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.