Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
*


Boutons catégories et sous catégories en CSS


Pages: [1]
  Imprimer  

  Boutons catégories et sous catégories en CSS
Auteur Message
Arverne
Nouveau membre
*

Points gagnés: 0
Messages: 30


Voir le profil WWW
Boutons catégories et sous catégories en CSS
« le: 03 Octobre 2008 à 15:53:08 »

Je profite sur ce forum des réponses à mes éternelles questions, aussi vais je essayer pour une fois d'apporter humblement une contribution graphique pour Zencart...

PROBLEME : comment créer des boutons sympas pour les catégories et sous catégories

SOLUTION :


Dans le fichier css :

Remplacer ou commenter comme ci-dessous:

/* categories box parent and child categories
A.category-top, A.category-top:visited {
   color: #008000;
   text-decoration: none;
   }
A.category-links, A.category-links:visited {
   color: #004080;
   text-decoration: none;
   }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
   color: #FF0000;
   text-decoration: none;
   }
SPAN.category-subs-parent {
   font-weight: bold;
   }
SPAN.category-subs-selected {
   font-weight: bold;
   }
end categories box links */


par ceci :

/* categories box parent and child categories */
A.category-top, A.category-top:visited {

   display: block;
   margin: auto;
   margin-top: 2px;
   width: 130px;
   height: auto;
   line-height: 11px;
   background-color: #ffffff;
   text-align: center;
   font-size: 10px;
   font-weight: bold;
   vertical-align: middle;
   padding: 4px;
   border-style: outset;
   border-width: 1px;
   border-color: #4D6C58;
   color: #4D6C58;
   text-decoration: none;
}

A.category-top:hover, A.category-top:visited:hover{

   display: block;
   margin: auto;
   margin-top: 2px;
   width: 130px;
   height: auto;
   line-height: 11px;
   background-color: #ffffff;
   text-align: center;
   font-size: 10px;
   font-weight: bold;
   vertical-align: middle;
   padding: 4px;
   border-style: outset;
   border-width: 1px;
   border-color: #6A0537;
   color: #6A0537;
   text-decoration: none;
}
   
A.category-links, A.category-links:visited {

   display: block;
   margin: auto;
   margin-top: 1px;
   width: 120px;
   height: 15px;
   line-height: 15px;
   background-color: #6A0537;
   text-align: center;
   font-size: 10px;
   vertical-align: top; /* padding: 2px;*/
   border-style: outset;
   border-width: 1px;
   border-color: #6A0537;
   color: #ffffff;
   text-decoration: none;
   }
      
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {

   width: 120px;
   margin: 5px;
   line-height: 11px;
   text-align: middle;
   font-size: 10px;
   vertical-align: top;   
   color: #6A0537;
   text-decoration: none;
}

A.category-subs:hover, A.category-products:hover, A.category-subs:visited:hover, A.category-products:visited:hover {

   width: 120px;
   margin: 5px;
   line-height: 11px;
   text-align: middle;
   font-size: 10px;
   vertical-align: top;
   color: #48714E;
   text-decoration: none;
}


Pour régler l'écartement des "boutons", dans le fichier : yoursite\includes\templates\template_default\sideboxes\tpl_categories.php,

remplacer :

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";

par :

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent2">' . "\n";


puis dans le fichier css, créer votre nouveau style comme suit :

.sideBoxContent2{
   font-size: 1.1em;
   line-height: 0.5em;
   padding-top: 5px;
   border: solid, 1px, #6A0537;
   background-color: #E3EFD9;
   }


Bien sur, à vous de tout paramétrer, couleurs, dimensions, etc....

En espérant que cette petite contrib vous sera utile....

Bon code

Arverne
Journalisée

Pages: [1]
  Imprimer  
 

Aller à: