Branding SharePoint – Part 2: Creating the Design in SharePoint

This is part two in a multi-part series. The predecessor of this post is Part 1: Designing your SharePoint Site.

In the first part of this series we covered some items to help get you started in creating a comp for your SharePoint site design. Now that you have a design ready to go, it is time to determine how you are going to implement your design.

Master Pages, Themes, CSS, Oh My!

One thing for sure, when it comes to implementing your design, you definitely have options. But which option is best for you?

Master Page

A crowd favorite, master pages have emerged as the new “it” thing in SharePoint design.  Master pages are a feature of ASP.NET 2.0 and allow you to store common page elements, such as a header, content container, and footer, in a single file.  This file is then applied to every content page in your site creating a unified and branded look across the entire site.  From here on out I assume you know a thing or two about master pages, if not, please check out this post first: MOSS 2007 Design Component Relationships and Diagrams.

The benefits to master pages…

  • If your design really deviates from the standard SharePoint look and feel, master pages are for you.  They allow for the most finite control over your page design.
  • Multiple master pages can be created for various site needs, such as home splash screens, sub page designs, regional or divisional designs, etc.
  • You can assign a master page to an entire site, or to a single page, and several options in between.  You have excellent control of where the master page is applied within your site.

The potential issues that you need to know about…

  • Your custom master page will not reach past your standard web pages and affect the application screens (these are the administrative screens peppered throughout the site; you can pick them out by looking at the URL, they always include “_layouts” in the address). For some sites, especially external facing brochureware sites, this isn’t a big deal.  For others, especially internal sites and Intranets, this can present an issue.
  • Creating and editing master pages does require a certain web skill set. You need to know HTML, CSS and be comfortable with ASP.NET and understand what a content placeholder is and how to use them.
  • CSS only based master page designs are a challenge to create! Short of pitching everything provided to you by the application, you will have tables in your design no matter what, and working around those tables and needs for SharePoint will cause you CSS headaches.

How to create a master page

A great way to create master pages is to use SharePoint Designer.  Yes you can use other tools, but SharePoint Designer helps create that bridge between you and your SharePoint site and just makes working with the site a heck of a lot easier. Through either SharePoint Designer or the SharePoint site interface you can add and manage master pages in the Master Page Gallery and apply master pages to your site and site pages.  To create the file in SharePoint Designer you just do a File / New / SharePoint Content / Master Page.  If you don’t use SharePoint Designer, you can use the web interface to upload a master page to the Master Page Gallery much like you would upload a document to a SharePoint document library.

I suggest starting your master page from one of my base master pages.  What I did was strip out all of the extraneous code from default.master (the master page SharePoint uses out-of-the-box) and commented all of the content placeholders.  When you first deploy my base master page, it can be rather alarming since there is no design or layout!  That is ok, this is a great way to start your design.  Add in your design code to the top of the file, and then locate the content placeholders you need in your design.  Move the content placeholder code to the appropriate place in your design code, then hide all of the ones you did not use at the bottom of the file where indicated. It is a puzzle approach and you essentially fit together your code and the SharePoint content placeholders to create your custom master page.

Another approach is to start off with a master page that SharePoint provides (for WSS sites it is only default.master, publishing sites include several other master pages) and then modify the code from there. I personally don’t like this approach because I think it takes more time to create custom master pages this way, and it limits your creativity. When you look at an existing design and try to morph it into your own, you may very well end up with a site design that looks similar to the original.

Using the master page you created

Once the master page has been created, you can do several things with it. Using SharePoint Designer you can set the master page to be used for the site, or you can attach it to a single page. If you have a MOSS site, you can also use the site settings to specify the master page to be used for the site. Make sure you publish your MOSS master page before you use it for testing or production.

Themes

