David Andrew Smith

Attaching an alternate style sheet to the master page using the browser’s UI

How to change the color of the title bar (css style: s4-title) on a Team Site template (with publishing feature enabled):

1.Create a new style sheet in Dreamweaver, or your favorite text editor, and name it something like custom.css (or CoreOverrides.css) and save it to your desktop , or just download mine (updated February 2012 with more styles!)

2.Use the IE Developer Toolbar to find the names of styles to override

a.Open Internet Explorer and browse to the SharePoint 2010 page that you want to style

b.Open the ‘Developer Tools’ toolbar (F12), also known as Internet Explorer Developer Toolbar

i.Note: Sometimes I prefer the Firefox counterpart, FireBug, it just depends on what I have open at the time

c.In the IE Developer Toolbar, in the ‘HTML’ tab, click on the white arrow to ‘Select Element by Click’  (screenshot 2)

d.Hover over different sections of the SharePoint 2010 web page with the cursor and you will see a blue box outlining the different sections. (screenshot 3)

e.Click on a section to get the HTML in the left box and the CSS in the right box. (screenshot 4)

f.Use the styles you find in the right CSS box to determine which styles to override in your custom.css file

 Note: Another great option for working with CSS in SharePoint 2010 is using SharePoint Designer and the Skewer Click feature.

3.In Dreamweaver, on your alternate style sheet, add your version of the style (override the style) – for example: .s4-title{background-color:#c8BD9b; } (screenshot 5)

4.Upload your style sheet from your desktop to SharePoint, the Style Library is a good place (screenshot 6)

a.Site Actions > View All Site Content > Style Library > Add document (screenshot 7)

5.How to go to the Master Page section and attach your style sheet:

a.If Publishing features are already enabled (you can see the ‘Master page’ link in Site Settings) for your site then do the following:

i.Site Actions > Site Settings > Look and Feel > Master page (screenshot 12)

ii.Select ‘Specify a CSS file…’ > browser to your CSS file in the Style Library and select it (screenshot 13)

iii.Check the box to ‘Reset all subsites to inherit this alternate CSS URL’ if appropriate

iv.Click ‘OK’

b.If the publishing site feature (Site level) is not already enabled then there is no ‘Master page’ link to click (screenshot eight), so you must enable the publishing feature at the Site level

i.Site Actions > Site Settings > Site Actions: Manage site features > Activate (SharePoint Server Publishing feature, screenshot 9)

ii.If the Site Collection publishing feature (Site Collection level) has not been enabled first you will see an error message (screenshot 10)

1.You must enable the Server Publishing feature at the Site Collection level first – Site Actions > Site Settings > Site Collection Administration: Site collection features > Activate (SharePoint Server Publishing Infrastructure, screenshot 11)

6.Once your style sheet is attached, you should able to see your style change, if not, refresh your browser to see the change in background color for the title bar (screenshot 14)

7.Repeat steps 2-6 for each subsequent style

8.Check out my list of useful styles.

Featured Series of Posts on Branding Options in SharePoint 2010:

0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
Why I prefer custom master pages over custom themes in SP 2010

1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Attaching an alternate style sheet to the master page using the browser’s UI

2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Attaching an alternate style sheet to the master page using SPD 2010

2.1 SP 2010 Branding Options: Master Pages vs. Themes: Part 2.1
How to edit the master page to add a custom logo and a favicon with SharePoint Designer 2010

3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3
Adding a footer to your custom master page using SharePoint Designer 2010

4. History of SharePoint Branding: 2007 to 2010
A tribute to Heather Solomon’s legendary blog posts on MOSS 2007 themes and master pages

5. SharePoint 2010 CSS: List of Useful Styles