Branding in SharePoint involves customizing the look and feel, layout, and user experience of a SharePoint site. This is done through themes, CSS, master pages, and page layouts. Themes apply color palettes across sites. Master pages structure the overall content placement, and page layouts map actual content to master page placeholders and can change styling. Hands-on examples demonstrate how to remove the site logo, add a custom background image, and set the width of the side bar through CSS and HTML elements in the master page.

1. SharePoint Training Branding in SharePoint 2010

2. What is branding? In general, branding is the customization of a site to convey a business’s corporate identity, through use of color, style, and aesthetic. More specifically for SharePoint, branding involves a site’s look and feel, the overall user experience, and how site pages are laid out.

3. Branding SharePoint Themes Cascading Style Sheets (CSS) Master pages Page layouts JQuery and the Client Object Model

4. Themes apply a color palette across a site Themes files can be exported from Office 2010 and imported into SharePoint Theme colors can be specified via CSS Themes .pageTitle { /* [ReplaceColor(themeColor:"Accent2")] */ color: #8A2A1C; }

5. Via Alternate CSS Specified in custom master pages Cascading Style Sheets <Sharepoint:CssLinkrunat="server" DefaultUrl="<% $SPUrl:~SiteCollection/Style Library/myStyles.css%>"/>

6. Master pages structure the overall placement of content Content Placeholders allow page layouts to specify content Master Pages http://msdn.microsoft.com/en-us/library/gg430141.aspx

7. Page layouts map actual content to master page content place holders Page layouts can change styling, omit content, and include web parts Page Layouts <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"> <imgsrc=“/_layouts/images/blank.gif" width="1" height="1" alt="" /> </asp:Content> <asp:ContentContentPlaceHolderId=“ PlaceHolderBodyAreaClass" runat="server"> <style type="text/css"> .ms-bodyareaframe { padding: 0px; } </style> </asp:Content>

8. Custom master page Remove the site logo Add custom background image to title header Set width of left side bar Hands-on Branding

9. Remove the site logo Set width of left side bar Hands-on Branding <td class="s4-titlelogo“ style=“display:none;”> <SharePoint:SPLinkButtonrunat="server" NavigateUrl="~site/" id="onetidProjectPropertyTitleGraphic"> <SharePoint:SiteLogoImagename="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/images/siteIcon.png" runat="server" CssClass="hidden"/> Add custom background image to title header <div class="header-Background" /> <div class="s4-title s4-lp ribbon-background"> <div class="s4-title-inner"> body #s4-leftpanel { width: 240px; float: left; } .s4-ca { margin-left: 250px; }

10. Questions?