Home » Popular Applications » sharepoint » Create Custom Style Sheets to Control the Visual Features of Groups of SharePoint 2010 Team Sites Web Pages

Create Custom Style Sheets to Control the Visual Features of Groups of SharePoint 2010 Team Sites Web Pages

It is possible to create a custom Cascading Style Sheet (CSS), as required, for SharePoint Server 2010 Team Sites. This custom CSS can be stored to the Style Library repository of the SharePoint server. The CSS can be locally produced with as ubiquitous a tool as Windows Notepad. Once the CSS has been added to the Style Library, then, with the aid of SharePoint Designer 2010 (note: organizational approval may be required for the use of SharePoint Designer 2010. Policies vary substantially from organization to organization), the Style Sheet can be associated with specific team websites.

Our set on SP 303 – SharePoint Branding: Brand and Enhance User Interfaces of SharePoint 2010, which is intended for an audience of Designers, SharePoint Site Administrators, Power Users, Developers, includes a specific video course on the topic of creating custom CSS for Team Sites, “Creating Extended SharePoint 2010 Themes”. The author of this training set, Yaroslav Pentsarskyy demonstrates how to connect to specific team sites with SharePoint Designer 2010. Once connected, CSS can be added to Master Pages, thereby propagating specific desired styling features across all web pages produced with the specific master page to which the custom CSS has been added.

In the process of adding the custom CSS to a team site Master Page, Yaroslav notes why the order with which CSS is added to a web site by a web browser is important. For example, by adding the custom CSS with an “after” parameter, Yaroslav notes that he has thereby ensured that there will be little, if any risk that the custom settings included in the CSS will be over written by the out of the box, “core” CSS. It is precisely this type of feature that may prove to be very helpful to students of our Team Sites Branding curriculum. Simply consider the results of including custom CSS on a Master Page without an “after” parameter. The effect may be to produce haphazard, intermittent success as the result of spotty occurrences where the “core” CSS overwrites custom CSS after the custom CSS has been loaded. Remedying this type of error would prove to be otherwise difficult, especially as the problem appears to be intermittent.

Creating a custom CSS need not require the use of expensive tools. Yaroslav Pentsarskyy demonstrates how a free add on for Mozilla FireFox, Firebug, can be used to drill down to a granular level to examine the CSS operating on SharePoint Server 2010 web pages.

If you would like to hear further about how this video tutorial is emblematic of the video instruction on SharePoint that we offer, then please contact us at (630) 786-7026, or Contact Us to further a discussion about our video training content.

As ever, use this link to place an order for an annual subscription to SharePoint-Videos instructional content

© Rehmani Consulting Inc, all rights reserved