Lorsqu’un plugin veut personnaliser, modifier ou enrichir les styles de l’espace privé, il doit définir un fichier squelette définissant les CSS requises et nommé prive/style_prive_plugin_[prefixeplugin].html (ou [prefixeplugin] est le préfixe du plugin). Les règles CSS de ce fichier s’ajoutent alors aux règles CSS standards fournies.
Ce fichier squelette doit déclarer un cache long adapté aux CSS (car elles ne bougent pas) et les headers. Exemple : le fichier style_prive_plugin_medias.html du plugin medias commence par :
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}Variables CSS
À partir de SPIP 4, il est possible et même recommandé d’employer des variables CSS dans les styles de l’espace privé des plugins [1].
Ainsi, on écrira :
.selecteur {
color: var(--spip-color-theme-light);
}
À la place de :
.selecteur {
color: #ENV{claire};
}
Variables à disposition
Le noyau met à disposition une série de variables que l’on peut réutiliser, elles sont toutes préfixées par « spip- ».
Voici les principales variables à connaître :
| Variable | Description |
|---|---|
spip-color-theme |
La couleur d’accent choisie par l’utilisateur⋅ice. |
spip-color-theme-[light|lighter|lightest] |
Variations claires de la couleur d’accent |
spip-color-theme-[dark|darker|darkest] |
Variations sombres de la couleur d’accent |
spip-color-theme--h |
Donne la teinte de la couleur d’accent |
spip-color-theme--s |
Donne la saturation de la couleur d’accent |
spip-color-theme--l |
Donne la luminosité de la couleur d’accent |
spip-color-gray |
Un gris neutre. |
spip-color-gray-[light|lighter|lightest] |
Variations gris clair |
spip-color-gray-[dark|darker|darkest] |
Variations gris sombre |
spip-spacing-y |
Donne une mesure de référence pour l’espacement vertical des éléments. On peut s’en servir pour les marges inférieures, etc. |
spip-spacing-x |
Donne une mesure de référence pour l’espacement horizontal des éléments. Elle peut être utile pour les gouttières des colonnes, etc. |
On peut trouver la liste complète des variables CSS du noyau dans l’inspecteur des navigateurs en filtrant les styles CSS avec « --spip- », cependant les autres variables sont destinées à un usage interne et peuvent être amenées à évoluer.
Il est recommandé de s’en tenir à la liste ci-dessus dans les styles des plugins.
Déclarer des variables
Lorsque des plugins déclarent leurs propres variables CSS pour le privé, il faut veiller à ne pas provoquer de téléscopages en utilisant des noms trop génériques.
Aussi il est conseillé de préfixer ces variables avec le préfixe du plugin.
Exemple avec le plugin Compagnons :
:root {
--compagnon-border-width: 2px;
}