Aller au contenu. | Aller à la navigation

Outils personnels

Navigation
Vous êtes ici : Accueil / Aide pour les responsables / La CSS dans Plone / Gérer la CSS dans Plone

Gérer la CSS dans Plone

Où voir les CSS dans Plone?

Les CSS embarquées dans Plone sont visibles via la ZMI dans /portal_css; la pile que vous voyez, de haut en bas, correspond à l'ordre dans lequel sont lues les CSS, donc la dernière tout en bas de la liste est la dernière lue
Voir le champ CSS Media : all/screen/media

Voir le contenu des CSS

Pour voir le contenu d'une CSS, cliquez sur l'onglet "Merged CSS composition" puis sur le nom de la CSS

Comment modifier une CSS existante ou ajouter sa propre CSS ?

TRES IMPORTANT : commencer par mettre le mode debug (cocher en haut puis enregistrer tout en bas de la page) dans /portal_css/portal_css; sinon, vos modifications ne seront pas prises en compte à cause du cache !

Le principe général de Plone consiste à ne pas pouvoir modifier un fichier existant mais à en faire une copie (customization) qui sera interprétée par le navigateur en fin de processus, donc qui fera foi. Pour la CSS, vous avez plusieurs stratégies possibles :

    1. Customiser un fichier css
      1. trouver dans quel fichier CSS la css originelle est présente : utiliser Firebug ou Webdeveloper (par exemple) pour trouver le fichier css, puis faire une recherche sur son nom pour voir où il est dans la ZMI (par exemple dans portal_skins/plone_styles, mais il peut également se trouver ailleurs, par exemple dans un dossier de produit créé dans portal_skins ...)
      2. une fois le fichier trouvé, le customiser en cliquant sur le lien ad-hoc; une copie est faite dans portal_skins/custom
      3. modifier la css à votre guise
    2. Ajouter votre css ou votre version d'un bout de css existante dans ploneCustom.css
      1. dans portal_skins/plone_styles, il existe un fichier ploneCustom.css qui est prévu pour héberger votre propre css; si vous le customisez dans portal_skins/custom, il est ajouté en bas de pile de portal_css, ce qui fait qu'il sera toujours interprété en dernier; vous pouvez donc y intégrer votre propre code css

Attention
il arrive que certains produits mal écrits fassent passer leur propre css après celle de ploneCustom.css dans portal_css ... à vérifier en cas de comportement bizarre ...
certains comportement js embarquent eux aussi un peu de css qui passe après ploneCustom.css (tout en étant invisible dans portal_css !); on voit bien cela en inspectant la css avec Firebug ... > pas trouvé de solution

    1. Créer votre propre fichier de css et l'ajouter dans portal_css
      1. dans portal_skins/custom, créer un fichier ma_css.css et y intégrer votre css (ou plusieurs fichiers si vous souhaitez séparer les choses en plusieurs fichiers ...)
      2. dans portal_css, tout en bas, ajouter votre fichier pour qu'il soit cablé dans le site; attention: si vous ajoutez ensuite des produits qui amènent leur propre css, les votres passeront derrière ... il faudra donc peut-être réorganiser le tout pour mettre toujours ploneCustom.css en dernier et juste avant vos propres css