locked
best practises for sharepoint 2010 branding themes or custom css RRS feed

  • Question

  • We need to brand sharepoint 2010 portal.

    I was looking at new thmx files but they do not serve our purpose of really in depth custom styling. What should be the approach for styling master pages, page layouts, web parts in sharepoint 2010? Also thmx files can not be opened like css they are binary files.

    Wednesday, August 11, 2010 9:46 AM

Answers

  • Themes are great if you want to let users change the site's color scheme. If you are branding, you probably would never use them because you don't get absolute control of the colors. The theme defines a palette and the style sheet varies the colors by degrees using formulas.

    For your global styles you should set the site's AlternateCssUrl property. On a publishing site you can do this via the browser on the master pages page.

    For styles that apply to specific layouts or Web Parts, you should create smaller, more targeted, style sheets and register them with the CssRegistration web control. You can include this control in layout, or you can use its static Register method from code. CssRegistration is nice because it supports localized style sheets and also because it prevents duplicate Link elements.

    If you want your designers to have the ability to edit the CSS, deploy it to the Style Library. Otherwise, deploy it to the SharePoint root.

    • Proposed as answer by Doug WareMVP Thursday, August 12, 2010 11:24 PM
    • Marked as answer by Aaron Han - MSFT Tuesday, August 17, 2010 7:14 AM
    Thursday, August 12, 2010 8:14 PM
  • The thmx files can be opened with PowerPoint because they are originally PowerPoint themes. This means you can chose your desired colours for Sharepoint in PowerPoint and save it as thmx. A thmx only redefines the colours of SharePoint's css classes.

    The MasterPage defines the basic page layout of every page that is based on this Master Page.  In a custom master page you have full control about css, the content area and nearly everything.

    Page layouts are templates for publishing pages, the CMS section of sharepoint. They define content areas in edit mode and output rendering. You can add your own css and script to the template so that you can do funny things even in edit mode.

    If you develop custom web parts you have full control about html rendering in the area the web part occupies.

     

    Thursday, August 12, 2010 5:33 PM

All replies

  • The thmx files can be opened with PowerPoint because they are originally PowerPoint themes. This means you can chose your desired colours for Sharepoint in PowerPoint and save it as thmx. A thmx only redefines the colours of SharePoint's css classes.

    The MasterPage defines the basic page layout of every page that is based on this Master Page.  In a custom master page you have full control about css, the content area and nearly everything.

    Page layouts are templates for publishing pages, the CMS section of sharepoint. They define content areas in edit mode and output rendering. You can add your own css and script to the template so that you can do funny things even in edit mode.

    If you develop custom web parts you have full control about html rendering in the area the web part occupies.

     

    Thursday, August 12, 2010 5:33 PM
  • Themes are great if you want to let users change the site's color scheme. If you are branding, you probably would never use them because you don't get absolute control of the colors. The theme defines a palette and the style sheet varies the colors by degrees using formulas.

    For your global styles you should set the site's AlternateCssUrl property. On a publishing site you can do this via the browser on the master pages page.

    For styles that apply to specific layouts or Web Parts, you should create smaller, more targeted, style sheets and register them with the CssRegistration web control. You can include this control in layout, or you can use its static Register method from code. CssRegistration is nice because it supports localized style sheets and also because it prevents duplicate Link elements.

    If you want your designers to have the ability to edit the CSS, deploy it to the Style Library. Otherwise, deploy it to the SharePoint root.

    • Proposed as answer by Doug WareMVP Thursday, August 12, 2010 11:24 PM
    • Marked as answer by Aaron Han - MSFT Tuesday, August 17, 2010 7:14 AM
    Thursday, August 12, 2010 8:14 PM
  • Hi All,

    Thanks for your reply.

    So it seems now we can not use theme (thmx) for all look and feel purpose as it can not be modified to deep.

    In sharepoint 2007 we were using theme to do everything and write css under that theme.

    Now we are moving ahead with cssregistration control approach inside master page and putting that css in 14 hive folders in layouts.

     

    Thursday, August 19, 2010 5:33 AM
  • Does the way of theming from SP2007 (Using designer to alter/create new classes after creating a duplicate theme on the server) not work with SP2010???

    I have not attemtped this yet on 2010, but it worked great on 2007.

     

    Dean

    Wednesday, November 3, 2010 2:57 PM
  • Hi Dean,

    My favorite book on this topic is 'SharePoint 2010 Branding and User Interface Design' by Drisgill et al.

    I have a blog post about how I branded a SharePoint 2010 site with the help of this book:

    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. This post only addresses changing the CSS, and does not address a custom master page where you would customize the layout. I think this is what you were asking for?

    David Andrew Smith
    www.davidandrewsmith.us/


    Thursday, June 30, 2011 8:34 PM
  • ***Moderator Edit: Stop advertising your product!!  You keep saying you can "recommend" this branding product when it's your actual product.  Do not use the forums to sell your wares.  I'm tired of going into every single post and removing your blatant advertisements.***

    Hi Amit,

    there are two major possibilites for branding SharePoint sites. The first one is theming, which can be done very easily with PowerPoint. But theming with PowerPoint has just the possibility to customize the main colors -> but it is the beginning and in my opinion an important step for complete website branding.

    Together with custom css stylesheets, where you have the possibility to change more or less everything what you can not do with theming, you will finally get a fully branded site with your CI.

    However it's not recommended to change or modify the v4.master directly. You should always create an custom.css file to be more flexible, also for future requests. Nevertheless sometimes it's neccessary to modify the v4.master, if so, don't forget to create a copy before :-)

    There is also another link with Blog entries for Theming, CSS masterpage integration, the Ribbon and how to hide it for anonymous users and some stuff more...

    Branding Tips: http://www.nextflow.at/Blog/Lists/Categories/Category.aspx?CategoryId=7&Name=SharePoint Branding

    I can also recommend the following website, with a great overview about the most important SharePoint style classes:

    http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

     

    With this information, you should be able to create a website like you have postet in question 4 :-)

    Good luck!
    Chris


    Christian Handler, MCITP SharePoint 2010 Administration, Plug 'n Play Branding for SharePoint 2010, http://www.nextflow.at
    • Edited by Clayton Cobb Wednesday, September 7, 2011 5:35 AM Removed blatant advertising
    Thursday, July 28, 2011 9:10 AM