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).
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;
}