[Résolu] variables et css

[airelibre]

Pour ajouter mon grain de sel, je serai partisan de tout mettre dans la feuille de styles pour éviter un re-calcul de cette feuille à chaque fois et ainsi accélérer le site.

Option A : tu crées un plugin qui convertit une couleur en une version plus foncée (via PHP) (voir ici)
Puis tu utilises cette fonction dans une fonction smarty au sein de feuille de styles

Exemple, si ton plugin est nommé :

Code :

{darken color='#ff66dd'}

Fonction smarty :

Code :

[[function name='color_categorie']]

.contentdown.[[$alias]] {
background: [[$color]];
}

.brand.[[$alias]] img {
border-color: [[darken color=$color]]
}

etc..

[[/function]]

// Puis :
[[color_categorie color='#ffdd88' alias='pactur']]
[[color_categorie color='#994488' alias='ipla']]

Après, je pense que les déclarations du type :

Code :

.contenttop.pactur, .contenttop.ipla, .contenttop.ilapak, .contenttop.elenamarchetti {
   padding:0 30px;
}

Ne devraient pas exister - autant ne styliser que .contenttop :

Code :

.contenttop {
   padding:0 30px;
}

Option B : tu passes par SASS ou LESS qui ont leur propres fonctions embarquées pour l'assombrissement, etc... et tu passes par un / des mixins pour la même chose

Ca ressemblera à la version Smarty mais t'évite de créer un plugin, et surtout te permet après plus de souplesse dans le code.

Tu peux utiliser SASS ou LESS via le module CMSMS CSSPreprocessor

En espérant que cela puisse aider,

[airelibre]

Pour ajouter mon grain de sel, je serai partisan de tout mettre dans la feuille de styles pour éviter un re-calcul de cette feuille à chaque fois et ainsi accélérer le site.

Option A : tu crées un plugin qui convertit une couleur en une version plus foncée (via PHP) (voir ici)
Puis tu utilises cette fonction dans une fonction smarty au sein de feuille de styles

Exemple, si ton plugin est nommé :

Code :

{darken color='#ff66dd'}

Fonction smarty :

Code :

[[function name='color_categorie']]

.contentdown.[[$alias]] {
background: [[$color]];
}

.brand.[[$alias]] img {
border-color: [[darken color=$color]]
}

etc..

[[/function]]

// Puis :
[[color_categorie color='#ffdd88' alias='pactur']]
[[color_categorie color='#994488' alias='ipla']]

Après, je pense que les déclarations du type :

Code :

.contenttop.pactur, .contenttop.ipla, .contenttop.ilapak, .contenttop.elenamarchetti {
   padding:0 30px;
}

Ne devraient pas exister - autant ne styliser que .contenttop :

Code :

.contenttop {
   padding:0 30px;
}

Option B : tu passes par SASS ou LESS qui ont leur propres fonctions embarquées pour l'assombrissement, etc... et tu passes par un / des mixins pour la même chose

Ca ressemblera à la version Smarty mais t'évite de créer un plugin, et surtout te permet après plus de souplesse dans le code.

Tu peux utiliser SASS ou LESS via le module CMSMS CSSPreprocessor

En espérant que cela puisse aider,