Branding SharePoint

By Ryan Keller

February 7, 2012 — (Page 2 of 3)

Now that you have your inspiration, the next step generally is to create a mockup of what the end site will be. This will be helpful later for saving off any custom image files you want to use in the design. Think about the major components of SharePoint: You'll need to account for the ribbon interface; a header area, the top navigation and the left navigation; a place for the search box; and finally the main body area for content. You can use whatever image software you feel most comfortable with.

This article assumes you have done your design and have enough CSS and HTML knowledge to get going. If you have experience with Web design in the past, some of what you know will come in handy, but SharePoint can sometimes be a tricky beast to style. This is because there is a lot going on behind the scenes to render the final HTML output you see in your browser window. Tracking down each little piece to which you’ll apply your custom styling can sometimes take a little extra work, but the end result will be well worth it.

Most of the look of SharePoint is driven by three things: the master page, a page layout, and cascading style sheets. The master page acts as the skeleton of the page, and holds the position of the major components, such as the navigation areas, search, and the ribbon, and controls where the main content of the page will go. The page layout fits within a master page and controls how the main content of the page will look. Finally, CSS is used to add images, colors, text styles, and some positioning to the elements in the master page and page layout.

When you are ready to start your custom branding, you will generally be using SharePoint Designer 2010 to create your custom master page, page layout and CSS. But where should all these components live? Master pages and page layouts live in the Master Page Gallery, which is accessed from the Site Settings Screen (Site Actions > Site Settings > Master Page and Page Layouts). CSS files, along with any custom images that accompany it, go in the Style Library (Site Actions > View All Site Content > Style Library), generally within a folder within the library to keep everything nice and tidy. If possible, you should try to do your branding in a development environment and deploy everything to the production server later.

In SharePoint Designer, you'll start by creating a new master page. You can either start by copying one of the out-of-the-box master pages—v4.master or nightandday.master as a starting point for your new design—or you can create one from scratch. SharePoint requires several placeholders and controls to be present on a master page in order to render properly, so if you are starting from scratch, it is generally recommended to use a starter master page developed by members of the SharePoint community.

For example, SharePoint MVP Randy Drisgill has an excellent starter master page with all the necessary placeholders already on the page. You can wrap these placeholders in your custom HTML and styles.

Pages 1 2 3

Share this link: http://www.sptechweb.com/link/36343

Customizing SharePoint Online Using SharePoint Designer, Part 1 Once you get a handle on SharePoint Online, the question becomes: How can I modify it to suit my needs. First of two parts.

Planning your search strategy is more important than ever Enabling everyone in your organization to find content within seconds creates big ROI potential.

Kapow Software and CapTech partner to automate SharePoint content migration Combination enables customers to cut costs, improve data quality and expedite projects

Comments

03/01/2012 12:51:30 AM EST

Love it! This is a wfednroul and useful concept, with the Monopoly metaphor being particularly useful. The challenge, however, from clients will be as follows: Yeah right. We already run flat out to do the one big bang gorilla' footprint marketing campaign. We simply do not have the resources and time in the day to spread ourselves as thinly as your pico-branding strategy would require 'How do you answer that?

Bosnia and HerzegovinaJosephina

04/22/2012 01:48:11 PM EST

Hi, Do you have a more detailed Agenda or Syllabus for SharePoint Designer 2010 Styling and Branding Week?Trying to didece on full week vs the later 2 days (Days 3 & 4). Thanks!Posted by Nicole on January 12, 2012 at 2:55 pm.

AnguillaGigi

Branding SharePoint

By Ryan Keller

Related Articles

Comments