Brand Parts of Your SharePoint 2010 Site - dummies

Brand Parts of Your SharePoint 2010 Site

Publishing sites in SharePoint 2010 were created to be branded and include some predefined master pages and page layouts. They also allow you an option to link to an alternate style sheet. This option is helpful if the out-of-the-box files get you most of the way there, but you still want to change some design styles including minor positioning, sizes, and colors.

You do need CSS (Cascading Style Sheets) skills to create this alternate style sheet, but you don’t have to use third-party software to edit the pages of the site.

The following list features the parts and pieces of a SharePoint branding effort. Go down this list to make sure you cover all the bases:

  • Master pages: The theme and general page template layout. One of the most common master layouts is the inverted L with the header and global navigation on top and secondary navigation on the left. The master page contains HTML, linked or embedded CSS, and SharePoint placeholders for specific SharePoint items.

    Think of the master page as generally the header, top and left navigation, search, and footer. You don’t need to use all these elements, but if you need any of them, the master page is the place to define their placement, and the CSS files associated with the master page is the place to style them.

    Master pages can be applied to the public view pages and/or the system pages. System pages like the library views and the Site Settings page may not look as good in your master as the public view of pages. Designers can opt to create separate master pages for system pages or keep the default.master with a complementary theme.

  • Style sheets: CSS styles in either separate files or embedded in the master and/or page layouts.

    Style sheets can contain many, many rules. Sometimes the styles are separated into different sheets to make it easier to group large numbers of rules, for instance, all the rules for SharePoint controls. Often a master page has an associated style sheet for its look and feel that overrides the out-of-the-box styles SharePoint provides for those elements in a master page.

    The cascading in CSS indicates that the same rule can be repeated at different levels. If several instances of the style are applied — such as a linked file to the master, but the same style with different properties embedded in the page layout — the embedded rule wins or applies.

    So, for example, Microsoft can describe the visual elements via its core SharePoint style sheets, but you might override them with your style sheet linked to the master and again override them on a specific page.

  • Images: Graphics used for the logo, header, top navigation, left navigation, and so on.

    These images are files used along with CSS to create the master template and aren’t frequently, if at all, changed after the design is complete. They may include a background for the header, normal and other images for the top navigation, footer logos, and so forth.

    Unlike the images you may use in the content of the page, locate them in the Style library similar to the out-of-the-box master images so that only users with specific permissions can locate them.

  • Page layouts: Defined layouts with specific content containers.

    Master pages work with page layouts to provide the look and feel of the publishing page. The master contains the template branding elements, but the page layouts provide the arrangement and type of content containers in the content area of the page. Although a master page is generally applied site by site for all the pages, each publishing page has a layout that can be changed.


  • Themes: SharePoint site color schemes.

    Depending on what you brand in your site, you may still want to change or customize a theme in addition to the master page because the theme is far-reaching and the color scheme is applied to menus, system pages, the Ribbon, and so forth that visitors may not see, but your content editors will. Choosing a complementary color scheme completes the package.