Theme

Tous les sites mis à jour vers Plone 4 doivent utiliser un nouveau thème. Il y a différents moyens de le faire.

Dans tous les cas, si on modifie les fichiers css, il faut accéder au site par un serveur de debug. Si on accède par un serveur normal le cache css n'est pas mis à jour à chaque modification et on ne voit pas ce qu'on a éditer. Ceux qui ont besoin d'un accès par un serveur de debug à leur site peuvent m'en faire la demande.

Plone.org

On peut trouver un thème tout fait sur Plone.org, quitte après à le modifier un peu si on a envie. Il faut impérativement choisir un thème annoncé comme compatible avec Plone 4, 4.1, ou un autre 4.x.

subskins

subskins est un module qu'on peut installer sur son site Plone. Ce module permet de se faire un thème très rapidement en choisissant une palette de couleurs (ATTENTION! l'auteur adore les couleurs criardes!!) et des sous-thèmes pour différentes parties du site.

plone.app.theming

L'option la plus puissante mais aussi la plus longue à mettre en place. Développé initialement séparément dans le projet Diazo, le module est maintenant intégré dans Plone. Il permet de prendre n'importe quel page web et d'en faire un thème Plone. Dans cet exemple, l'auteur prend une page du site du 10 Downing Street et en fait un site Plone. En gros le principe de Diazo est de travailler avec deux pages html. Une page html est fixe, et appelée "theme" (une page du 10 downing street dans cet exemple) et l'autre page html est celle crée par Plone, appelée "content". Un fichier xml (appelé rules.xml) définit des règles qui disent à Diazo quelles parties du thème doivent être remplacées par telle ou telle partie du contenu. On peut ainsi placer un site Plone dans n'importe quelle structure html. Voici plusieurs conseils à suivre si vous voulez créer un thème avec plone.app.theming:

Firebug

Pour créer le fichier de règles, il faut en permanence déterminer comment identifier telle ou telle partie d'une hiérarchie HTML. Parmi les différentes méthodes gérées par Diazo il y a XPath et les chemins CSS. Comme indiqué dans l'exemple du 10 Downing Street, les chemins CSS sont plus simples utiliser. Je conseille aussi d'utiliser Firefox et le module complémentaire Firebug, qui est un vrai plus pour explorer les fichiers HTMLs et donner des chemins CSS. On peut aussi éditer en direct les CSS et voir le résultat en temps réel. C'est un vrai gain de temps.

portal css

Pour les fichiers CSS il y a globalement deux solutions: utiliser uniquement le ou les CSS du thème, ou utiliser le service portal css de Plone. La première solution est la plus simple, mais nécessite de fouiller dans les CSS de plone et copier/coller les parties dont on a besoin (comme dans l'exemple du 10 Downling Street). Le service portal css est plus compliqué à mettre en place mais a quelques avantages:

• les différents fichiers css sont comprimés en un fichier par Plone, qui est donc plus rapide à envoyer au client, et avec toutes les redondances supprimées
• on peut controller simplement quels fichiers css on veut utiliser ou ne pas utiliser dans le site
• quand on installe un module complémentaire (gallerie par exemple) s'il y a des éléments CSS qui doivent être présents c'est automatiquement géré par Plone et on a pas besoin de les chercher puis les copier/coller dans le fichier css du thème.