Themes are very useful and provide a more lightweight way to brand your SharePoint site. A theme can change the existing colors and images of a site, but not the layout of the elements in the site design.  A theme does not include any HTML or ASP.NET code, it is only a collection of image files and CSS files. The theme is applied on top of the site, replacing images and CSS styles in the site, essentially re-skinning the site. Themes can be used alone, or in conjunction with a custom master page.

The benefits to themes…

  • Often a theme can handle your design changes for SharePoint. The web page layout for SharePoint uses the standard formula of header, main navigation across the top and a left navigation area. If your design includes the same layout, you may be able to create your design only with a theme.
  • Themes can be used to alter a design to create different variations of a design for departments, divisions or regional sub sites.
  • Themes affect all aspects of a site, including the application screens.

The potential issues that you need to know about…

  • When you apply a theme to a site, any child sites will not inherit the theme application. You have to individually apply the theme to the child sites. This is an out-of-the-box limitation, and like most SharePoint issues, can be worked around programmatically. If this will create an issue, check out some of the solutions available for forcing theme application via Features and other means.
  • When you make a change to a theme, you have to reapply the theme to the site to see the change.
  • When working with a theme, you can only utilize existing CSS styles used in the master page (be it your own or the default SharePoint ones). If there are elements on the page that need to be moved, you will have to use positioning in the CSS styles to shift their layout. You can’t add CSS IDs or class names, so you are limited to what you can do with what is given to you in the master page code.

How to create a theme

Themes are applied to a site in the Site Settings. When a Theme is applied, a copy of the theme is created in the content database and it pops up in SharePoint Designer. This makes for a great way to develop a Theme. When you make a change to any of the files in SharePoint Designer, it will automatically appear in the site. Because of this, SharePoint Designer is a great platform for custom theme development, but I don’t suggest leaving these changes in the content database post development.  When another theme is applied to the site, the previous theme is wiped out (including your changes) and the new theme is put in its place.

So you can create a custom theme in one of two ways. First, just strike out on your own.  You can apply a theme to a site, then open up the CSS file in SharePoint Designer and delete out all of the contents and start writing your own style overrides for the site. Add images in the same way.  Or, you can pick a theme that looks similar to your design (if one exists) then make modifications to that theme in SharePoint Designer until the theme looks like your design.

Don’t forget about the power of CSS. There isn’t necessarily a one to one relationship with elements on the page. If there is a CSS class or ID attached to a page element, you can dictate many things about that element just using CSS, such as display, placement and look. Through CSS, you can actually create a lot of modifications to the page.

Using the theme you created

After you are done tweaking your theme, you can create a more permanent version that lives on the web server and is available to all sites. How to create a theme is very well documented. On the web server in the 12 directory, you create a copy of an existing theme, modify the INF file, theme directory name, and the SPTHEMES.XML file.  Then you can strip out the theme contents, and insert in the CSS and images you created in SharePoint Designer. Recycle the application pool for the SharePoint site or reset IIS, and your custom theme is now available for use.

CSS

Really no matter how you brand your SharePoint site, you will be dealing with CSS. In addition to master pages and themes, you can choose to only do CSS and not use master pages or themes as a vehicle for implementation. You can just make CSS changes and tell the SharePoint site to reference the new CSS file.

The benefit to CSS only solutions…

  • The CSS file does not have to live on the SharePoint web server. You can point the CSS reference to anywhere else on the web. This is ideal if you don’t have access to your web server.

The potential issue that you need to know about…

  • WSS only sites don’t have a site setting to specify an alternative CSS file. You will have to change something else in the site in order to pull in the CSS file.  You can modify default.master, or a specific content page like default.aspx, or include it at the page level in a Content Editor Web Part. A more elegant way to handle this issue is to use a theme. If you don’t have access to the web server, you can assign a theme to your WSS site, empty out the contents of the theme in SharePoint Designer, then point to or include your custom CSS.  Just be sure to keep a back up copy.

How to use your custom CSS

