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

1,735
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,735
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />

×