[Résolu] variables et css

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ 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
#1
Citation :#~~~~~ 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


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)