Forum CMS Made Simple Francophone

Aide francophone sur CMS Made Simple

Vous n'êtes pas identifié(e).

Annonce

ATTENTION

  • Prenez le temps de rechercher si quelqu'un n'a pas déjà proposé une solution à votre problème. Sur le forum français et sur le wiki
  • Pensez à mettre à jour votre version de CMS Made Simple. Nous ne faisons de support que sur LA dernière version de CMS Made Simple.
  • Renseignez impérativement le formulaire de nouveau message de manière la plus complète que possible. Dans votre CMS utiliser le menu Administration du site/Informations du système en haut Vue au format texte. Ces informations demandées nous permettent de mieux vous aider
  • Ajoutez [Résolu] au début du titre de votre 1er message lorsqu'une solution a été trouvée.

#1 08/02/2016 11:17:16

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

[Résolu] variables et css

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.1
#~ Url du site : www.resspackaging.com
#~ Hébergeur / Soft : o2switch
#~ Informations Système :
#~      ----------------------------------------------
#~      Cms Version: 2.1.2
#~      Installed Modules:
#~      AdminSearch: 1.0
#~      CGActionBar: 0.5.2
#~      CGExtensions: 1.51.1
#~      CGSimpleSmarty: 2.0.5
#~      CGSmartImage: 1.21
#~      CMSContentManager: 1.1
#~      CMSMailer: 5.2.14
#~      DesignManager: 1.1.1
#~      EasylistPartenaires: 1.1-beta1
#~      FileManager: 1.5.2
#~      LISE: 1.1
#~      LISEPartenaires: 1.1
#~      MicroTiny: 2.0.3
#~      ModuleManager: 2.0.2
#~      Navigator: 1.0.2
#~      News: 2.50.4
#~      Search: 1.50.2
#~      TinyMCE: 3.1
#~      Config Information:
#~      php_memory_limit:
#~      max_upload_size: 512000000
#~      url_rewriting: mod_rewrite
#~      page_extension: .html
#~      query_var: page
#~      auto_alias_content: true
#~      locale: fr_FR.utf8
#~      set_names: true
#~      timezone: Europe/Paris
#~      permissive_smarty: false
#~      Php Information:
#~      phpversion: 5.5.31
#~      md5_function: On  (Vrai)
#~      json_function: On  (Vrai)
#~      gd_version: 2
#~      tempnam_function: On  (Vrai)
#~      magic_quotes_runtime: Off  (Faux)
#~      E_ALL: 24567
#~      E_STRICT: 2048
#~      E_DEPRECATED: 0
#~      test_file_timedifference: Aucune différence de date du système trouvée
#~      test_db_timedifference: Aucune différence de date du système trouvée
#~      create_dir_and_file: 1
#~      memory_limit: 512M
#~      max_execution_time: 120
#~      register_globals: Off  (Faux)
#~      output_buffering: 4096
#~      disable_functions:
#~      open_basedir:
#~      test_remote_url: Valable
#~      file_uploads: On  (Vrai)
#~      post_max_size: 512M
#~      upload_max_filesize: 512M
#~      session_save_path: /tmp (0700)
#~      session_use_cookies: On  (Vrai)
#~      xml_function: On  (Vrai)
#~      xmlreader_class: On  (Vrai)
#~      check_ini_set: On  (Vrai)
#~      curl: On
#~      Performance Information:
#~      allow_browser_cache: On  (Vrai)
#~      browser_cache_expiry: 60
#~      php_opcache: On  (Vrai)
#~      smarty_cache: On  (Vrai)
#~      smarty_compilecheck: Off  (Faux)
#~      smarty_cache_udt: On  (Vrai)
#~      auto_clear_cache_age: On  (Vrai)
#~      Server Information:
#~      Server Software: Apache
#~      Server Api: litespeed
#~      Server Os: Linux 2.6.32-531.29.2.lve1.3.11.10.el6.x86_64 On  x86_64
#~      Server Db Type: MySQL (mysqli)
#~      Server Db Version: 5.6.28
#~      Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~      Permission Information:
#~      tmp: /home/farangpr/Sites/resspackaging/tmp (0755)
#~      tmp_cache: /home/farangpr/Sites/resspackaging/tmp/cache (0755)
#~      templates_c: /home/farangpr/Sites/resspackaging/tmp/templates_c (0755)
#~      modules: /home/farangpr/Sites/resspackaging/modules (0755)
#~      uploads: /home/farangpr/Sites/resspackaging/uploads (0777)
#~      Masque de création de fichier (umask) : /home/farangpr/Sites/resspackaging/tmp/cache (0755)
#~      config_file: 0644
#~      ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour à tous,

