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?