• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Share point training   branding 2010
 

Share point training branding 2010

on

  • 2,052 views

 

Statistics

Views

Total Views
2,052
Views on SlideShare
1,886
Embed Views
166

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 166

http://johnring.me 166

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Share point training   branding 2010 Share point training branding 2010 Presentation Transcript

    • SharePoint Training
      Branding in SharePoint 2010
    • 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.
    • Branding SharePoint
      Themes
      Cascading Style Sheets (CSS)
      Master pages
      Page layouts
      JQuery and the Client Object Model
    • 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;
      }
    • Via Alternate CSS
      Specified in custom master pages
      Cascading Style Sheets
      <Sharepoint:CssLinkrunat="server"
      DefaultUrl="<% $SPUrl:~SiteCollection/Style
      Library/myStyles.css%>"/>
    • 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
    • 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>
    • Custom master page
      Remove the site logo
      Add custom background image to title header
      Set width of left side bar
      Hands-on Branding
    • 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; }
    • Questions?