Avec LISE, j'ai une série de listes de produits que j'affiche sur le site par categorie.
Pour le moment, j'ai 4 catégories (pactur, ipla, ilapak et elenamarchetti) mais ça va augmenter.
Chaque catégorie possède des caractèristiques particulières pour l'affichage, comme par exemple des couleurs qui leur sont propres.
Pour me simplifier la vie, tout est basé sur l'alias de chaque catégorie, que ce soit les classes, les variables couleur.

Cependant, ces caractéristiques font que mon css devient une usine à gaz comme vous pouvez le voir en-dessous:

[== CSS ==]
[[strip]]

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

[[assign var='pactur' value='rgba(247,219,0,1)']]
[[assign var='ilapak' value='rgba(34,75,155,1)']]
[[assign var='elenamarchetti' value='rgba(199,213,124,1)']]
[[assign var='ipla' value='rgba(190,30,45,1)']]

[[assign var='pactur_dark' value='rgba(128,89,0,1)']]
[[assign var='ilapak_dark' value='rgba(24,45,97,1)']]
[[assign var='elenamarchetti_dark' value='rgba(104,113,66,1)']]
[[assign var='ipla_dark' value='rgba(121,18,23,1)']]


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

.contenttop.pactur .contenttop-inner, .contenttop.ipla .contenttop-inner, .contenttop.ilapak .contenttop-inner, .contenttop.elenamarchetti .contenttop-inner {
   padding:0 0 20px 0;
   margin-top:-30px;
}


.contentdown.pactur {
   background:[[$pactur]];
}

.contentdown.ipla {
   background:[[$ipla]];
}

.contentdown.ilapak {
   background:[[$ilapak]];
}

.contentdown.elenamarchetti {
   background:[[$elenamarchetti]];
}

.brand {
   width:100%;
   height:auto;
   padding:0 0 40px;
   text-align:center;
}

.brand img {
   border: 2px solid red;
   border-top:none;
   width: 80%;
   height: auto;
   border-radius:0 0 100% 100% / 0 0 200% 200%;
   margin-bottom:20px;
}

.brand.pactur img {
   border-color: [[$pactur_dark]];
}

.brand.ipla img {
   border-color: [[$ipla_dark]];
}

.brand.ilapak img {
   border-color: [[$ilapak_dark]];
}

.brand.elenamarchetti img {
   border-color: [[$elenamarchetti_dark]];
}

.brand.pactur {
   background: [[$orange]];
   background: -moz-linear-gradient(top, [[$pactur]] 0%, [[$white]] 90%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, [[$pactur]]), color-stop(90%, [[$white]]));
   background: -webkit-linear-gradient(top, [[$pactur]] 0%, [[$white]] 90%);
   background: -o-linear-gradient(top, [[$pactur]] 0%, [[$white]] 90%);
   background: -ms-linear-gradient(top, [[$pactur]] 0%, [[$white]] 90%);
   background: linear-gradient(to bottom, [[$pactur]] 0%, [[$white]] 90%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[$pactur]]', endColorstr='[[$white]]', GradientType=0 );
   color: [[$pactur_dark]];
}

.brand.ipla {
   background: [[$ipla]];
   background: -moz-linear-gradient(top, [[$ipla]] 0%, [[$white]] 90%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, [[$ipla]]), color-stop(90%, [[$white]]));
   background: -webkit-linear-gradient(top, [[$ipla]] 0%, [[$white]] 90%);
   background: -o-linear-gradient(top, [[$ipla]] 0%, [[$white]] 90%);
   background: -ms-linear-gradient(top, [[$ipla]] 0%, [[$white]] 90%);
   background: linear-gradient(to bottom, [[$ipla]] 0%, [[$white]] 90%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[$ipla]]', endColorstr='[[$white]]', GradientType=0 );
   color: [[$ipla_dark]];
}

.brand.ilapak {
   background: [[$ilapak]];
   background: -moz-linear-gradient(top, [[$ilapak]] 0%, [[$white]] 90%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, [[$ilapak]]), color-stop(90%, [[$white]]));
   background: -webkit-linear-gradient(top, [[$ilapak]] 0%, [[$white]] 90%);
   background: -o-linear-gradient(top, [[$ilapak]] 0%, [[$white]] 90%);
   background: -ms-linear-gradient(top, [[$ilapak]] 0%, [[$white]] 90%);
   background: linear-gradient(to bottom, [[$ilapak]] 0%, [[$white]] 90%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[$ilapak]]', endColorstr='[[$white]]', GradientType=0 );
   color: [[$ilapak_dark]];
}

