Your SlideShare is downloading. ×
Share point training   branding 2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Share point training branding 2010

1,653
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×