[SPC14] // Customizing your SharePoint sites using the SharePoint Theming Engine

mail de Christian . Session du Mardi 04/03/2014 à 13h45

Speakers
Lionel Robinson – Program Manager @ Microsoft Jonathan Keslin – Senior Software Development Engineer @ Microsoft

Résumé
Cette session est faite pour les intégrateurs 😉 Elle expose les mécanismes du moteur de thèmes de SharePoint qui permet de colorer une image de background, de foreground, remplacer des couleurs et des fonts dans le CSS grâce aux composed looks et ce plutôt que de faire des CSS custom. Notamment pour ce qui n’est pas publishing.
Compliqué de retranscrire cette session car c’est très graphique et les méthodes en anglais se comprennent mieux avec une image qu’avec du texte.

// DEMO Theming overview
Il montre change the look avec le design gallery.
Ça commence mal, Office 365 a décidé de ne pas répondre.
Il explique qu’un CSS themifié est composé d.une partie de CSS non themifié et les fichiers de configuration du thème (spfont, spcolor background image). Cela permet alors de générer un CSS themifié stocké en base de données.
On commence par spécifierl es CSS non themifiés. Ensuite le système va les parcourir pour remplacer les parties à theme avec les valeurs des fichiers spcolor.
On a dans le CSS des directives du type ReplaceColor() qui permettent d’être transformées avec les spcolor.
L’intérêt d’utiliser ce système est de gérer dans nos applications, le respect du thème appliqué au site.
Les CSS spécifiques définissent des dépendances sur le DOM qui risquent d’être compliqués à gérer.

// Recoloring
Tinting, blending et filing sont les différents concepts dans la recoloration.
RecolorImage permet de colorer des images selon ces méthodes.
On peut recolorer différentes zones de l’image différemment avec includeRectangle.
Cela est pour les background dans le CSS Pour les img, on utilise le src comme attribut CSS. Puis hasOverride dans recolorimage avec l’attribut detach:true pour dire de ne pas confondre avec une image utilisée pour un background.
Côté asp.net on utilise themedforegroundimage dans l’assembly SharePoint.
L’alternative en C# est d’utiliser SPUtility.GetThemedImageUrl. L’équivalent existe en JS pour des vues en CSR.

// theming site logo
Il est possible de rendre le logo themifié.
Il utilise un logo alternative contoso bleu.
Il ouvre le CSS dans la style library avec SPD. Va dans themable et crée une CSS Contoso.css.
Il déclare des attribut src sans classe sans rien décoré en /**/ RecolorImage().
Son recolorImage reprend la clè BodyText avec la method Filling.
Il publie son CSS et le référence dans la MasterPage.
Il récupère son control SiteLogoImage et lui met un ThemeKey contosologo qu’il a déclaré dans son fameux CSS.
En changeant le composed look il voit que son logo bleu devient de la couleur de son nouveau thème.

// Using fonts schemes and Webfonts.
Il montre comment on peut utiliser des polices spéciales.
Web safe VS webfonts : on peut aller sur les web safe fonts qui sont classiques et safe pour nos sites mais on peut utiliser aussi les webfonts qui sont téléchargées avec la page.
Il montre maintenant un spfont où on peut déclarer simplement des web safe fonts. Mais on peut déclarer des webfonts avec les attributs eotsrc ttfsrc et les autres attributs correspondant aux différentes extensions de webfonts existantes.

Christian

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s