Last Saturday I presented on SharePoint 2010 Branding at Richmond Code Camp. Since I went to the trouble of putting together a slide deck and a demo, I thought I would go ahead and share it on our blogs. The objective is to simply share my experiences with branding a publishing site template in SharePoint 2010. Hopefully you'll learn something from my post, and benefit from my explorations into making SharePoint look... well, less like SharePoint. ;)
I'll attach my slide deck for your reference, so feel free to download and read later. I'll not go into any of the slides, but instead jump right into my demo.
For this demo, my goal was to see just how complicated, or simple, depending on your comfort level, it is to make use of a free CSS template that one could download off any one of those online free template resources out there. For my demo, I chose this rather colorful template. You are welcome to view it or download it at http://www.templatemo.com/preview/templatemo_255_multi_color.
In addition, I downloaded Randy Drisgill's starter master page as opposed to starting from scratch. You can download it at http://startermasterpages.codeplex.com/. Randy has done a great job of commenting out each content placeholder, delegate control, and other markup elements. This certainly helped me figure out the purpose of the different elements on the master page.
I'll attach a zip folder with all the source, so if I leave out some info and you find yourself lost, feel free to take a look at the files provided. In order to reduce the length of this post, i will omit including screenshots as I progress through the tasks.
The first task is to create our site collection. We'll use a blank site template, found on the collaboration tab on the site templates section. Thereafter, I went ahead and activated the SharePoint Server Publishing Infrastructure found on the list of Site Collection Features. Next I activated the SharePoint Server Publishing feature found on the Manage Site Features listing. Right, now we have a publishing site collection, with access to our master pages, page layouts, and of course the Style Library. We'll be doing most of our work in SharePoint Designer 2010. Once your site collection is built, go ahead and open it in SharePoint Designer 2010.
Go ahead and create a new folder in the Style Library folder, but within the language folder. This is important if your site is used for different languages. Name that folder as the name of your site collection. Within that folder, create 2 new folders, one for your images and the other for your styles. Upload the images from the CSS template into the images folder and check them in at the same time. Next upload the CSS style sheets into the Styles folder. You are welcome to rename the style sheet accordingly. Remember to check out the style sheet and update the images paths to the Images folder.
Now, let's create a blank master page in the _catalogs folder and name it accordingly. Next, add a CSS Registration element in the head of the master page and link to your custom style sheet.
<span class="sc2"><span class="sy0">=</span><span class="st0">"corev4.css.css"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"CssRegistration7"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"<% $SPUrl:~sitecollection/Style Library/en-us/NameOfSite/Styles/custom.css %></span></span>" runat="server"><span class="sc2"><span class="sy0">/</span>sharepoint:cssregistration></span>
In order to change the layout of the master page, you'll need to insert the markup from the CSS template and then go through the careful operation of moving around content placeholders as desired. One word of warning here: Do not delete content placeholders if you don't think you'll be needing them. Instead, rather place them in a hidden panel at the bottom of the master page. This process of massaging the master page may take some time to achieve the correct result. I typically go through this exercise by moving one element around at a time and then testing in the browser. Look out for duplicate content placeholders if pasting from a different master page.
For my demo, I butchered the master page template, breaking out parts of the ribbon as well. This meant that I would have to manipulate the ribbon functionality to ensure the ribbon was called when a particular page element is in focus and automatically opened the ribbon. I certainly can't take credit for the jQuery script to make this happen. The credit goes to James Baca, a fellow CapTech lead consultant. To open the ribbon manually, I included a toggle button to show and hide the ribbon. You are welcome to use the ribbon script, but at your own risk. I offer no guarantees to its use. If you have problems with it, feel free to comment and perhaps the community may be nice and suggest fixes. I may not have the time to respond.
To get the markup from the CSS template to behave itself in the master page, I needed to work the CSS styles from the template, including a number of core style overrides. A word of warning: Under no circumstances should you edit the corev4.css. Rather make a copy and edit that. Alternatively, I created a separate style sheet and copied in the corev4 styles that I needed to override. When you add an additional CSS Registration link, be sure to set the After property to the name of your custom style sheet.
Finally, you'll need to set your new custom master page as the default master page. This can be done in 2 ways: in the browser and in SharePoint Designer. From the browser, navigation to site settings, look and feel, master page, and select your custom master page. In SharePoint Designer it's a little easier. Simply right-click on the master page file name and set as default.
Having done that, once you return to your default page, your newly branded master page should display. The last thing to do is create a new welcome page. Go back to SharePoint Designer, right-click your custom master page, and select New from Master Page. Name and save this new page. Add your desired markup to this page. See my source for more info. It will inherit the branding from your master page. I created a separate CSS style sheet for this page. Don't forget to add the CSS Registration link in the master page to this style sheet.
Thereafter, as before, we need to set this page as the default welcome page. Again, you can achieve this through the browser or from SharePoint Designer. From the browser, go to Site Settings, look and feel, select Welcome Page, and then browse to your newly created page layout. From SharePoint Designer, simply right-click and select Set as Home Page.
Edit this page layout in the browser and add a content editor web part to each of the web part zones that you defined when you included your markup in your page layout. To each web part, paste in the markup from the CSS template for each div, remembering to set the image paths to your style library. Once done, save and publish the page and voila! You should see the same as in the screenshot below.
Demo Site: The completed master page
Demo Site: The ribbon displayed
Demo Site: SharePoint goodness shown
Thanks for reading! You are welcome to email me if you have any questions.
You are welcome to download the SOURCE FILES here