Google

12 January 2012

kalmstrom.com Tip: Use CSS in SharePoint 2010



CSS (Cascading Style Sheets) is a time saving invention when you work with websites. Most web designers want to use a limited number of fonts and colors on a site, and they also want all lists, heading types etc. to have the same look. Instead of adding the code for this on each page the info can be gathered in a CSS file. When a page has a link to that file, all formatting info in the CSS file will be applied to the page. Changes in the CSS file will apply to all pages that have the link, so with CSS it is easy to try out and change the formatting of a website.

Microsoft Certified Professional logotype
Microsoft Certified SharePoint expert
CSS may also be used with SharePoint, but working with SharePoint is not exactly the same as working with web pages. Our kalmstrom.com CEO has earned all the available Microsoft Certifications for SharePoint 2010, so he knows how to do it. In the demo above he shows how to get started with CSS in SharePoint. This demo is also included in the Tips section of the kalmstrom.com website.

Create the CSS file in SharePoint Designer
First Peter creates a CSS file in SharePoint Designer 2010, and since he wants to keep it very simple he just makes a change of the text color. When a link to that CSS file is added to the SharePoint homepage in addition to all the CSS files already uses by default, the custom styles is layered on top of what comes out of the box, and the text color is changed.

Add the CSS link in the browser
However, it is not possible to just add a link to the new CSS file in an ASPX page because SharePoint will not save it. Instead Peter explains how to edit a SharePoint web part in a web browser and add the link to the CSS file that way.

Expansion of SharePoint usage
Peter is fascinated by the endless possibilities of SharePoint 2010. For several years HelpDesk OSP has been one of the most popular kalmstrom.com products, and we also plan to add SharePoint as an alternative for sharing and storage in more applications. In the future kalmstrom.com will make a much stronger use of SharePoint than today, but I will come back to that in later articles.

6 comments:

  1. would this same process apply for SP2013?

    ReplyDelete
    Replies
    1. Yes, you can use the same method for SharePoint 2013.

      Delete
  2. Anonymous06 May, 2014

    Will this css solution work in Foundation?

    ReplyDelete
    Replies
    1. Parts of it will work, but some of it is much more difficult in Foundation.

      Delete
  3. Thanks for your help!

    ReplyDelete