MOSS has a nice feature that allows you to specify an alternative CSS file in the Site Settings. If you have multiple files you want to include, just specify one file in the site settings, then use the import declaration in the CSS file to include additional CSS files.  If you have a WSS only site, see the bullet point above for options.

What about editing CORE.CSS?

Yes, ok you can do this, but I really don’t recommend it.  Here is why:

  • You aren’t supposed to edit the default SharePoint files – basic rule of thumb and changes can throw you into an “unsupported state”.  If you choose to do this anyways, create a back up of Core.css before you make any changes so at anytime you can overwrite your modified file and put yourself back into a supported state.
  • Core.css is HUGE. 15,000 lines of code kind of huge. I say don’t edit this file because dealing with that large of a file is difficult and you will quickly get bogged down trying to keep up with your changes.
  • Core.css isn’t the only CSS file that SharePoint uses. In all, there are 26 CSS files in SharePoint (depending on your installation). So really you aren’t looking at making edits to only one CSS file, you will probably get into making tweaks for 1-5 files out of that 26. It really comes down to management of your changes and knowing what was modified where.  Make it easy and just create a separate style sheet.

You have reached the end!

That wasn’t so bad… a lot of information to absorb, but now you should have a good idea of what solution will work well for you. Now it is just time to roll up your sleeves and start making changes. At the end of the day, SharePoint is just another web application. You create the front end much like any other project… write that code!

Follow up, Part 3: Changing the look and feel of SharePoint components

The next part in this series focuses on how to change how the SharePoint components look, such as navigation, web parts and search. Part 3: Changing the look and feel of SharePoint components – Intro and Web Parts

