Document Actions
Configuration du produit
Note: Return to reference manual view.
1. Installation du produit
L'installation du produit CPSkin2 se fait de manière classique via le panneau de configuration de Plone.
En sélectionnant Ajout/Suppression de produit dans le menu du panneau de configuration, un écran présente les produits que l'on peut installer et les produits qui le sont déjà.
Il suffit dès lors de cocher la case se trouvant à côté du nom du produit CPSkin2 et de cliquer sur le bouton "Installer".
Une fois le produit installé, la nouvelle skin est automatiquement sélectionnée.
2. Configuration du mode "Portail"
Adapter les options de la navigation locale
Accéder tout d'abord à la configuration générale de Plone : lien "Configuration du site" en haut à droite (pour l'administrateur),
Sélectionner ensuite "Paramètres de navigation".
Effectuer les opérations suivantes si nécessaire :
- Décochez "Inclure le lien de navigation vers la racine"
- Niveau de départ de l'arbre de navigation : 2
- Cocher "Filtrer sur l'état d'un processus"
- Sélectionner dans ce cadre les états : "Publié"
Adapter le menu Thème
Les thèmes affichés sont les titres de certains répertoires situés à la racine du site.
Actuellement, il est possible de configurer de 1 à 4 thèmes.
Pour sélectionner les thèmes :
- accéder à la configuration du produit : lien "Configuration du site", "CPSkin Configuration"
- cliquer sur l'onglet "Modifier" et adapter la zone "IDs des dossiers utilisés dans le menu Thèmes" en mentionnant les identifiants des 4 thèmes
Les sous-niveaux des thèmes sont sélectionnés dynamiquement dans chaque dossier thème et ne nécessitent pas cette opération.
Changer les bannières supérieures
L'image de la bannière est un élément de type image dont l'identifiant est banner.jpg.
Quand on se situe à un endroit du site, Plone recherche l'image en remontant l'arborescence jusque la racine.
Quand on est dans un thème, c'est donc l'image "banner.jpg" du dossier thème qui est utilisée pour la bannière.
Pour changer une image "banner.jpg" :
- à la racine du site ou dans chaque dossier thème, l'élément de nom "banner.jpg" peut être sélectionné et modifié.
- remplacer l'image par une image de taille identique ou appropriée
Changer le logo
La plupart des éléments graphiques (css, couleur, ...) doivent être adaptés en passant par la ZMI et principalement dans "/portal_skins" (voir le point "Adaptation des fichiers du produit")
Pour modifier le logo à travers la ZMI :
- sélectionner /portal_skins/custom_images/logo.jpg et cliquer sur le bouton "customize"
- remplacer l'image par une image de taille identique ou appropriée
3. Adaptation des fichiers du produit
Il est possible d'adapter les éléments prédéfinis du produit CPSkin2 à travers la ZMI, comme par exemple les fichiers CSS, les templates, les portlets, les fonctions utilisées dans les templates, ... Ces adaptations demandent éventuellement des connaissances en CSS, HTML, TAL, python, ...
Les fichiers relatifs au modèle de site sont accessibles dans la ZMI (lien "Configuration du site", "Interface d'administration de Zope (ZMI)") en suivant le chemin "/portal_skins/CPSkin2".
Pour visualiser un fichier, il suffit de cliquer sur son nom.
Une fois le fichier ouvert, il faut cliquer sur le bouton "Customize" avant de pouvoir y apporter des modifications.
En réalité, une copie du fichier original est créée dans "/portal_skins/custom".
C'est cette copie qui peut être adaptée.
En pratique, concernant les fichiers css, il est recommandé de ne pas customiser un fichier css entier mais de copier la classe css concernée dans le fichier /portal_skins/custom/ploneCustom.css. Si le fichier ploneCustom.css n'est pas dans /portal_skins/custom, il faut se positionner dans /portal_skins/plone_styles/ploneCustom.css et cliquer sur le bouton "customize".
Le fait d'avoir toutes les modifications css dans un seul fichier facilite la maintenance du site et réduit les problèmes de migration en cas d'évolution des fichiers customisés. En effet une fois qu'un fichier est dans /portal_skins/custom, c'est cette version qui est prise en compte et non plus celle du produit. Il faut donc éviter de customiser des fichiers entiers si ce n'est pas nécessaire ou si aucune modification n'y est apportée.
Dans le cas de CPSkin2, tous les changements css peuvent donc être placés dans ploneCustom.css hormis pour les fichiers css conditionnels qui eux doivent être customisés en entier (comme theme1.css, theme2.css, theme3.css, theme4.css, ...) ou pour des css particuliers comme IEFixes.css. Un css conditionnel est un css présent dans /portal_css et dont le champ "condition" contient quelque chose.
4. Adaptation des couleurs et des paramètres utilisés pour l'affichage
Différents paramètres utilisés dans les feuilles de style (CSS) sont définis dans le fichier "/portal_skins/CPSkin2/base_properties".
Ce fichier est basé sur le fichier "base_properties" original de Plone mais a été complété avec des paramètres utilisés dans le produit CPSkin2.
Afin de modifier ces valeurs, il est nécessaire de "customiser" le fichier "base_properties" se trouvant dans /portal_skins/CPSkin2 (voir point précédent concernant la customisation).
Ce fichier contient les éléments suivants :
| Paramètre | Valeur | Explication |
|---|---|---|
| backgroundColor | White | |
| borderStyle | solid | |
| borderStyleAnnotations | dashed | |
| borderWidth | 1px | |
| columnOneWidth | 16em | |
| columnTwoWidth | 16em | |
| contentViewBackgroundColor | #e8e8e8 | |
| contentViewBorderColor | #d1c8bf | |
| contentViewFontColor | #737270 | |
| discreetColor | #76797c | |
| evenRowBackgroundColor | #EFE7E1 | |
| fontBaseSize | 69% | |
| fontColor | Black | |
| fontFamily | "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif | |
| fontSmallSize | 85% | |
| globalBackgroundColor | #EFE7E1 | |
| globalBorderColor | #b45b5f | |
| globalFontColor | #436976 | |
| headingFontFamily | "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif | |
| helpBackgroundColor | #ffffe1 | |
| inputFontColor | Black | |
| linkActiveColor | Red | |
| linkColor | #436976 | |
| linkVisitedColor | Purple | |
| logoName | logo.jpg | |
| bannerName | banner.jpg | |
| notifyBackgroundColor | #ffce7b | |
| notifyBorderColor | #ffa500 | |
| oddRowBackgroundColor | transparent | |
| plone_skin | Plone Default | |
| portalMinWidth | 71em | |
| portletBgColor | #f5f0ec | |
| portletHeaderBgColor | #ab6467 | |
| portletInterneHeaderAColor | Black | |
| portletInterneHeaderBgColor | #efe7e1 | |
| portletInterneItemBgColor | #fdfdfd | |
| portletgaucheColorDark | #b45b5f | |
| portletgaucheColorLight | #f5e9e9 | |
| portletgaucheDarkHover | #fff3f3 | |
| portletgaucheFontColor | #737270 | |
| portletgaucheLightHover | #eedadb | |
| textTransform | normal | |
| theme1ColorDark | #38a8fe | |
| theme1ColorDarkHover | #4da1ec | |
| theme1ColorLight | #a5d4fe | |
| theme1a | #875f79 | |
| theme2ColorDark | #f6bc2c | |
| theme2ColorDarkHover | #edb233 | |
| theme2ColorLight | #fadd99 | |
| theme2a | #8b637d | |
| theme3ColorDark | #abdd30 | |
| theme3ColorDarkHover | #98c42b | |
| theme3ColorLight | #d3f094 | |
| theme3a | #976c87 | |
| theme4ColorDark | #ee6f3b | |
| theme4ColorDarkHover | #d96536 | |
| theme4ColorLight | #f4b89f | |
| theme4a | #99718b | |
| themeBg | #826990 | |
| themeBorder | 10px | |
| themeBorderStyle | solid | |
| topVague | #d1c8bf | |
| topVaguea | #8a627b | |
| vieColor | red |