See also: SharePoint 2007 CSS Reference Chart
The following CSS Reference Chart highlights the major styles used in SharePoint Foundation 2010 and SharePoint Server 2010. CSS styles are grouped by area of the page and include the class/ID value, an explanation of how it is used in SharePoint and other related information including a screenshot where appropriate. Code (and file location) for the style statement is included.
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
Branding options with MOSS 2007, as in SharePoint Server 2010, included creating a custom master page or a custom theme (or both). For MOSS 2007, I had chosen to go with the custom theme option because I didn’t have any critical layout changes to make on the master page and because custom master pages did not affect _layout pages. These MOSS 2007 and WSS 3.0 branding issues were expertly outlined by Heather Solomon in her blog post: Master Pages vs. Themes: Which Do You Choose?:
A benefit to themes is that when you apply a theme, it also affects the pages in the _layouts directory, whereas master pages do not.
If a theme doesn’t seem to fit the bill for the design you need to implement in the SharePoint site, then look to master pages. With master pages you can implement your own navigation systems, custom code and design elements, move elements around on the page or hide SharePoint components you don’t want to use. It is a more complete solution for totaling changing the way SharePoint looks.
In some situations, both master pages and themes can be used. If you use a master page to style the site, using a custom theme can style the _layouts pages to coordinate with the look of the site. If you need to apply different color palettes for one design for sub sites, in MOSS use can use the alternate CSS setting, but that isn’t available for WSS sites. You can create a custom master page for the WSS sites to use, then create and apply different themes to change the color palette of sub sites.
One drawback to a theme is that you have to apply it at the site level for each site. Master pages on the other hand can be inherited (for MOSS sites) through sub sites. But this is buggy and more than likely you have to apply the custom master page on each site anyways. Another possible drawback to themes is they have to be installed on the server thus making them available to all sites in the farm. But there is a way around this if you don’t have access to your server or if you don’t want a theme available to all sites.
You can apply a theme (pick one that most closely resembles what you want to ultimately do with your site design) to your site, and then a copy of the theme CSS file will be created for the site. You can edit this file in SharePoint Designer (thus creating a copy of it in the content database and customizing the file) and create your customizations for your site.
So, to run down some key points:
Master Pages
- Can totally change the look of a site.
- Can hide SharePoint components that you don’t want to use.
- Will allow you to alter the layout of the page, in addition to changing the colors and images used in the site.
- Will not affect _layouts pages. You will need to use a workaround.
Themes
- Can re-skin the layout of a site to use different images and colors.
- Can only hide SharePoint components that can be controlled through hiding it in the CSS (display: none set on a class/ID).
- Affects _layouts pages.
- Can be used as an alternate CSS file application method, similar to alternate CSS setting in MOSS sites.
- Are installed on the web server unless you customize the file.
In Sharepoint Server 2010, the custom master page option is much more attractive than the custom theme option because it is much easier to apply the custom master pages to your _layout pages (in the browser UI if publishing is enabled). In fact, creating a custom theme and uploading it to the SharePoint 2010 server is not an option even covered by Randy Drisgill and co-authors in the book Professional SharePoint 2010 Branding and User Interface Design, the book that has become my de facto branding bible for SharePoint 2010 (in conjunction with a SharePoint Designer 2010 training class from MindSharp that I also highly recommend).
More Posts in the series:
0. SP 2010 Branding Options: Master Pages vs. Themes: Overview
1. SP 2010 Branding Options: Master Pages vs. Themes: Part 1
Overriding CSS by attaching an alternate style sheet to the master page in the browser’s UI
2. SP 2010 Branding Options: Master Pages vs. Themes: Part 2
Overriding CSS by attaching an alternate style sheet to master page code in SPD 2010
3. SP 2010 Branding Options: Master Pages vs. Themes: Part 3 (Coming soon)
Creating custom master page with custom layout and code using SPD 2010
This post is an introduction to a series of posts about branding sites in SharePoint 2010, and about why I prefer prefer custom master pages over custom themes in SP 2010.
SharePoint 2010 has several more branding options than SP 2007 (link to History post) but the SP 2010 options can be broken into two groups:
Themes: Depending on your organizational policy regarding branding, power users can be given access to use the browser to select an existing out-of-the-box (OOB) theme, customize one of these themes, or create and import a custom theme from PowerPoint 2010 (or Word, PowerPoint, or Excel 2007 or higher) as Drisgill et al. thoroughly detail in Chapter 5: Simple Branding.
Master Pages and CSS: Many organizational policies however, including mine, require that all SharePoint sites have a consistent look and feel to reflect the branding campaign of the organization. In this case all sites are required to use one or more custom themes and/or master pages created by the IT Professional. I will focus on these options in this series of blog posts:
Throughout SharePoint, CSS is probably the most prevalent method of applying branding. Thus, when creating a heavily branded SharePoint site, you will often need to apply your own custom CSS….
There a few ways to apply custom CSS in SharePoint. One common mistake is to just log in to the server and find and edit the core SharePoint CSS file (corev4.css) in the SharePoint root. This should be avoided because it is problematic in terms of supportability. — Drisgill et al., SharePoint 2010 Branding and User Interface Design
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
This week I tried to retract the mosstraining.wsp solution because we never used this solution, and I am cleaning up our MOSS 2007 server in preparation for the upgrade to Sharepoint 2010, but it retracted forever! I went to Central Administration > Operations > Solution management, clicked on the mosstraining.wsp file, then clicked on the ‘Retract Solution’ button. I followed the steps and advice in the microsoft documentation which states that you must retract the solution before you can remove/delete it. I also remember reading somewhere that the retraction process can take a while, so I went to lunch. After lunch the solution was still retracting. The next morning I found that the server had crashed, and after restarting, the solution was still…. retracting!
Thank God that I found MJs blog post before I pulled out all my hair!
Although i have tried manually and through stsadm/code the solution retraction never completes and gives the status as retracting forever. i have jotted down some workarounds that might work when Solution deployment hungs while deploying a solution :
1. Run execadmsvcjobs that will forcefully run the timer jobs
stsadm -o execadmsvcjobs
2. Delete the existing timer job for the retraction and retry retracting
From UI central admin -> operations -> Time Job Definitions ->click on timer job and delete. For the timer jobs that do not have the delete option enabled stsadm utility can be used,
stsadm -o deletesptimerjob -title -id
3. To get the job id for the timer try the following stsadm -o enumssptimerjobs
4. If running out of options then stop retracting and delete the solution using override
stsadm -o deletesolution -filename -override