41 thoughts on “Branding SharePoint – Part 2: Creating the Design in SharePoint”

  1. Great article! At last some very useful information on custom Sharepoint Design on one page! It has taken me alot of time, googling and experimentation with Sharepoint design to learn this myself, as I haven’t yet found a comprehensive source for customised Sharepoint 2007 Design available. I only wish you were running your Sharepoint Design Boot Camps here in Australia. Keep up the good work!

  2. [quote]The potential issue that you need to know about… * WSS only sites don’t have a site setting to specify an alternative CSS file.[/quote] You may not have been talking development, but you can change the alternate css file in code with the SPWeb’s AlternateCssUrl property. I’ve created Branding Features that set this in the FeatureActivated method. SPSite siteCollection = (SPSite) properties.Feature.Parent;SPWeb site = siteCollection.RootWeb;site.AlternateCssUrl = “/_layouts/1033/STYLES/FeatureName/AlternateCssName.css”;

  3. Oh Heather, why oh why have you waited so long to post this. If I had this before my first project I think I could have gained back 2 months of my life.

  4. Heather – I’ve followed your blog for a couple years it seems.I would genuinely like to engage you regarding Master Page design and some of the insight you have and comments you have posted. I have taken on some of the most challenging – Loreal, and many others – and each I did borrowing from the out of the box provided master page in the gallery – I’ve NEVER tampered with the default.master (talking MOSS) here.

  5. Great very useful exactly what I needed to know, I am glad someone recomended me this site to me. Looking forward to part 3.

  6. I have modified a site via a theme and applied a custom style tag to change the background color of the horizontal navigation, but I end up with a tiny table cell to the right of the Site Action button that is not affected by the new style.What tag am I missing to cover this cell?

  7. I don’t have this option in designer, why?File / New / SharePoint Content / Master PageNow what do I do?

  8. I think I love you – the most USEFUL, MEANINGFUL and RELEVANT content on SharePoint Designer – thank GOD I found your blog.Thank YOU

  9. Great very useful exactly what I needed to know, I am glad someone recomended me this site to me. Looking forward to part 3

  10. This is a great compilation of information here, it does make my job alot easier; However I have one question:Where do I find core.css through Sharepoint designer. Because of permissions I’m not able to conect to the web server remote, so it would be great if I could edit it in the same way I edit pageLayout.css or other style sheets.. But I cannot find it..

  11. hi, you have a greate stuff in your blog.I have a question, it seems that once I saw master page design pack (like an images bank) for sale, but cann’t find it anymore. do you have any suggestions?

  12. I love your blog! You provide amazingly useful information in an easy to read/understand format.One question though: can you add a picture to a Sharepoint survey without using Sharepoint Designer?Thanks much!

  13. Dear Solomon,I’m a newbie. I just edited the BlackVertical.master file (and the related css files, in the masterpage collection), in SharePoint Designer. I don’t really understand this Check-In… etc. method, i just saved my editings.Okay, I totally finished. When I watch my site, the common BlackVertical design comes up, but – and that’s the tricky part – when I’m log-in with Administrator, I see my design.So can anyone explain how to make my BlackVertical.master visible for anonym users? I don’t really understand this…

  14. Hi KettoTe,Presumably your are logged in when you view your site in your browser, so yes, you will see the changes you have made in Sharepoint Designer. You need to check in your file and publish it to make it viewable to non-autheticated users.Bring up the folder list in Sharepoint Designer (View => Folder List ) and you should see your BlackVertical.master with a green tick beside it, showing that is the file you are working on?Right click on BlackVertical.master, choose “check in” and select the radio button “Publish a major version”. If you bring up your page in your browser without logging in, you should now see your changes.Hope this is the info you needed!

  15. I am trying to edit aspects of the survey; I want to change the background color from blue to white or change the font from black to white, but I am unable to find where to do it!

  16. I would genuinely like to engage you regarding Master Page design and some of the insight you have and comments you have posted.

  17. Summer Mayer, did you get an answer to your question?”can you add a picture to a Sharepoint survey without using Sharepoint Designer?”

  18. Thanks so much for your posts. Have you found a way to override the default theme on the “Operation In Progress” pages? It seems the theme css doesn’t get applied for these pages; even the alternate css doesn’t get applied…

  19. I’ve also been trying to figure out a way to let users customize the appearance of surveys more, along with Shamen and Summer Meyer. So far I’ve come up empty-handed. Anyone else figure out if you can modify a survey template to at least allow rich-text for question descriptions (not question responses)?

  20. Do you know of anyone who creates additional masters outside of the main themes provided with MOSS 2007? It seems to me there are many other look/feel changes that could be made without destroying the base menu structure of sharepoint but still go way beyond what’s there in themes out of the box which to me are kind of boring. Thoughts??

  21. Hi HeatherI am trying to set up an internal sharepoint portal and all I need to do is change the color scheme to some specific colors (that are not in any of the themes that ship with MOSS). What is the best way to approach this? I am using Sharepoint Designer. I tried copying all of your code in your reference then edited and changed all the colors, but it only affects part of the page.Thanks in advance for any helpAlso – where is core.css kept?

  22. Custom Navigation: Heather, I’m currently working on a MOSS implementation for our intranet. The one mystery that I am currently fighting with is how to “brand” the global navigation and get it to fit inside my darn template! Am I better off creating my own custom ASP Menu object and populate it with the nav items I want?? Your base master page was a great help in this. I was able to take an HTML/CSS template that I put together and add in the SharePoint code, it works wonderfully but looks are not quite where I want it just yet! 🙂

  23. “CSS only based master page designs are a challenge to create! Short of pitching everything provided to you by the application, you will have tables in your design no matter what, and working around those tables and needs for SharePoint will cause you CSS headaches.”Is this still true Heather with the new ver?

  24. Hi Heather,Thanks for a wonderful article, I would really appreciate if you can let me help me following 2 queries:1. For a WCM site, is it necessary to have a theme, can a CSS file specified in the alternate CSS file location be good enough.2. Can you attach a CSS file to Page Layouts also, i.e. Master Page will use a CSS file and some of the overriden styles would be defined in other CSS file, can this be attached to Page Layouts so that different WCM content Pages can have different look and feel depending on the Page Layout used.ThanksMB

Comments are closed.