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

1. Jmk@steria.no
@jankristiansen
jmkristiansen.wordpress.com
Jan Maximilian Winther Kristiansen

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.  Look and feel
 Navigasjon
 User Experience
 Design

7.  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

8.  Kan gjøres på 3 måter
 GUI
 Powershell
 C#
 SPWeb har to properties:
public string MasterUrl { get; set; }
public string CustomMasterUrl { get; set; }

9. // 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();
}
}

10.  ASP.NET Page som er hostet i SharePoint
 Master page settes via MasterPageFile
propertyet i Page deklarasjonen.

11. <%@
Page language="C#"
MasterPageFile="~masterurl/MyMasterPage.master"
Inherits="…"
%>

12.  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>

13.  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.

15.  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

16. <!-- Tom Content Placeholder -->
<asp:ContentPlaceHolder id="Empty"
runat="server" />
<!-- Content Placeholder med standard innhold
som vises om noe annet ikke er spesifisert -->
<asp:ContentPlaceHolder id="Full"
runat="server">
<p>Lorem lipsum dolor sit emet</p>
</asp:ContentPlaceHolder>

17.  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.

18.  Master Pages
 Application Pages
 CSS

19.  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.

20. SPWeb:
public void ApplyTheme(string strNewTheme)
ThmxTheme:
public static void SetThemeUrlForWeb(SPWeb
web, string themeUrl)

21. // Sette temaet Bittersweet på SPWeb myWeb
using (SPSite mySite = new SPSite("http://sharepoint2010/"))
{
using (SPWeb myWeb = mySite.RootWeb) {
myWeb.ApplyTheme("Bittersweet")
}
}

22.  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

23.  ReplaceColor(string themeColor)
 ReplaceFont(string themeFont)
 RecolorImage(string startThemeColor, string
endThemeColor, optional string
grayscaleImageUrl, optional method string
method)

24. /* Stylesheet for bakgrunnsfarge som endres med theme */
body
{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
background-color: #fff;
}

25.  Bytte Themes
 Custom Themes
 Tilpasse CSS til Themes

26.  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.

27.  CssLink
 UIVersion
 CssRegistration
 After
 ConditionalExpression
 EnableCssTheming
 Name
 RevealToNonIE

28. <!-- Lister ut all CSS -->
<SharePoint:CssLink runat="server" Version="4" />
<!-- Registrerer en CSS-fil -->
<SharePoint:CssRegistration name=“<URL>"
After="corev4.css" runat="server"/>

29. <!-- Skrevet ut fra CssLink -->
<link href="<SHAREPOINTROOT>/corev4.css"
type="text/css" rel="stylesheet"/>
<link href="<URL>" type="text/css"
rel="stylesheet" />

30.  ScriptLink brukes til å importere script-filer.
 Hvert script som skal importeres har sin egen
ScriptLink deklarasjon i Master Page eller
Application Page.

31.  EnableScriptGlobalization
 LoadAfterUI
 Localizable
 Name
 OnDemand
 UIVersion

32. <SharePoint:ScriptLink language="javascript"
name="core.js" defer="true" runat="server"/>

33. <script type="text/javascript"
src="/_layouts/1033/core.debug.js"></script>

35.  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