Document Actions
Canevas de site internet communal (produit CPSkin2)
Note: Return to reference manual view.
1. Introduction
La mise à disposition d'un canevas de site internet communal a pour objectif de permettre à toute commune de démarrer avec un site plone orienté site communal plutôt que de démarrer avec une version Plone standard.
Le canevas de site internet se présente sous forme d'un produit installable et configurable.
Le fait d'utiliser Plone (un outil CMS)offre la possibilité de transformer un site web traditionnel en un portail alimenté par les services communaux, les associations, les commerçants, etc. , qui peuvent ainsi développer leur propre "mini site" sur le portail communal.
La mise en place d'un tel portail permet à la commune d'agir en temps que service public et d'offrir à sa population une plateforme internet locale. Chacun a ainsi la possibilité de s'approprier l'Internet au sein d'une communauté locale, ce qui permet d'enrichir et de renforcer le lien social.
2. Présentation du canevas
2.1. Apparence générale
L'apparence du modèle de site se découpe en différentes zones :
Comme illustré ci-dessous avec le site de Seneffe :
Zone 1 : l'entête de page
L'entête de page est présente sur toutes les pages du site web.
Elle contiendra en général :
- dans sa partie gauche, l'emblème de la commune
- dans sa partie principale, une image pouvant varier suivant la page visitée
- dans sa partie droite, une zone de recherche, des liens divers...
Zone 2 : la colonne de gauche
La colonne de gauche contient des "boîtes" optionnelles affichées les unes en-dessous des autres.
Ces "boîtes" sont appelées portlet.
Les portlet supérieurs constituent le menu de navigation.
Différents types de menu sont proposés.
Zone 3 : le contenu principal
La partie centrale contiendra le contenu des pages, qui pourra être édité par certains utilisateurs.
Zone 4 : la colonne de droite
La colonne de droite contiendra des portlet comme le calendrier, la recherche, ...
Zone 5 : le pied de page
Le pied de page est présent sur toutes les pages du site web.
2.2. Mode "Portail"
2.2.1. Les caractéristiques générales
- Dans sa partie supérieure gauche un logo dont le nom est défini dans le fichier de configuration "base_properties" (ce fichier est présenté dans la section nommée "Adaptation des couleurs et des paramètres utilisés pour l'affichage").
- Dans sa partie supérieure centrale une bannière dont le nom est défini dans le fichier de configuration "base_properties". La bannière est recherchée suivant les principes d'acquisition. Il est donc possible de la faire changer suivant l'endroit du site où l'on se trouve.
- Dans la colonne de gauche un menu présentant 4 thèmes. Une fois qu'un thème a été sélectionné, un premier sous-menu apparaît. Une fois qu'un élément du sous-menu a été choisi, un troisième menu présente une navigation locale. L'utilisateur voit donc apparaître trois parties de menu les unes en dessous des autres.
- Dans la colonne de gauche un menu optionnel appelé "focus" qui permet de présenter une navigation alternative en plus de la navigation par thème.
2.2.2. Le menu de navigation principal
La navigation par thèmes s'articule en trois parties :
- les thèmes,
- les sections, composées d'un menu à deux niveaux,
- la navigation locale, composée également d'un menu à multiples niveaux.
Les thèmes
Lorsque l'on accède au site, seul le menu contenant les thèmes apparaît.
Ce menu peut contenir 4 thèmes. L'ajout de thèmes complémentaires est possible mais demande une adaptation du produit.
Le contenu du menu est dynamique.
Les thèmes affichés sont en fait les noms de certains dossiers situés à la racine du site.
Les conditions pour qu'un thème apparaisse dans ce menu sont les suivantes :
- le dossier doit être à la racine du site,
- le dossier doit être défini avec une "propriété" particulière,
- le dossier doit être dans l'état "Publié".
Le fait de cliquer sur un thème provoque deux actions :
- la page du thème sélectionné est affichée (en fait le contenu du dossier sélectionné)
- le menu contenant les sections apparaît sous le menu des thèmes
Par exemple, sur le site de Seneffe, si l'on sélectionne le thème COMMUNICATION, le menu devient :
Les sections
Les sections constituent la structure affichée lorsqu'un thème a été sélectionné.
Le menu des sections apparaît directement sous le menu des thèmes.
La couleur du menu des sections est la même que la couleur du thème sélectionné afin de faire apparaître visuellement le lien entre thème et sections.
Les éléments qui apparaissent au premier niveau sont sélectionnés suivant les critères suivants :
- ces éléments sont contenus dans le dossier correspondant au thème sélectionné,
- ils sont de type "dossier" ou "dossier automatique",
- ils sont dans l'état "Publié".
Le fait de cliquer sur un élément du premier niveau active l'affichage des éléments de second niveau.
Le menu se présente alors de la façon suivante :
Les éléments de second niveau sont affichés s'ils répondent aux critères suivants :
- ces éléments sont contenus dans le dossier sélectionné de premier niveau, lui-même contenu dans le thème sélectionné,
- ils sont dans l'état "Brouillon".
Dans l'exemple montré ci-dessus, tous les éléments du menu de second niveau sont donc contenus dans le dossier "Dossiers - Reportages", lui-même contenu dans le dossier racine "COMMUNICATION".
Le fait de sélectionner un élément de second niveau provoque les actions suivantes :
- la page du sous-niveau sélectionné est affichée
- le menu contenant la navigation locale apparaît sous le menu des sections
En sélectionnant dans le menu de second niveau l'élément "Reporter citoyen", le menu devient :
La navigation locale
Pour que la navigation locale s'affiche correctement, il est nécessaire d'effectuer les opérations de configuration expliquée dans le point "Configuration du mode portail".
La navigation locale apparaît lorsqu'un élément de second niveau a été sélectionné.
Elle affiche les éléments qui correspondent à un des critères suivants :
- ces éléments sont contenus dans le dossier de premier niveau et sont dans l'état "Publié",
- ces éléments sont contenus dans le dossier de second niveau qui a été sélectionné et sont dans l'état "Publié".
La navigation locale n'a pas de limites de niveau.
Elle affiche tous les niveaux sélectionnés qui ont été rencontrés.
Il est possible de filtrer les types d'éléments affichés dans la navigation locale. Ce paramétrage se fait dans la rubrique "Navigation" du "Panneau de configuration de Plone".
2.2.3. Le menu "Focus"
Le menu "Focus" propose une navigation alternative concernant des éléments qui ne se retrouvent pas à travers la navigation par thème.
Ce menu affiche les titres de certains dossiers compris dans le dossier spécifique focus (situé à la racine du site).
Le contenu du menu est dynamique.
Les conditions pour qu'un élément apparaisse dans ce menu sont les suivantes :
- l'élément doit être de type "Dossier" ou "Dossier automatique"
- le dossier doit être situé dans le dossier focus,
- le dossier doit être dans l'état "Publié".
Par exemple, pour le site de Seneffe, le menu Focus est le suivant :
Le fait de sélectionner une entrée dans ce menu fait apparaître un deuxième niveau de navigation, reprenant certains dossiers localisés dans le dossier de premier niveau sélectionné.
Les éléments de second niveau sont affichés s'ils répondent aux critères suivants :
- ces éléments sont de type "Dossier",
- et sont contenus dans le dossier sélectionné de premier niveau.
Le fait de sélectionner en cliquant un élément de second niveau fait apparaître le contenu de ce dossier ou la page qui y est définie par défaut.
3. Configuration du produit
3.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.
3.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.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.
3.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 |