Mise en forme

Structure

L'élément de base est l'affichette. On peut comparer l'affichette à une boîte libre de GuppY. La différence tient dans la mise en forme, la façon de la disposer sur la page (par l'intermédiaire de panneaux), la possibilité d'envoyer une affichette aux groupes autorisés, la possibilité de mettre une liste de groupes autorisés, etc...

Mettre une affichette dans une boite latérale

Dans le paramétrage de l'affichette, à la rubrique "positionnement", répondre "OUI" à la question "En colonne latérale. Vous pouvez aussi activer cet indicateur sur la page "Gestion des affichettes".

Dans Config boite, vous avez alors une boite du nom "affichette_TTTTTTT" ou TTTTTT est le titre de l'affichette dans la langue.

Ce n'est pas obligatoire, mais il est conseillé de regrouper toutes les affichettes latérales sur un panneau unique. Ce panneau devrait être désactivé.

Hormis ce cas là, les affichettes sont toujours insérées sur une page via un panneau.

Insérer un panneau en page d'accueil

2 solutions :

1. paramétrer une boîte accueil composée de plusieurs panneaux et insérer cette boîte qui sera nommée "editoPlus", dans config accueil
2. insérer chaque panneau individuellement dans config accueil. Leur nom est "editoPlus_PPPP" où PPPP est le nom du panneau. Ne pas oublier dans la configuration du panneau de préciser qu'il doit être placé dans l'edito (rubrique "panneau autonome")

Vous pouvez mixer les 2 solutions.

Insérer un panneau dans une zone de config boite

Vous pouvez insérer un panneau dans toutes les zones de config boîtes, sauf les colonnes latérales où on insère une affichette individuellement. Dans la configuration du panneau, vous cochez les zones pour lesquelles le panneau est autorisé. Vous aurez alors, dans config boîtes, le panneau sous le nom "editoPlus_PPPP" où PPPP est le nom du panneau.

Faire une page composée uniquement de panneaux

Configurez votre page dans "Configuration page" en passant par "Gestion pages" du menu principal du plugin. La partie haute permet de choisir les panneaux qui feront partie de la page. La partie basse donne les caractéristiques de la page ou des valeurs par défaut communes à toutes les affichettes de la page.

Configurez la partie basse avant de faire les panneaux pour bénéficier des valeurs par défaut.

La partie haute sera remplie progressivement.

Pourquoi décider de faire un panneau ?

Nous avons déjà vu qu'il était conseillé de regrouper dans un seul panneau toutes les affichettes latérales.

Si je veux mettre une affichette dans le bandeau du haut (header), je suggère aussi de faire un bandeau spécifique. Il y a fort à parier que cette affichette ne sera jamais dans l'edito ! Il n'y a pas de règle. Souvenez-vous seulement des 2 points pour faire votre choix:

1. toutes les affichettes actives d'un panneau sont dessinées
2. tous les panneaux qui ont un emplacement coché dans la rubrique "panneau autonome", apparaîtront dans la zone correspondante de config boîtes. Donc faites des panneaux autonomes pour le bon endroit et cochez la bonne case.

Autre conseil, le nom du panneau et le titre sont 2 notions différentes. Le nom ne sert que pour la gestion du panneau en admin. le titre s'affiche (ou non, voir plus loin) sur les pages. Abusez d'une codification dans le nom pour avoir vos panneaux classés dans la liste.

Affichage des titres

Titre du panneau

Le titre du panneau dans une page autonome ou dans la boîte edito n'apparaît jamais. La notion de panneau est transparente dans ces cas-là, si ce n'est les caractéristiques de chaque panneau, nombre d'affichettes par ligne entre autres.

L'ensemble du panneau autonome est dessiné comme une boîte libre. Si le titre commence par §, il n'est pas affiché. Vous pouvez aussi encadrer le titre des caractères de commentaire HTML (< !-- et -- >). C'est moins pratique, c'est un vestige de la version 4.

Titre de l'affichette

L'affichette latérale est dessinée comme une boîte libre. Le non affichage de son titre se fait avec le caractère § en début ou les caractères de commentaire HTML. Le paramétrage du panneau n'a aucune influence.

