ERYEM Camp de Mars 2014 >> Comment personnaliser un site aux couleurs de votre marque ? 1- Outils grand public 2- Les moyens de l'intégrateur web 3- Accès avancé G.Carlander

1. ERYEM Camp
« Branding d’un site
sur SharePoint online»

2. G.Carlander 2
@GuiLandRover
#IYamAPI
gcarlander@eryem.com
Guillaume CARLANDER
La passion d’une SharePinte 2013, sans pression
Présentation

3. Notre problème
G.Carlander 3
Comment réussir à transformer ce site par défaut…

4. G.Carlander 4
Comment réussir à transformer ce site par défaut…
… En un site vrombissant
Notre problème

5. G.Carlander 5
Transformer la partie contenu du site
Le contenu
⁺ Changement des WebParts
⁺ Editeur HTML inclus
⁻ Aucun accès au style (CSS)
⁻ Pas de Javascript

6. G.Carlander 6
Le design… grand public

7. G.Carlander 7
Le design… grand public
Aspect
• Un changement rudimentaire

8. G.Carlander 8
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.

9. G.Carlander 9
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.

10. G.Carlander 10
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème

11. G.Carlander 11
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="true" previewSlot1="BackgroundOverlay"
previewSlot2="BodyText" previewSlot3="AccentText"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="FFFFFF" />
<s:color name="SubtleBodyText" value="568F80" />
<s:color name="StrongBodyText" value="FFFFFF" />
<s:color name="DisabledText" value="4E6262" />
<s:color name="SiteTitle" value="79D1B3" />
<s:color name="WebPartHeading" value="79D1B3" />
<s:color name="ErrorText" value="F73344" />
…

12. G.Carlander 12
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="true" previewSlot1="BackgroundOverlay"
previewSlot2="BodyText" previewSlot3="AccentText"
xmlns:s="http://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="FFFFFF" />
<s:color name="SubtleBodyText" value="568F80" />
<s:color name="StrongBodyText" value="FFFFFF" />
<s:color name="DisabledText" value="4E6262" />
<s:color name="SiteTitle" value="79D1B3" />
<s:color name="WebPartHeading" value="79D1B3" />
<s:color name="ErrorText" value="F73344" />
…

13. G.Carlander 13
Le design… grand public
Aspect
• Un changement rudimentaire
Look & Feel
• Un design simple, accessible, mais très
limité.
• Création d’un nouveau thème
• « SharePoint Color Palette Tool »

14. G.Carlander 14
Le design… façon intégrateur

15. G.Carlander 15
Le design… façon intégrateur
Rendu
• Intégration de CSS / JS
• Facilement modifiable

16. G.Carlander 16
Le design… façon intégrateur
Rendu
• Intégration de CSS / JS
• TROP facilement modifiable
• Endroit imposé
• Page par page

17. G.Carlander 17
Le design… façon geek!

18. G.Carlander 18
Le design… façon geek!
MasterPage -VS- Page
• Savoir placer son code en fonction de sa portée
• Page > « PlaceHolderAdditionalPageHead »
• Master > « head »
Placement
• Attention au placement
• Vraiment attention au placement
• Vraiment attention au placement
Définition des fichiers
• CSS : <SharePoint:CssRegistration />
• JS : <SharePoint:ScriptLink />
Pour une master, on travaille sur une COPIE
<SharePoint:ScriptLink language="javascript" name=“MyLibrary/JS/jquery-1.3.2.min.js" Defer="true" runat="server"/>
<SharePoint:ScriptLink language="javascript" name=“MyLibrary/JS/MyScript.js" Defer="true" runat="server"/>
<SharePoint:CssRegistration ID="CDGCSS" name="<% $SPUrl:~SiteCollection/CdgRessources/css/cdg60.css %>" After=" corev15.css" runat="server"/>

19. G.Carlander 19
Deep into CSS - JS
Ecrire son CSS
• Attention aux ID / Classes
Ecrire son JS
• Possibilité de « rétro-changement »

20. G.Carlander 20
Deep into CSS - JS
Ecrire son CSS
• Attention aux ID / Classes
Ecrire son JS
• Possibilité de « rétro-changement »
• Faire appel au JS Display Template
function StatusFieldViewTemplate(ctx) {
var _statusValue = ctx.CurrentItem.Status;
if (_statusValue == 'Completed')
{
return "<span style=’background-color : green’>” +
_statusValue + “</span>";
}
if (_statusValue == 'In Progress')
{
return "<span style='background-color : yellow’>" +
_statusValue + "</span>";
}
}

21. G.Carlander 21
Du responsive design !
Solution SharePoint > http://responsivesharepoint.codeplex.com/
? !

22. G.Carlander 22
Merci