.brand.elenamarchetti {
   background: [[$elenamarchetti]];
   background: -moz-linear-gradient(top, [[$elenamarchetti]] 0%, [[$white]] 90%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, [[$elenamarchetti]]), color-stop(90%, [[$white]]));
   background: -webkit-linear-gradient(top, [[$elenamarchetti]] 0%, [[$white]] 90%);
   background: -o-linear-gradient(top, [[$elenamarchetti]] 0%, [[$white]] 90%);
   background: -ms-linear-gradient(top, [[$elenamarchetti]] 0%, [[$white]] 90%);
   background: linear-gradient(to bottom, [[$elenamarchetti]] 0%, [[$white]] 90%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='[[$elenamarchetti]]', endColorstr='[[$white]]', GradientType=0 );
   color: [[$elenamarchetti_dark]];
}

.brand h1{
   font-size: 2.5em;
   line-height:1em;
   margin:0;
}

.brand.pactur h1{
   color: [[$pactur_dark]];
}

.brand.ipla h1{
   color: [[$ipla_dark]];
}

.brand.ilapak h1{
   color: [[$ilapak_dark]];
}

.brand.elenamarchetti h1{
   color: [[$elenamarchetti_dark]];
}

.item{
   display:table;
   width:100%;
   border-top:5px solid #fff;
   border-bottom:5px solid #fff;
   border-spacing:20px;
}

.imageitem{
   display:table-cell;
   float:none;
   vertical-align:middle;
}

.pactur .itemtxt{
   border-color:[[$pactur]];
}

.ilapak .itemtxt{
   border-color:[[$ilapak]];
}

.elenamarchetti .itemtxt{
   border-color:[[$elenamarchetti]];
}

.ipla .itemtxt{
   border-color:[[$ipla]];
}

.imageitem img{
    border: 2px solid #929fa3;
    width:100%;
    height:auto;
}

.itemtxt {
   display:table-cell;
   float:none;
   vertical-align:top;
   padding:0 0 0 20px;
   border-left: 10px solid [[$pactur]];
}

.itemtxt h3{
    margin:0;
}

.titreitem{
   float:left;
   margin:0 0 10px 0;
}

.descitem{
   float:left;
   text-align:justify;
}

.bottom {
   clear:both;
   float:left;
   width:100%;
   height:40px;
}

.bottom.pactur {
   background:[[$pactur]];
}

.bottom.ilapak {
   background:[[$ilapak]];
}

.bottom.elenamarchetti {
   background:[[$elenamarchetti]];
}

.bottom.ipla {
   background:[[$ipla]];
}

[[/strip]]

Est-ce que quelqu'un aurait une idée pour rendre ça plus simple afin que les ajouts de catégories se fasse rapidement coté css aussi.

Merci à vous

Dernière modification par snatch1974 (20/05/2016 12:10:43)

Hors ligne

#2 18/02/2016 16:55:18

Azam
Membre
Lieu : Loubressac (Lot)
Inscription : 17/10/2008
Messages : 73
Site Web

Re : [Résolu] variables et css

Bonjour,
j'ai regardé ton site, pour les css il me semble que tu t'es un compliqué la vie avec des déclarations qui font doublons.

Attribue des classes pour les positions etc… et ensuite une qui porte le nom de la catégorie avec simplement les définition de couleurs.

Par exemple : .pactur pour la déclaration color: et .pactur_bg pour les couleur de background puisque il n'y a que la couleur qui change.
Dans ton gabarit la classe et le nom de ta catégorie sous forme de variable.

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

devient maintenant :
[[$white='rgba(255,255,255,1)']]
c'est moins long
A+

Hors ligne

#3 18/02/2016 20:16:22

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

En complément d'Azam.
Il existe des noms de couleur spécifiques en css. Green, LightGreen, DarkGreen en sont des exemples que tu retrouveras sur w3schools. Mais il n'y en que que pour 15 catégories.

D'autre part, l'utilisation de SASS te permet d'utiliser 2 HSL fonctions : lighten et darken. Ces dernières te permettent d'automatiser autant de catégories que tu souhaites, mais tu devras apprendre à utiliser SASS.

Hors ligne

#4 18/02/2016 20:28:11

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : [Résolu] variables et css

est-ce qu'on peut utiliser dans une page css des variables déclarées dans un module pour faire un truc du style:

[== CSS ==]
.[[$var1]] { color:[[$var2]]; }

où $var1='white' et $var2='#fff' sont assignés dans le module LISE par exemple ?

Hors ligne

#5 18/02/2016 21:31:49

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

Si elles sont disponibles dans la head, je crois bien. Pourquoi ne testes-tu pas toi-même ?
Un {share_data scope=global vars='x,x,x,x,x,x,x' } pourrait aider si problème.

Hors ligne

#6 18/02/2016 21:48:44

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

