[snatch1974]

#~~~~~ 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:

Code :

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

[Azam]

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+

[Jean le Chauve]

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.

[snatch1974]

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

Code :

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

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

[Jean le Chauve]

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.

[Jean le Chauve]

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

[snatch1974]

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.

[snatch1974]

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:

Code :

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

[Jean le Chauve]

A lire : http://www.smarty.net/docs/en/caching.ca....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.

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

[Jean le Chauve]

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

[airelibre]

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

[Jean le Chauve]

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

[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

[snatch1974]

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

[airelibre]

Merci pour les explications et la solution proposée

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