Block catégorie, css différent

[takhiera]

J'ai un petit soucis de CSS et j'aimerais beaucoup avoir un coup de main si possible.

 

Alors voilà, j'aurais besoin que le CSS du block categorie soit indépendant graphiquement du left column.

 

En gros voici le site: http://fondationlaurieann.com/presta/

 

Mon problème est que si je modifie les images de left colum, tout le coté gauche se retrouve avec ma même apparence (logique quoi!). La ou j'ai un problème, si je rajoute du css pour "block_categorie_left", la seule façon que mes catégories soient affecté, c'est si j'efface les images de fond du left-column.

 

En gros si on regarde sur le site, on voit bien que le module du panier est bleu avec un hérisson rose et toutes la colonne de gauche est jaune avec un chat couché.

 

J'aurais besoin que le bloc catégorie aient les graphiques suivant:

header: http://fondationlaurieann.com/presta/themes/01bleu/img/mod/headrdog.png

millieu: http://fondationlaurieann.com/presta/themes/01bleu/img/mod/midr.png

fotter: http://fondationlaurieann.com/presta/themes/01bleu/img/mod/footr.png

 

Voici le CSS en question qui affecte la colonne de gauche:

/* Default block style */
div.block {
margin-bottom: 1em;
width: 191px;
}
#left_column div.block, #right_column div.block {
padding-bottom: 57px;
background: transparent url('../img/mod/footy.png') no-repeat bottom left;
}
div.block h4 {
text-transform: uppercase;
font-family: Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.2em;
padding-left:4em;
background-image: url(../img/mod/headycat.png);
padding-top:2px;
line-height:3.7em;
color: #206aa5;
height: 81px;
}
div.block h4 a { color: #206aa5; }
div.block ul { list-style: none; }
div.block ul.tree li { padding-left:1.2em; }
div.block a:hover { text-decoration: underline; }
#left_column div.block .block_content a.button_large, #right_column div.block .block_content a.button_large { margin:0 0 0 -3px; }
div.block .block_content {
padding:0.5em 2em 0pt;
min-height:20px;
background-image: url(../img/mod/midy.png);
}
div.block li {
padding: 0.2em 0 0.2em 0em;
list-style-position: outside;
}
div.block a {
color: #5aa0d7;
text-decoration: none;
}

 

Quelqu’un pourrait m'aider avec le CSS pour que ce soit les autres images que j'ai montré précédemment qui soient afficher mais seulement pour la partie "catégorie" du site? Sans que j'aie à effacer le code du left column!

 

Un gros merci d'avance!

[takhiera]

Alors personnes n'aurait une petit idée?

[takhiera]

Un ami m'a aider et j'ai finis par l'avoir

[Maury Girard]

Takhiera

Pourriez vous donc nous en faire profiter.

En ajoutant les modifications et les fichiers en pièce jointe

 

Cordialement,

[takhiera]

Suffit de faire un copier/collé du blockcart en modifiant les balises cart par categories et d'ajouté des !important à la fin des graphiques!

 

Ça ressemble à ça:

 

#categories_block_left h4 {
   background-image: url("../img/mod/headycat.png") !important;
   color: #206AA5;
   font-family: Helvetica,Sans-Serif;
   font-size: 1.2em;
   font-weight: bold;
   height: 80px;
   line-height: 3.7em;
   padding-left: 7em;
   padding-top: 2px;
   text-transform: uppercase;
}
#categories_block_left .block_content {
   background-image: url("../img/mod/midy.png") !important;
   min-height: 20px;
   padding: 0.5em 2em 0;
   text-transform: uppercase;
}
#categories_block_left {
   background: url("../img/mod/footy.png") no-repeat scroll center bottom transparent !important;
   padding-bottom: 57px;
}

[takhiera]

Et pour ajouter des ligne pointillé sous les catégories il suffit d'ajouter ce code ci:

div#categories_block_left ul.tree li {
   background: none repeat scroll 0 0 transparent;
   border-bottom: 1px dashed #FFC600;
   border-style: none none dashed;
   font-size: 12px;
   font-weight: bold;
   line-height: 13px;
   margin-left: 0;
   margin-top: 2px;
   padding: 3px 0 2px 15px;
}