[Tutorial] Comment créer des thèmes personnalisés pour WSS

Ajouter un commentaire décembre 13th, 2008

Bien souvent, pour ne pas dire tout le temps, un intranet doit refléter au mieux l’image et les couleurs de sa société. MOSS et WSS offrent par défaut une belle liste de thèmes (avec de nombreuses déclinaisons de couleurs) mais cela ne correspond pas toujours à nos besoins. Pour pouvoir proposer aux utilisateurs un design vraiment personnalisé et un peu plus sympa, il va falloir créer son propre thème.

Themes WSS

Les thèmes de WSS sont tous stockés sur le serveur a cette adresse :

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

Dans ce dossier, on peut voir un dossier par thème, chaque dossier contenant :

  • Toutes les images utilisées dans le thème
  • Un fichier nommé theme.css
  • Un fichier “nom_du_theme.inf

Pour créer un nouveau thème:

  1. Nous allons commencer par choisir le thème existant correspondant le mieux a nos attentes en termes de couleurs et faire un copier/coller du dossier correspondant
  2. Renommez ce dossier avec le nom du nouveau thème (essayez de faire simple dans le nom, pas d’espaces, etc.…)
  3. Dans ce nouveau dossier, renommez également le fichier “nom_du_theme.inf” avec le nouveau nom
  4. Editez ce fichier et remplacez toutes les occurrences du nom de l’ancien thème par le nouveau. Changez également le numéro de version par un chiffre unique du genre 36547 et sauvegardez le fichier
  5. Il faut ensuite ajouter ce nouveau thème dans la liste des thèmes disponibles sur ce serveur. Cette liste est stockée dans un fichier XML nommé SPTHEMES.xml situé ici :
    C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033
  6. Editez ce fichier et ajouter ce bout de code :

    <Templates>
    <TemplateID>”nom_du_dossier_de_votre_theme”</TemplateID>
    <DisplayName>”nom_qui_va_apparaitre_dans_la_liste”</DisplayName>
    <Description>”la description du thème”</Description>
    <Thumbnail>images/nom_de_la_miniature.gif</Thumbnail>
    <Preview>images/ nom_de_la_miniature.gif</Preview>
    </Templates>

    Pour info, les balises Thumbnail et Preview sont les liens vers les miniatures que vous générerez plus tard quand le thème sera fini et qui doivent faire 375px de largeur maximum.

  7. Sauvegardez le fichier SPTHEMES.xml
  8. Allez dans les paramètres de votre site SharePoint puis cliquer sur Site Theme
  9. Appliquez votre nouveau thème à votre site
  10. Ouvrez votre site avec SharePoint Designer. Vous voyez un dossier dans l’arborescence du site “_themes”. Dans ce dossier, vous avez tous les fichiers de votre thème dont un plus particulièrement qui s’appelle “nom de votre thème”0001.css .
  11. Ouvrez ce fichier et modifiez-le à votre convenance. Les modifications seront directement impactées sur votre site.

    Pour vous aider, vous pouvez consulter la “CSS Reference Chart for SharePoint 2007” de HeatherSalomon (la référence en termes de customisation SharePoint)
    http://www.heathersolomon.com/content/sp07cssreference.htm

  12. Une fois votre design terminé et validé, copiez tout le contenu de ce fichier et remplacez tout le contenu du fichier theme.css dans le dossier de votre thème sur le serveur (C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\votre thème) et sauvegardez le. De même ajoutez toutes les nouvelles images que vous utilisez dans votre nouveau thème dans ce dossier.
  13. Enfin, générez des miniatures du nouveau design (375px de largeur) et placez les dans le dossier des images de layouts (c a d “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES”). Mettez à jour les liens vers ces images dans le fichier SPTHEMES.XML.

15. Voilà c’est terminé, vous pouvez maintenant appliquer ce thème a n’importe quel site de votre serveur SharePoint !

Nouveau Theme


Partagez cet article avec un ami :
bodytext del.icio.us Facebook Google co.mments E-mail this story to a friend! Live StumbleUpon Technorati Wikio Wikio FR YahooMyWeb

Warning: count(): Parameter must be an array or an object that implements Countable in /homepages/5/d173573684/htdocs/myspworld/wp-includes/class-wp-comment-query.php on line 399