How to add your own Style Sheet to brand SharePoint 2010

When starting out with SharePoint Branding.  Your best skill to acquire is CSS.  CSS is the Style sheets used to position, colour and decorate text and other items on a browser page.  Cascading Style Sheets might look a bit daunting in the beginning, especially if your first experience with them is within SharePoint.  A SharePoint 2010 master page has a few style sheets, but the Main Style sheet contains approximately 8000 lines of styling. It’s called corev4.css.  Scary, you think.  The secret is to only overwrite and render the styles you want to see and therefore, you need to call your style sheet, “after” the SharePoint Style sheet.  The only way you are able to do this is by entering the following line within your SharePoint Master page.

First make sure you know which Master page is set as your default.  Usually it would be default.master.  Open the master page in SharePoint Designer.  At the top of your master page you can add a <Sharepoint:CssRegistration>.

Add the following within the <Sharepoint:CssRegistration> tag :

Also remember to first create a style sheet and save it somewhere in a folder such as site assets or in the case below it was saved in the layouts folder. Even if the file is empty at the moment, you still need somewhere to reference to.

Amanda-SP-Brand1

 

When the browser renders your master page, it will render your CSS after the corev4.css.  So even though all the styling from corev4 will also be rendered, only yours will display, if your css are overwriting some of the styling already specified by corev4.

Blog Post by Amanda

One thought on “How to add your own Style Sheet to brand SharePoint 2010

  1. Pingback: Reset style sheet: An Opine | shameem

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s