JCMS permet l'intégration de chartes graphiques complexes comportant plusieurs déclinaisons. Ceci nécessite de répartir les styles sur plusieurs fichiers ayant des rôles bien précis et de paramétrer correctement JCMS pour qu'il les prenne en compte.

Cet article fait un tour d'horizon de tout ce qu'il est nécessaire de prendre en compte pour intégrer correctement une charte graphique complexe en utilisant les CSS :

1. Organisation des fichiers
2. CSS spécifiques pour les portlets et les skins de portlets
3. CSS spécifiques pour les gabarits d'affichages détaillés
4. Exemple : Démo de JCMS

1. Organisation des fichiers

Il arrive fréquemment qu'un site composé de plusieurs sous-sites ait besoin de garder un aspect graphique cohérent sur chacun d'entre eux, tout en autorisant certaines déclinaisons, comme par exemple des couleurs différentes. C'est dans cette optique que JCMS permet d'associer une feuille de style spécifique à chaque portails. Ces feuilles de styles nécessitent néanmoins d'être organisées judicieusement pour éviter, par exemple, de refaire la même déclaration plusieurs fois.

Répartition des fichiers CSS

Les fichiers CSS dans JCMS sont répartis dans le dossier css/ de la webapp.

Dossier : css/jalios/

Ce dossier contient les fichiers CSS utilisés par JCMS. Ils ne doivent pas être modifiés.

Dossier : css/portal/

Ce dossier contient les fichiers CSS qui peuvent être associés à un portail.

Lors de l'édition d'un portail, JCMS propose un menu déroulant avec la liste des fichiers de ce dossier, permettant de choisir celui qui doit être appliqué.

Autres fichiers dans css/ et css/verticalMenu

Les autres fichiers présents dans le dossier css/ sont des feuilles de styles paramétrables permettant de changer l'apparence de certaines fonctionnalités de JCMS sur l'ensemble des pages.

Les fichiers présents dans le dossier css/verticalMenu ont la même portée et peuvent également être modifiés, mais ils s'appliquent au gabarit de la portlet Navigation permettant de générer des menus verticaux. Il y a, dans ce dossier, un fichier contenant les styles correspondant à la forme du menu et d'autres correspondant à des choix de couleurs.

Des fichiers pour chaque niveau de déclinaison

L'ensemble des fichiers CSS dans les dossiers décrits précédemment permettent d'intervenir à différents niveaux du site.

Voici une description de la manière de déclarer des styles en fonction de la portée qu'ils doivent avoir.

CSS globales (css/custom.css)

Les styles déclarés dans css/custom.css s'appliquent à la totalité des pages du site. Ce fichier est destiné à déclarer des styles spécifiques qui ne sont pas dépendant du sous-site ou du portail dans lequel ils sont appliqués.

CSS de portails (css/portal/...)

Les CSS de portails permettent de définir des styles différents pour un même élément en fonction du portail affiché. Il est ainsi possible de changer l'aspect d'une même page portail en changeant le fichier CSS auquel elle est rattachée.

Les fichiers CSS de portails servent également à définir des CSS de portlets et de skins de portlets.

Surcharge de styles

Les styles dans le fichier CSS rattaché au portail permettent de surcharger des styles définis à d'autres niveaux. Il faut, dans ce cas, faire attention à l'ordre avec lequel sont chargés les fichiers CSS dans les pages HTML générés :

1. Les CSS propres à JCMS (pratiquement tous les fichiers dans css/jalios/)
2. custom.css
3. Le fichier CSS du portail courant

Les styles définis dans le fichier CSS du portail peuvent surcharger les styles définis dans custom.css qui peuvent surcharger les styles propres à JCMS.

Attention, donc, à ne pas essayer de surcharger un style défini dans les CSS de portail avec un style défini dans custom.css, car cela ne fonctionnera pas.

Note : Il est possible, à titre exceptionnel, de palier à ce problème en utilisant la commande CSS !important... Mais elle doit être utilisée avec précaution.

