[Résolu] variables et css

[snatch1974]

Alors, avec tous vos conseils, j'ai réussi à faire un truc fonctionnel et je vous en remercie grandement.

Comment j'ai fait au final...

J'ai ma première instance de LISE (LISEProduits) dans laquelle sont rentrés tous les produits, comme son nom l'indique, avec les marques en catégories et des sous-catégories d'un niveau pour trier un peu plus le tout.

J'ai 5 marques donc 5 categories auquelles correspondent 3 couleurs chacunes et un logo.

J'a donc créer une nouvelle instance de LISE (LISEPartenaires) avec chacune des marques en item et les 3 couleurs (Cdark, Cbase, Clight) et le logo en définition de champs.

Pour créer mon array avec ces valeurs je suis passé par le plug-in LISELoader qui me créer déjà un array des données que je n'avais plus qu'à assigner avec un scope='global' pour qu'il puisse être récupéré dans la feuille de style.

Code :

{LISELoader item='item' identifier='alias' instance='LISEPartenaires' value=$globalcats assign='tmp'}
{assign var='couleurs' value=$tmp scope='global'}

LISELoader ne pouvant sélectionner tout seul tous les items de l'instance, j'ai dû passer par la création d'un nouvel array qui contient les alias de toutes mes marques, donc de mes items de LISEPartenaires

Dans l'instance LISEPartenaire j'ai donc créer un template de sommaire pour faire cet array que je récupèrerai ensuite

Code :

{foreach from=$items key='i' item=item}
   {$cats.$i = $item->alias}
{/foreach}

{$globalcats = $cats|implode:',' scope='global'}

Je n'ai plus qu'à appeler cette instance de module pour récupérer ma variable $globalcats

ce qui donne:

Code :

{LISEPartenaires template_summary='cats'}

{LISELoader item='item' identifier='alias' instance='LISEPartenaires' value=$globalcats assign='tmp'}
{assign var='couleurs' value=$tmp scope='global'}

Maintenant, il ne reste plus qu'à aller récupérer tout ça dans la feuille de style et boucler tous les styles qui sont dépendants des 3 couleurs en question.

- En premier, je déclare mes variables
- En second, les style communs
- En dernier, la boucle pour mes styles variables

Code :

[== CSS ==]

[[assign var='white' value='rgba(255,255,255,1)']]

.brand {
   width:100%;
   height:150px;
   padding:0 0 30px;
   text-align:right;
   direction:rtl;
   color:[[$white]];
}

.brandlogo {
   float:right;
   width: 310px;
   height: 200px;
   border-radius:0 0 0 100% / 0 0 0 95%;
   margin-bottom:-40px;
   margin-right:-1px;
}


[[foreach from=$couleurs item='one']]

.contenttop.[[$one->alias]]{
   padding:0 30px;
}

.contenttop.[[$one->alias]] .contenttop-inner{
   padding:0 0 20px 0;
   margin-top:-30px;
}

.brand.[[$one->alias]] img {
   border-color: [['#'|cat:$one->Cdark]];
}

.brand.[[$one->alias]] {
   background: -moz-linear-gradient(left, [['#'|cat:$one->Cdark]] 0%, [['#'|cat:$one->Cclaire]] 30%, [['#'|cat:$one->Cbase]] 80%);
   background: -webkit-gradient(left top, right top, color-stop(0%, [['#'|cat:$one->Cdark]]), color-stop(30%, [['#'|cat:$one->Cclaire]]), color-stop(90%, [['#'|cat:$one->Cbase]]));
   background: -webkit-linear-gradient(left, [['#'|cat:$one->Cdark]] 0%, [['#'|cat:$one->Cclaire]] 30%, [['#'|cat:$one->Cbase]] 80%);
   background: -o-linear-gradient(left, [['#'|cat:$one->Cdark]] 0%, [['#'|cat:$one->Cclaire]] 30%, [['#'|cat:$one->Cbase]] 80%);
   background: -ms-linear-gradient(left, [['#'|cat:$one->Cdark]] 0%, [['#'|cat:$one->Cclaire]] 30%, [['#'|cat:$one->Cbase]] 80%);
   background: linear-gradient(to right, [['#'|cat:$one->Cdark]] 0%, [['#'|cat:$one->Cclaire]] 30%, [['#'|cat:$one->Cbase]] 80%);
}

.[[$one->alias]] .brandlogo{
   background: -moz-linear-gradient(left, [['#'|cat:$one->Cbase]] 0%, [[$white]] 100%);
   background: -webkit-gradient(left top, right top, color-stop(0%, [['#'|cat:$one->Cbase]]), color-stop(100%, [[$white]]));
   background: -webkit-linear-gradient(left, [['#'|cat:$one->Cbase]] 0%, [[$white]] 100%);
   background: -o-linear-gradient(left, [['#'|cat:$one->Cbase]] 0%, [[$white]] 100%);
   background: -ms-linear-gradient(left, [['#'|cat:$one->Cbase]] 0%, [[$white]] 100%);
   background: linear-gradient(to right, [['#'|cat:$one->Cbase]] 0%, [[$white]] 100%);
}

...

[[/foreach]]

Je n'ai pas mis l'intégralité du css mais un aperçu de chaque partie pour voir comment ça se goupille.



Au final, tout se fait bien, tout est automatique et la seule chose à faire chaque fois que l'on crée une nouvelle marque, c'est de vider le cache car ça, ça ne se fait pas tout seul mais bon, comme c'est pas tous les 4 matins non plus qu'on va rajouter une nouvelle marque, c'est pas vraiment un soucis