Le titre de l'affichette contenue dans un panneau peut être défini à plusieurs endroits:

1. Au niveau de la page ou de la boite edito.
2. Au niveau du panneau. Si c'est un panneau inclu dans une page ou dans l'édito, ça modifie la définition précédente.
3. Au niveau de l'affichette, vous pouvez juste décider de ne pas afficher le titre, bien sûr, si vous avez décidé de l'afficher au niveau du panneau.

Fond des affichettes

Le fond de l'affichette est soit une couleur soit une image. Le choix se fait individuellement par affichette. Une couleur de fond par défaut peut être choisie dans config générale. Dans couleur vous pouvez choisir les valeurs transparent ou inherit. Lorsque l'image est présente la couleur n'a pas d'effet. Si vous choisissez inherit ou transparent comme couleur, pour une affichette ou par défaut, la couleur que vous affichez est celle que vous avez choisie dans config look (à moins que vous ayez fait des modifications dans styleplus.css) au niveau des différents éléments: bandeau, zones centrales, boîtes centrales... Donc le fond peut être différent suivant l'endroit où vous disposez votre affichette.

CSS

Le plugin utilise le fichier inc/csshead/edp-style.css pour faire un minimum de mise en forme par classes. Si vous voulez personnaliser les classes css, vous pouvez le faire soit dans le fichier styleplus.css de votre skin, soit créer un fichier edp-styleperso.css dans le répertoire inc/csshead. La définition dans styleplus sera écrasée par celle de edp-style.css du plugin s'il y a des définitions identiques. La définition dans edp-styleperso.css viendra compléter les définitions du plugin. En résumé, si vous devez modifier les classes fournies par le plugin, faites le dans edp-styleperso.css, si vous voulez mettre en forme votre structure, faites le plutôt dans styleplus.

Un fichier perso/plugins/editoPlus/edp-styleperso.css vous est fourni  en exemple, c'est celui de mon site de test. Vous pouvez le copier dans le répertoire inc/csshead et le modifier.

Classe editoplus

Cette classe est sur tous les éléments et sert à définir une propriété commune. Par exemple, les affichettes ne sont pas encadrées, si vous souhaitez que toutes vos affichettes le soient, vous définirez cela dans cette classe. Attention. GuppY reporte cette classe au niveau du titre; le titre sera aussi encadré. Si vous ne souhaitez pas qu'il le soit, vous devez définir la clause h1.editoplus avec les bons paramètres. Voir le fichier exemple. 

Classe EDP

Suivi d'un numéro. C'est la mise en forme de la boîte editoPlus dans la page accueil. Le numéro est le numéro de config page. La classe TrEDPn correspond au titre de la boîte. 

Classe EDPpanneau

Suivi d'un numéro. C'est la mise en forme de la boîte correspondant à un panneau autonome. Le numéro est le numéro de panneau. La classe TrEDPpanneaun correspond au titre de la boîte.

Classe EDPaff

Suivi d'un numéro sous la forme x-y. C'est la mise en forme d'une affichette; dans le numéro de l'affichette x-y, x est le numéro du panneau et y son rang dans le panneau. La classe TrEDPaff correspond au titre de l'affichette. 

Classe EDPpan

Suivi du numéro de panneau. Cette classe est utilisée pour la mise en forme des affichettes du panneau et leur donner un aspect homogène. C'est la même logique que la classe editoplus, limité au panneau.

Classe EDPpage

Suivi du numéro de page (A pour accueil). Cette classe est utilisée pour la mise en forme des affichettes de la page ou de la boîte edito de la page accueil et leur donner un aspect homogène. C'est la même logique que la classe editoplus, limité à la page.

Exemples

Sur ce site, le panneau 6 sert à faire un menu horizontal en haut de la page. La classe EDPpanneau6 donne les caractéristiques du panneau (padding: 2px; background-color: transparent;). la classe EDPpan6 donne des caractéristiques de toutes les affichettes (height: 70px;  padding: 20px; border-radius: 10px;). La couleur de fond de chaque affichette est donnée dans la configuration.