css

[SharePoint 2013]–Nouvel outil : SharePoint Color Palette Tool

Posted on Updated on

Avec la sortie de la nouvelle version de SharePoint 2013, nous avons vu (encore) son design général changé. Ce design reprend les principes de Modern UI dictés par Microsoft et repris sur l’intégralité des plateformes : Windows 8, Windows Phone, Xbox.

Nous retrouvons donc dans SharePoint en particulier les Tuiles bien connues, et d’autres un peu moins “Visibles” au premier abord.

SharePoint 2013 apporte également son lot de nouveau thèmes graphiques natifs sur lesquels on peut personnaliser le jeu de couleurs, l’icône, et même la navigation latérale via les materpages oslo.master & seattle.master. Cet éditeur de thèmes permet quand même bien des personnalisations, mais il se peut que cela ne suffise pas !

Dans ces cas là, on peut utiliser le Design Manager permettant d’importer des découpages html pour les convertir en masterpages, les canaux, etc. (voir mon article : SP2013–Design Manager).

 

Pour nous permettre d’aller plus loin, mais sans recourir à SharePoint Designer, aux CSS, aux masterpages, Microsoft nous propose un nouvel outil fraichement releasé : SharePoint Color Palette Tool ! Les prérequis sont Internet Explorer 8 ou supérieur et le Framework 4.5.

Pour ceux qui le connaitraient, pour SharePoint 2010 nous avions Theme Builder renommé Open XML Theme Builder et disponible récemment sur CodePlex : Open XML Theme Builder.

 

Voyons ensemble à quoi cela ressemble !

 

On télécharge l’outil ici : SharePoint Color Palette Tool (1,1Mb).

Et on l’installe (ici sur une machine Windows 8 Enterprise x64 en anglais) :

 

On lance le setup, “Next” :

01

 

On accepte les termes du contrat de licence et “Next” :

02

 

On choisit l’emplacement d’installation, puis “Next” :

03

 

Résumé des information, “Next” :

04

 

L’installation est terminée, on coche “Launch the program”, “Finish” :

05

 

Le programme se lance :

06

 

Premières impressions… plutôt bonnes ! On retrouve sur la gauche un ensemble de contrôles “couleur” avec prévisualisation et code couleur RGB. Au centre, une prévisualisation du résultat (on reprend le thème général de SharePoint 2013) et tout en haut le choix du layout (oslo ou seattle), en dessous un affichage des warnings & erreurs. Sur la droite, un contrôle permet de placer une image en fond, de choisir un jeu de couleurs originel, et au centre un outil permettant de tester le contraste appliqué…

 

Première chose que je vérifie… qu’est-ce que génère cet outil ? En faisant File > Save, on me propose de sauvegarder un fichier *.spcolor :

07

 

Ce fichier spcolor n’est autre qu’un fichier XML :

08

 

Qu’il faudra importer dans SharePoint 2013, pour en savoir plus, direction MSDN : http://msdn.microsoft.com/en-us/library/jj945889.aspx

En fait on retrouve une certaine analogie entre ce fichier spcolor et les css, mais seulement pour la partie couleurs. En effet, on ne retrouve dans ce fichier aucun information sur la masterpage, le layout etc. Donc les paramètres dans l’outil Color Palette ne servent qu’à la prévisualisation, pas au paramétrage du thème en lui-même.

Notons également que dans la zone de gauche, on a des sous items sur lesquels on pourra modifier les couleurs :

09

 

A mon avis, cela va être difficile de faire un jeu de couleur correct dès le premier essai ! Il y a beaucoup de couleurs à paramétrer…

 

Avec 3 ou 4 clics, on arrive à quelque chose… ou pas ! (Notez les warnings…)

10

 

A bientôt !

Advertisements

First step – WSS 3.0 Customization

Posted on Updated on

First, I have to customize web pages which are displayed by WSS 3.0 engine.

I customize masterpage using SharePoint Designer 2007. I have tu disable the top navigation menu. To navigate throw the websites, a special WebPart was developed (a javascript dynamic menu). But you can’t delete this component, yo have to disable using the enable property of the ContentPlaceHolder (to hide it). I disable other ContentPlaceHolders that I don’t want to keep.

Now, the structure of web pages are modified and I have to change the appearance of those, using Cascading Style Sheets (CSS). I copy the original CSS called “core.css” and rename it. I keep it on the original folder. To use it, in SharePoint Designer I defined it as “default masterpage”. With this change, all new websites are automatically using my new masterpage. Now I have to change colors, layout, fonts, background colors, … But be careful! Styles are used everywhere… To find the styles name you can use a web browser toolbar (for ie or firefox). It’s very useful!

Next you can export this site as a template to create a generic model of this site (*.stp == site template). So that you can replicate this website as many time as you want, using you CSS and your modifications.

I hope that this article can help you!