Jump to content
Sign in to follow this  
takhiera

Block catégorie, css différent

Recommended Posts

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!

Share this post


Link to post
Share on other sites

Takhiera

Pourriez vous donc nous en faire profiter.

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

 

Cordialement,

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More