October | 2011 | Highbrowse

October 2011

Monthly Archive

October 28, 2011

Impact of SharePoint 2010 Theme on Styles and Mark-up Styles

Posted by mondizen under SharePoint 2010
Leave a Comment

SharePoint 2010’s Ribbon offers some pre-set styles and mark-up styles for use when editing text. How these styles display is impacted by the Theme which is used. When customizing a theme, be aware of the following relationships:

Text/Background Dark 1 = normal text

Text/Background Dark 2 = Mark-up Styles, Headings 1-4 (the default is a dark blue colour of the default top band in SharePoint 2010)

Accent 1 = Colour Heading 1

Accent 2 = Colour Heading 2

Accent 3 = Colour Heading 3 and Caption style

Accent 4 = no effect

Accent 5 = Colour Heading 4 and Comment

Accent 6 = Highlight

October 27, 2011

Customizing a SharePoint 2010 Theme

Posted by mondizen under SharePoint 2010
Leave a Comment

If you look at the folder structure of a standard, out-of-the-box SharePoint site which has not been themed in any way, you will see the following structure, when opened with SharePoint Designer:

Once you customize an existing theme, a new entry will be created in the Themes Gallery, called Themed:

And within this, a folder grouping all the images and CSS files which are used within a custom theme:

Some important aspects of how your site looks can be easily changed by modifying an aspect of a theme. For example, a SharePoint theme allows the colour of hyperlinks used within the content area of pages to be changed. However, if you want to modify the behaviour of links when hovering with a mouse pointer, then this can only be done in the corev4.css file, a copy of which is saved in the Theme Gallery once a theme is customized. So to give a concrete example, if you want link text to be dark blue with no underline and to change to orange when you hover over the link, you would need to do the following:

Customize your theme with the required link colour and followed link colour.
Edit the COREV4.CSS file in the Theme Gallery. The file will be created with a reference number, in this case it was 8A0ABD2F, so the CSS file is called COREV48A0ABD2F.CSS. Search for ms-rtestate and change text-decoration to none and add a colour for the hover as follows:

.ms-rtestate-field a:hover

{

color:orange;

text-decoration:none;

}
Save the file and refresh your page to see the results.

Be aware that if you further change the Custom theme in any way, the COREV4.CSS will be copied again to the Theme Gallery, so you will have to redo any changes to the CSS file.

October 27, 2011