Et pour tes .brand.categories, tu peux utiliser un foreach : http://docs.cmsmadesimple.org/layout/de … ch-example

Hors ligne

#7 19/02/2016 04:03:17

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : [Résolu] variables et css

Tu as 100% raison, je vais le tester moi-même maintenant que tu m'as filé 2 pistes intéressantes avec le {share_data} et le foreach dans les feuilles de style... c'est à mon avis les clefs qui me manquaient pour rendre dynamique ma feuille de style.
Je teste ça demain et je reviens pour le résultat de mes tests.

Hors ligne

#8 16/05/2016 05:45:41

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : [Résolu] variables et css

De retour....

le site ayant été mis en standby pendant quelques mois, j'ai repris hier ma recherche sur les feuilles de style dynamiques.

Donc, dans LISE je crée mes variables globales:

[== PHP ==]
{assign var='Cdark' value='#'|cat:$item->fielddefs.Cdark->value scope="global"}
{assign var='Cbase' value='#'|cat:$item->fielddefs.Cbase->value scope="global"}
{assign var='Cclaire' value='#'|cat:$item->fielddefs.Cclaire->value scope="global"}

Je les récupère ensuite dans ma feuille de style sur la forme [[$Cdark]] par exemple et ça fonctionne très bien... ou presque

La feuille de style récupère bien les 3 variables passées par contre, le cache des feuilles de style empêche qu'elle soit régénérée à chaque chargement de page du coup les changements de couleurs ne se font pas.

Y'a-t-il un moyen pour qu'une feuille de style ne soit pas cachable et soit régénérée chaque fois qu'elle est appelée?

Hors ligne

#9 16/05/2016 11:03:10

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

A lire : http://www.smarty.net/docs/en/caching.c … .variables
A tester :
{assign var='Cdark' value='#'|cat:$item->fielddefs.Cdark->value scope="global" nocache}
ou plus drastique
{nocache}
{cms_stylesheet}
{/nocache}
Mais bon, tu ne vas pas continuellement modifier ces variables. Il te suffit de vider le cache via l'admin si tu les modifies, pourquoi se prendre la tête pour si peu ?
Sinon il faudrait regarder s'il y a un événement de Lise (gestionnaire d'événements) qui te permettrait de lancer une udt de vidage de cache.

Dernière modification par Jean le Chauve (16/05/2016 11:17:33)

Hors ligne

#10 19/05/2016 08:37:25

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 184
Site Web

Re : [Résolu] variables et css

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é :

{darken color='#ff66dd'}

Fonction smarty :

[[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 :

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

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

.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,

Hors ligne

#11 19/05/2016 09:44:19

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

On peut insérer des fonctions dans une css ! Merci de nous rappeler que c'est un template smarty aussi  smile
Il faudra quand même mettre un [[function name='color_categorie' nocache]], non ?

Dernière modification par Jean le Chauve (19/05/2016 09:46:36)

Hors ligne

#12 19/05/2016 09:49:55

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 184
Site Web

Re : [Résolu] variables et css

Bonne question Jean le Chauve - je ne suis pas sûr car de toutes manières c'est la feuille entière qui est mise en cache dans un fichier plat, et ce sans passer par le cache Smarty.

Dès qu'il y a une modification sur l'un des fichiers CSS, le fichier en cache est supprimé et regénéré avec toutes ses fonctions.

A tester cependant pour être sûr wink

Hors ligne

#13 19/05/2016 09:55:45

Jean le Chauve
Sa Seigneurie le Chauve, Comte du domaine .be
Lieu : Bruxelles
Inscription : 13/12/2007
Messages : 4 693
Site Web

Re : [Résolu] variables et css

Et bien, on va attendre notre ami Snatch qui va se faire un plaisir de nous tester tout ça smile
Merci Aire Libre.

Hors ligne

#14 19/05/2016 17:37:38

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : [Résolu] variables et css

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.

{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

{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:

{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

[== 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

Dernière modification par snatch1974 (19/05/2016 17:41:31)

Hors ligne

#15 19/05/2016 17:40:38

snatch1974
Membre
Inscription : 18/01/2011
Messages : 300

Re : [Résolu] variables et css

Maintenant, il ne me reste plus qu'à me mettre à SASS ou LESS pour essayer de simplifier mes pages css...  hmm

Hors ligne

#16 20/05/2016 08:44:23

airelibre
Administrateur
Lieu : Alsace
Inscription : 01/12/2009
Messages : 1 184
Site Web

Re : [Résolu] variables et css

Merci pour les explications et la solution proposée wink

Si c'est ok, marques le sujet en [Résolu] merci !

Hors ligne

Pied de page des forums