Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SharePoint Training<br />Branding in SharePoint 2010<br />
What is branding?<br />In general, branding is the customization of a site to convey a business’s corporate identity, thro...
Branding SharePoint<br />Themes<br />Cascading Style Sheets (CSS)<br />Master pages<br />Page layouts<br />JQuery and the ...
Themes apply a color palette across a site<br />Themes files can be exported from Office 2010 and imported into SharePoint...
Via Alternate CSS<br />Specified in custom master pages<br />Cascading Style Sheets<br /><Sharepoint:CssLinkrunat="server"...
Master pages structure the overall placement of content<br />Content Placeholders allow page layouts to specify content<br...
Page layouts map actual content to master page content place holders<br />Page layouts can change styling, omit content, a...
Custom master page<br />Remove the site logo<br />Add custom background image to title header<br />Set width of left side ...
Remove the site logo<br />Set width of left side bar<br />Hands-on Branding<br /><td class="s4-titlelogo“ style=“display:n...
Questions?<br />
Upcoming SlideShare
Loading in …5
×

Share point training branding 2010

2,008 views

Published on

Published in: Technology
  • Be the first to comment

Share point training branding 2010

  1. 1. SharePoint Training<br />Branding in SharePoint 2010<br />
  2. 2. What is branding?<br />In general, branding is the customization of a site to convey a business’s corporate identity, through use of color, style, and aesthetic.<br />More specifically for SharePoint, branding involves a site’s look and feel, the overall user experience, and how site pages are laid out.<br />
  3. 3. Branding SharePoint<br />Themes<br />Cascading Style Sheets (CSS)<br />Master pages<br />Page layouts<br />JQuery and the Client Object Model<br />
  4. 4. Themes apply a color palette across a site<br />Themes files can be exported from Office 2010 and imported into SharePoint<br />Theme colors can be specified via CSS<br />Themes<br />.pageTitle {<br /> /* [ReplaceColor(themeColor:"Accent2")] */ <br /> color: #8A2A1C;<br />}<br />
  5. 5. Via Alternate CSS<br />Specified in custom master pages<br />Cascading Style Sheets<br /><Sharepoint:CssLinkrunat="server" <br />DefaultUrl="<% $SPUrl:~SiteCollection/Style <br /> Library/myStyles.css%>"/><br />
  6. 6. Master pages structure the overall placement of content<br />Content Placeholders allow page layouts to specify content<br />Master Pages<br />http://msdn.microsoft.com/en-us/library/gg430141.aspx<br />
  7. 7. Page layouts map actual content to master page content place holders<br />Page layouts can change styling, omit content, and include web parts<br />Page Layouts<br /><asp:Content<br />ContentPlaceHolderId="PlaceHolderPageImage" <br />runat="server"><br /><imgsrc=“/_layouts/images/blank.gif" <br /> width="1" height="1" alt="" /><br /></asp:Content><br /><asp:ContentContentPlaceHolderId=“<br />PlaceHolderBodyAreaClass" runat="server"><br /> <style type="text/css"><br /> .ms-bodyareaframe {<br /> padding: 0px;<br /> }<br /> </style><br /></asp:Content><br />
  8. 8. Custom master page<br />Remove the site logo<br />Add custom background image to title header<br />Set width of left side bar<br />Hands-on Branding<br />
  9. 9. Remove the site logo<br />Set width of left side bar<br />Hands-on Branding<br /><td class="s4-titlelogo“ style=“display:none;”><br /> <SharePoint:SPLinkButtonrunat="server" NavigateUrl="~site/" <br /> id="onetidProjectPropertyTitleGraphic"><br /> <SharePoint:SiteLogoImagename="onetidHeadbnnr0" id="onetidHeadbnnr2" <br />LogoImageUrl="/_layouts/images/siteIcon.png" runat="server" CssClass="hidden"/><br />Add custom background image to title header<br /><div class="header-Background" /><br /> <div class="s4-title s4-lp ribbon-background"><br /> <div class="s4-title-inner"><br />body #s4-leftpanel { width: 240px; float: left; }<br />.s4-ca { margin-left: 250px; }<br />
  10. 10. Questions?<br />

×