SharePoint 2010 Branding

2,319 views
2,254 views

Published on

A presentation I did to cover the exam objectives of the branding part of SharePoint 2010 Application Development certification held during a workgroup for the certification at Steria

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,319
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

SharePoint 2010 Branding

  1. 1. Jmk@steria.no@jankristiansenjmkristiansen.wordpress.comJan Maximilian Winther Kristiansen
  2. 2.  Create and apply branding to a SharePoint site This objective may include but is not limited to: applying custom master pages to content pages and application pages, placeholders, page layouts, programmatically working with themes, deploying CSS, CssLink, ScriptLink This objective does not include: graphic design, creating a CSS Reptisjon av Features og Solutions.
  3. 3.  Look and feel Navigasjon User Experience Design
  4. 4.  En master page det som binder hele brandingprosessen sammen. En master page innholder:  User Controls,  Server Controls,  Content Placeholders  CSS-referanser  Script-referanser  Navigasjonselemeter  Ribbon  Web Parts (men ikke Web Part Zones!) Deployes til «Master Page and Page Layout Gallery» To typer Master Pages  System Master Page  Publishing Master Page
  5. 5.  Kan gjøres på 3 måter  GUI  Powershell  C# SPWeb har to properties: public string MasterUrl { get; set; } public string CustomMasterUrl { get; set; }
  6. 6. // Hvordan sette en SPWebs Master Page gjennom kode.using (SPSite site = (SPSite)properties.Feature.Parent){ using (SPWeb web = site.RootWeb) { web.CustomMasterUrl = "/_catalogs/masterpage/custom.master"; web.MasterUrl = "/_catalogs/masterpage/custom.master"; web.Update(); }}
  7. 7.  ASP.NET Page som er hostet i SharePoint Master page settes via MasterPageFile propertyet i Page deklarasjonen.
  8. 8. <%@ Page language="C#" MasterPageFile="~masterurl/MyMasterPage.master" Inherits="…"%>
  9. 9.  NB! Standard URLene i MasterPageFile- deklarasjonen er dynamiske. Men du kan også angi statiske URLer.  ~masterurl/default.master peker til SPWeb.MasterUrl  ~masterurl/custom.master peker til SPWeb.CustomMasterUrl ~site<path> ~sitecollection<path>
  10. 10.  Styrer redaktøropplevelsen i SharePoint WYSIWYG Må assosieres med en Content Type  Flere Content Types har en 1:M relasjon med Page Layouts Page Layouts inneholder Content Placehodere som spesifiserer hvor elementene skal stå i Master Page.
  11. 11.  En Content Placeholder definerer en region for innhold i en ASP.NET master page. Man kan definere en Content Placeholder i en annen Content Placeholder. Content Placeholders må defineres i Master Page, men kan brukes i  Master Pages  Application Pages  Page Layouts
  12. 12. <!-- Tom Content Placeholder --><asp:ContentPlaceHolder id="Empty"runat="server" /><!-- Content Placeholder med standard innholdsom vises om noe annet ikke er spesifisert --><asp:ContentPlaceHolder id="Full"runat="server"> <p>Lorem lipsum dolor sit emet</p></asp:ContentPlaceHolder>
  13. 13.  Filene lastes opp til SharePoint gjennom en Feature.  Typisk legges de til «Style Library». CSS-filen må registreres internt i SharePoint gjennom <SharePoint:CssRegistration /> før den kan brukes.
  14. 14.  Master Pages Application Pages CSS
  15. 15.  Theme-filer (*.thmx) er standard Microsoft Office Themes. Man kan lage themes i PowerPoint. Themes brukes til å gjøre kosmetiske forandringer på SharePoint-løsninger.
  16. 16. SPWeb:public void ApplyTheme(string strNewTheme)ThmxTheme:public static void SetThemeUrlForWeb(SPWebweb, string themeUrl)
  17. 17. // Sette temaet Bittersweet på SPWeb myWebusing (SPSite mySite = new SPSite("http://sharepoint2010/")){ using (SPWeb myWeb = mySite.RootWeb) { myWeb.ApplyTheme("Bittersweet") }}
  18. 18.  Man kan tilpasse CSS til å bruke det gjeldende temaet. Dette gjøres ved å kommentere inn annotasjoner i CSS-filene CSS-filen må legges i  {SharePointRoot}TemplateLAYOUTS1033STYL ESThemable
  19. 19.  ReplaceColor(string themeColor) ReplaceFont(string themeFont) RecolorImage(string startThemeColor, string endThemeColor, optional string grayscaleImageUrl, optional method string method)
  20. 20. /* Stylesheet for bakgrunnsfarge som endres med theme */body{ /* [ReplaceColor(themeColor:"Light2-Lightest")] */ background-color: #fff;}
  21. 21.  Bytte Themes Custom Themes Tilpasse CSS til Themes
  22. 22.  CssLink-controlleren ligger i Master Page. Lager referanser til alle CSS-stylesheets basert på alle kjente stylesheets gjennom SharePoint:CssRegistration. SharePoint:CssRegistration kan brukes i alle Master Pages, Application Pages, eller Page Layouts.
  23. 23.  CssLink  UIVersion CssRegistration  After  ConditionalExpression  EnableCssTheming  Name  RevealToNonIE
  24. 24. <!-- Lister ut all CSS --><SharePoint:CssLink runat="server" Version="4" /><!-- Registrerer en CSS-fil --><SharePoint:CssRegistration name=“<URL>"After="corev4.css" runat="server"/>
  25. 25. <!-- Skrevet ut fra CssLink --><link href="<SHAREPOINTROOT>/corev4.css"type="text/css" rel="stylesheet"/><link href="<URL>" type="text/css"rel="stylesheet" />
  26. 26.  ScriptLink brukes til å importere script-filer. Hvert script som skal importeres har sin egen ScriptLink deklarasjon i Master Page eller Application Page.
  27. 27.  EnableScriptGlobalization LoadAfterUI Localizable Name OnDemand UIVersion
  28. 28. <SharePoint:ScriptLink language="javascript"name="core.js" defer="true" runat="server"/>
  29. 29. <script type="text/javascript"src="/_layouts/1033/core.debug.js"></script>
  30. 30.  Master Pages on Application Pages http://msdn.microsoft.com/en-us/library/ee537530.aspx ContentPlaceHolder Class http://msdn.microsoft.com/en- us/library/system.web.ui.webcontrols.contentplaceholder.aspx SPWeb.ApplyTheme Method http://msdn.microsoft.com/en- us/library/microsoft.sharepoint.spweb.applytheme.aspx CssLink Class http://msdn.microsoft.com/en- us/library/microsoft.sharepoint.webcontrols.csslink.aspx CssRegistration Class http://msdn.microsoft.com/en- us/library/microsoft.sharepoint.webcontrols.cssregistration.aspx ScriptLink Class http://msdn.microsoft.com/en- us/library/microsoft.sharepoint.webcontrols.scriptlink.aspx

×