Une utilisation courante de ce principe de surcharge est de déclarer un style pour l'ensemble du site dans custom.css et de faire juste une exception sur une page particulière en redéclarant le style avec des propriétés différentes dans le fichier CSS du portail.

Exemple : Pour réaliser un site ayant un fond de couleur bleu sur toutes les pages, sauf sur une rubrique particulière ayant un fond de couleur jaune, il faut distinguer la déclaration du style bleu pour tout le site de la déclaration du style jaune pour un portail. On imagine dans cet exemple que le portail en question est rataché à un fichier CSS qui lui est propre "myPortal.css".
On aura alors les déclarations suivantes :
custom.css -> body { background-color: blue; }
myPortal.css -> body { background-color: yellow; }

Gestion des niveaux

Il peut être intéressant d'utiliser les possibilités de liens entre fichiers CSS (commande @import) pour gérer efficacement une organisation de fichiers gérant les CSS du site à différent niveaux.

Le but est d'obtenir une hiérarchie de fichiers CSS :

• jalios.css (styles par défauts de JCMS)
• siteA.css (niveau site ou sous-site)
• portailA1.css (niveau portail)
• portailA2.css
• siteB.css
• portailB1.css
• portailB2.css

Dans cette organisation, les fichiers directement liés au portails sont "portailXy.css" qui contiennent un import de leur fichier "siteX.css" respectif, qui lui même importe le fichier jalios.css.

De cette façon, les CSS de portails ne contiennent que ce qui leur est réellement spécifiques et les styles par défaut des portlets et des skins standards sont conservés.

2. CSS spécifiques pour les portlets et les skins de portlets

JCMS utilise une syntaxe particulière dans les fichiers CSS de portails permettant de définir des jeux de styles interchangeables pour les portlets et les skins.
Concrètement, cela signifie que pour chaque type de portlet il est possible de définir plusieurs jeux de styles portant un nom (style1, style2, etc.). Par la suite, le webmestre d'un portail peut choisir, pour chaque instance de portlet, le jeu de styles qu'il veut appliquer parmi la liste qui lui est proposée. Le même mécanisme est possible avec les habillages.

Le principe de cette syntaxe consiste à intégrer des balises XML dans des zones de commentaires du fichier CSS. Vous pouvez vous inspirer du fichier css/portal/jalios.css dont voici, pour exemple, une version raccourcie :

/*  */

/* -------------------------------------------------------------------- */
/* ||||||||||||||||||| NAVIGATE VERTICAL MENU ||||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */

@import url("../verticalMenu/verticalMenuBlue.css");

/* -------------------------------------------------------------------- */
/* |||||||||||||||||||||||| NAVIGATE CSS |||||||||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */

/*  */
.PortletNavigate_White                    { font: bold 10pt arial,helvetica,sans-serif; color: white;}
.PortletNavigate_White TD                 { font: bold 10pt arial,helvetica,sans-serif; color: white;}
.PortletNavigate_White TD A               { font: bold 10pt arial,helvetica,sans-serif; color: white;}
.PortletNavigate_White .locationPrefix    { font: bold 10pt arial,helvetica,sans-serif; color: white;}
.PortletNavigate_White .locationSeparator { font: bold 10pt arial,helvetica,sans-serif; color: white;}

/*  */
.PortletNavigate_Black                    { font: bold 10pt arial,helvetica,sans-serif; color: black;}
.PortletNavigate_Black TD                 { font: bold 10pt arial,helvetica,sans-serif; color: black;}
.PortletNavigate_Black TD A               { font: bold 10pt arial,helvetica,sans-serif; color: black;}
.PortletNavigate_Black .locationPrefix    { font: bold 10pt arial,helvetica,sans-serif; color: black;}
.PortletNavigate_Black .locationSeparator { font: bold 10pt arial,helvetica,sans-serif; color: black;}

/* -------------------------------------------------------------------- */
/* |||||||||||||||||||||| QUERY/FOREACH CSS ||||||||||||||||||||||||||| */
/* -------------------------------------------------------------------- */

/*  */
.PortletQueryForeach_Standard P                { }
.PortletQueryForeach_Standard TD               { font-size: 90%; }
.PortletQueryForeach_Standard .abstractDetail  { font-size: 90%; }
.PortletQueryForeach_Standard .PagerLink       { font: bold 9pt arial,helvetica,sans-serif;  }
.PortletQueryForeach_Standard .addNew          { font-weight: bold;  }

[...]

/*  */

Notez la première et la dernière ligne du fichier qui sont très importantes. En effet, JCMS parse ce fichier comme un fichier XML standard...
Notez également la commande @import, toujours située avant la première déclaration de style.

Le principe générale de ce balisage est de déclarer une balise pour chaque jeu de style. Celle-ci doit comporter au minimum les attributs suivants :

• target : défini s'il s'agit de CSS de portlet (SkinItem) ou de skin (SkinBox)
• type : le type de portlet auquel s'appliquent les CSS (pour les CSS de skin, le type doit être "PortletSkinable")
• value : mot clé utilisé dans la construction des classes des balises englobant la portlet
• label : Nom du jeu de style affiché dans la liste proposé au webmestre lors de l'édition de la portlet

L'attribue "value" est très important, car c'est grâce à lui que les bon styles vont pouvoir s'appliquer aux bonnes portlets. Techniquement, lorsqu'un jeu de style est choisi pour une instance de portlet, l'attribut "class" d'une des balises HTML englobant la portlet reçoit comme valeur : TypeDeLaPortlet_value. Par exemple : "PortletNavigate_Black" pour une PorltetNavigate paramétrée pour utiliser le jeu de style "Black".
Cette classe doit ensuite être utilisée dans le sélecteur des styles pour qu'ils ne s'appliquent que sur les portlets qui utilisent ce jeu de style. Par exemple : les styles définis avec .PortletQueryForeach_Black P {...}, s'appliqueront uniquement sur les paragraphes des PortletQueryForeach qui utilisent le jeu de style "Black".

3. CSS spécifiques pour les gabarits d'affichages des contenus

Les gabarits d'affichages détaillés, générés automatiquement par JCMS pour tout type de contenu, contiennent une structure HTML prévue pour être relookée facilement en CSS.
Pour en savoir plus, consultez l'article spécifique à ce sujet : JCMS 5 : Mise en forme CSS des gabarits d’affichage détaillés (FullDisplay)

4. Exemple de mise en oeuvre : Jopale, le site de démonstration de JCMS

Une démonstration de JCMS est disponible en téléchargement sur ce site. Elle met en oeuvre, de façon simple, les conseils décrits précédemment.

Cette démonstration simule un Intranet d'entreprise comportant une partie globale et des intranets spécifiques par direction (Marketing, RH, etc.). Chacun de ses "sous-sites" suit globalement la même charte graphique tout en ayant sa propre couleur dominante. Pour cela, la charte graphique est définie dans le fichier css/portal/intranet.css qui importe le fichier jalios.css pour éviter de redéclarer tous les styles. La couleur dominante, ainsi que certaines exceptions à la charte, sont déclarées dans les fichiers CSS propres à chaque "sous-site" : marketing.css, rh.css, etc. Ces fichiers importent tous le fichier intranet.css et importent également les fichiers css/verticalMenu/verticalMenu[Yellow, Green, Blue...].css qui surchargent ainsi la couleur par défaut du menu de navigation principal...

Conclusion

Tous ces efforts d'organisation, permettent de réduire sensiblement les efforts de maintenance de l'aspect graphique d'un site conçu avec JCMS. Ils permettent aussi de mettre à jour rapidement la charte pour coller aux évolutions du site (ajout d'une nouvelle partie, de nouveaux gabarits de portlets, etc.)