Aide - Recherche - Membres - Calendrier
Version complète : [RESOLU]modifications sur box categorie
Forum osCommerce-fr > Adapter OsCommerce MS2 > Design
tofquer
Bonjour,

Afin d'améliorer et d'éclaircir la liste de mes catégories et sous catégories dans la boxe categorie, je travaille sur le fichier includes/boxe/categorie.php et le style css en même temps. Comme mon niveau est faible, je tatonne et je viens demander quelques petites explications.

En cherchant sur le forum, j'ai trouvé des choses intéressantes afin dans un premier temps d'obtenir, un style different entre les catégories et les sous catégories et de mettre en valeur aussi le lien (categorie ou sous catégorie) actif.

Donc pour le lien actif, par défaut mis en gras, j'ai modifié le fichier categorie.php vers la ligne 36 - 37 en ajoutant à la police gras, une couleur (histoire de repéré ausi où je dois travailler), ça donne ça

Code
if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '<b><font color="#8AD818">';


Ensuite j'ai repris les informations de Nozic trouvée sur un sujet, pour donner une couleur différente à la catégorie et la sous catégorie, donc ligne 27 par là
j'ai remplacé

Code
$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) .  '">';


par

Code
if ($tree[$counter]['parent'] == 0) {
     $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="lien_categorie">';
   } else {
     $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="lien_sous_categorie">';
    }


Jusque là ça va mais là où je rencontre un problème c'est lorsque je veux mettre un hover different au passage de la souris sur un lien de catégorie ou sous categorie. J'ai défini dans le fichier CSS un style a.lien_categorie:hover, j'ai réussi à mettre un fond spécifique pour le hover dans cette class.

Mais le A.HOVER général pour tous les fichiers reste toujours actif.
Donc j'aimerai savoir dans un premier temps avant d'aller polus loin dans mes modifications, comment ne plus rendre actif la class A.hover dans ma box catégorie ?
tofquer
Bonjour,

j'ai toujours pas trouvé où le style css A.hover est lié avec la box catégorie, en fin bref ...

Je souhaiterais modifier ma boxe catégorie pour obtenir un cadre pour chaque catégorie plutôt que d'avoir comme c'est à la base toutes les catégories dans le même cadre. Ces cadres seraient espacés de quelques pixels et en cliquant sur une catégorie, les sous catégories apparaîtraient dans le même cadre.

Je cherche et j'essaie de comprendre mais si on pouvait me donner un petit coup de main ça serait sympa, parce que je patoge pas mal. wacko.gif

C'est bien dans le fichier categorie.php que je dois pouvoir faire cela ?
chti_poupon
Bonsoir !
Pourquoi réinventer l'eau tiède ?
Les contrib, c'est fait pour çà: Category box ehencement
Pas de travail css, mais une bonne base pour éclater l'arbre des catégories.
Bon code !
Chti poupon
tofquer
Bonjour Chti poupon

merci pour l'information, j'ai trouvé une autre contribution aussi un peu dans le même style, avec ces contributions ça devrait me permettre de mieux comprendre le fichier categorie.php pour le modifier.

NoZic
Bonjour,
Salut chti_poupon,

Moi j'aime bien la démarche de tofquer. Il cherche et apprend. C'est bien. Ca fait évoluer.
Plus que d'installer une contribution (souvent codée dans le fond du garage, par conséquent bancale) en lisant le fichier d'install'...

Pour le a:hover actif partout, le seul truc (simple et logique) que tu puisses faire est de redéfinir tout ce qui est défini dans le a et le a:hover sur tes a.lien_categorie et a.lien_categorie:hover.
Genre, le fichier original est :
Code
A {
  color: #000000;
  text-decoration: none;
}

A:hover {
  color: #AABBDD;
  text-decoration: underline;
}
Les seules choses définies sont color et text-decoration, bah il suffit de définir ces deux choses telles que tu les veux dans la classe css de tes a.lien_categorie et a.lien_categorie:hover, tu "overwrite" la définition du truc défaut quoi.

Pour faire autant de boxes "Catégories" que de catégories principales, il n'est pas besoin d'installer de contribution, le code est donné ici trois fois au moins (une fois par dero, deux par moi), je te link le plus pertinent à mon sens : Deux boites "catégories" dans le column_left
C'est le plus abouti, il y a la gestion du cache et tout.

Si tu es intéressé par la structure de la boxe catégorie, j'ai pas mal posté dessus, en réponse à beaucoup de besoins spécifiques. Tu devrais chercher "+boxe +catégorie" en mot clé et "NoZic" en utilisateur. Il y a une bonne masse d'infos sur cette boxe dans les différents posts, surtout sur la première page.

Bonne lecture, il y a de quoi faire... smile.gif
tofquer
Bonjour NoZic,

Merci beaucoup car c'est toujours un plaisir de recevoir tes réponses, pertinentes et claires à chaque fois.

Le but de ce sujet, ce n'est pas de me donner tout clé en main car j'arriverai pas à faire plus de chose plus tard si je ne comprends pas ce que je fais. Je ne suis pas mauvais en programmation au contraire mais le problème c'est que je ne connais rien au php, mes connaissances en programmation remonte au turbo pascal, y'a bien 10 ans facile..

J'ai installé la contribution show_sub-categories_onmouse_over_v2 , le résultat se rapproche un peu de ce que je veux mais c'est pas encore ça. Je compare le fichier categorie.php et celui de la contribution pour essayer de comprendre comment c'est construit.

Pour le a:hover, c'est pourtant ce que j'avais fait en déclarant un style différent dans a.lien_categorie mais j'ai pas fait ce qu'il faut, surement, je vais regarder ça de nouveau.

je regarde tout ce que tu m'as dis.
Encore merci smile.gif
tofquer
Re,

Je viens de regarder ton lien vers Deux boites "catégories" dans le column_left mais sachant que j'ai installé SEO URL, je ne veux pas partir vers une solution avec plusieurs boxes categorie et je n'en ai pas besoin en fait.

C'est plus une présentation et mise en forme différente de la boxe originale categorie. Je continue mes recherches, je vois mieux vers où aller..

smile.gif
NoZic
Re,

Pour les hover, il faut reprendre au moins pour ton a.lien_categorie (le hover prendra la définition du "pas hover") TOUTES les propriétés définies dans a ET dans a:hover afin de les mettre comme tu veux pour tes liens de catégorie.
Genre si tu as un truc du style :
Code
A {
  color: #000000;
  text-decoration: none;
  border-left: 1px solid grey;
  font-weight: bold;
}

A:hover {
  color: #AABBDD;
  text-decoration: underline;
  padding: 0 12px;
}
tu devras faire un truc du style :
Code
a.lien_categorie {
  color: green;
  text-decoration: underline;
  border-left: 0; /* ou border: 0; c'est pour redéfinir le border-left alors border fonctionnera */
  font-weight: normal;
  padding: 2px;
  background-color: red;
}

a.lien_categorie:hover {
  font-weight: bold;
  font-style: italic;
  background-color: blue;
}
Tu reprend toutes les définitions de a et a:hover dans a.lien_categorie et tu redéfinis juste les différences entre elles deux pour ton a.lien_categorie:hover. Normalement ça le fait.

Bon courage avec ta boxe catégorie

[EDIT tardif] tiens tout de même un tout petit truc à la con pour faire presque ce que tu veux. Dans "\catalog\includes\boxes\categories.php", juste après ça :
Code
  function tep_show_category($counter) {
    global $tree, $categories_string, $cPath_array;
rajouter ça :
Code
    if ($tree[$counter]['parent'] == 0) {
      $categories_string .= '<hr style="height: 1px; border: 0; background-color: grey; margin: 3px 0 8px 0;">';
    }
C'est vraiment merdi...tiiittttt... mais ça fonctionne, j'y ai pensé en fumant ma clope à la pause à l'instant.
C'est surtout pour donner une direction dans laquelle chercher.
tofquer
Re bonjour NoZic,

Pour le problème des hover, j'ai compris, merci, à force ça rentre, mon erreur était bien de ne pas "overwrité" ce que je voulais de différent.

Pour ton bout de code je vais essayer ça, je pense comprendre ce que ça va faire. En fait ça me crée une marge autour de chaque block (nom de categorie) qui va me donner l'aspect d'un block séparé des autres ..

Entre temps, avec le lien de contribution donné par chti-poupon et l'autre que j'avais trouvé, j'ai presque réussi à arriver où je veux aller. En fait je réalise des modifications graphiques des blocks pour donner l'aspect séparé entre eux (j'espère que c'est clair) plutôt que faire comme je le souhaitais au départ création d'un nombre égal au catégorie de cadre comme celui d'origine qui contient toutes les catégories.

Je reviendrai là dessus, parce que même si j'utilise pas cette voie, je voudrais connaître la solution.

Bon j'ai presque réussi à tout déchiffrer le codage du fichier categorie.php dans sa première partie avant les codes de "tableau" <tr><td> vers les lignes 70.

j'ai donc deux aspects différents, un pour la categorie et l'autre pour la sous catégorie mais j'ai des sous sous categorie.

Sur les codes suivants, on défini donc le style à appliquer selon si c'est une categorie ou une sous categorie

Code
//$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) .  '">';
   ////
// rempalcement de cette ligne cidessus par les suivantes pour definir un style de lien different  
    if ($tree[$counter]['parent'] == 0) {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menucateg">';
    } else {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubcateg">';
    }
//fin de la modif


donc si la chaine categorie a son parent égal à 0 dans le compte de l'arbre de la structure, c'est que cette chaine est une categorie de 1er ordre si la chaine possède un parent c'est qu'elle est de second ordre donc une sous categorie.

Je me demande comment alors faire pour ajouter à ces codes une condition pour mes sous sous categories (qui possède un parent lui même possédant un parent), est-ce quelque chose comme ça ?

Code
//$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) .  '">';
   ////
// rempalcement de cette ligne cidessus par les suivantes pour definir un style de lien different  
    if ($tree[$counter]['parent'] == 0) {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menucateg">';
    } else {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubcateg">';
    }

    if ($tree[$counter]['parent']['parent'] == 0) {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubsubcateg">';

//fin de la modif





tofquer
Citation (NoZic @ 24 Mar 2010, 16:38) *
[EDIT tardif] tiens tout de même un tout petit truc à la con pour faire presque ce que tu veux. Dans "\catalog\includes\boxes\categories.php", juste après ça :
Code
  function tep_show_category($counter) {
    global $tree, $categories_string, $cPath_array;
rajouter ça :
Code
    if ($tree[$counter]['parent'] == 0) {
      $categories_string .= '<hr style="height: 1px; border: 0; background-color: grey; margin: 3px 0 8px 0;">';
    }
C'est vraiment merdi...tiiittttt... mais ça fonctionne, j'y ai pensé en fumant ma clope à la pause à l'instant.
C'est surtout pour donner une direction dans laquelle chercher.


Bonjour,

NoZic, j'ai testé ton bout de code, ça me dessine un cadre autour de chaque block qui contient une categorie. Ca rejoint ce que je suis en train de faire.
Au lieu de faire le bout de code directement dans categorie.php comme le tien, c'est avec mes styles CSS menucateg et menusouscateg que ça fait un cadre de la sorte. Et en mettant le bord du cadre de la même couleur que mon fonc de site, ça donne l'impression d'avoir des blocks séparés comme je souhaitais.

Je suis quasiment arrivé à obtenir ce que je voulais, il me reste juste à voir comment fonctionne les conditions pour l'histoire des sous sous categorie (parent de parent), si je peux faire quelque chose pour ça, c'est pas indispensable mais je suis curieux de voir le code de cette conditionnelle.

smile.gif
NoZic
Bonjour,

Non ça ne rajoute pas un cadre autour de chaque lien.

Ca rajoute juste une balise hr (horizontal rule) avant chaque catégorie principale, ce qui créé du coup la séparation que tu voulais (l'idée m'est venue en me souvenant d'un post sur lequel j'ai répondu : le gars voulait rajouter des hr sous chaque lien).
C'était juste en fait pour te montrer que tu pouvais utiliser le "parent" à 0 pour savoir si c'est une catégorie principale.

Il y a aussi le "level" ($tree[$counter]['level']) qui si il vaut 0 signifie que tu es sur une catégorie principale.

Pour ton histoire de catégorie de troisième niveau, il suffit d'adapter le truc que j'avais fait. D'ailleurs, il faut vraiment l'adapter car tu ne peux plus tester le "parent", il faut tester le "level" ce coup-ci.
Donc ça devient :
Code
    if ($tree[$counter]['level'] == 1) { // si deuxième niveau
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubcateg">';
    } elseif ($tree[$counter]['level'] == 2) { // si troisième niveau
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubsubcateg">';
    } else { // en dernier car gère ainsi tous les autres cas que = 1 ou = 2, ça fait office de défaut quoi
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menucateg">';
    }


Bonne journée
tofquer
Bonjour NoZic,

Autant pour moi, en effet, c'est un trait, en fait avec la bordure de ma box, ça donnait ensuite l'aspect de plusieurs cadres. Pourtant je connais l'instruction <hr> parce que je l'avais déjà utilisée, en plus.

Merci pour l'info, sur la gestion des sous catégories par le LEVEL, j'avais pas du tout imaginer ça.

C'est cette ligne de code qui donne l'information de donner un LEVEL au catégorie en commençant par 0 ?

Code
for ($i=0; $i<$tree[$counter]['level']; $i++) {
      $categories_string .= "&nbsp;&nbsp;";
    }


Et du coup qui nous permet de faire ensuite ta conditionnelle sur le niveau ?


NoZic
Re,

Non, le code que tu cites rajoute les deux espaces devant les sous-catégories (les quatre devant les sous-sous-catégories).
Le level est redéterminé à chaque appel de la requête ( tep_db_fetch_array($categories_query) ), mais ce ne sont pas les infos de la requête qui le mettent à jour, c'est une incrémentation, et il repart de 0 à chaque catégorie principale.

Le code donné en dernier vient remplacer celui que tu utilisais avant donc pour un fichier d'origine tu dois juste remplacer cette ligne :
Code
$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) .  '">';
par le dernier code.
Comme ce que tu avais fait avant pour l'autre code avec le parent quoi.

Bonne soirée
tofquer
Bonjour,

Merci NoZic pour ces nouvelles précisions. Je me rend compte qu'il faut vraiment que j'apprenne le langage, ça m'évitera de patoger.

Bon mon code est quasi bouclé, je mettrai tout à la fin.

Je reviens sur mon idée d'origine, faire en sorte qu'au fur et mesure que le programme affiche une catégorie, il crée un nouveau cadre avec un saut de ligne, plutôt que d'inscrire toutes les catégories dans le même cadre.

Voici une partie de mon fichier categorie.php, à partir des lignes 80 ...

Code
<!-- categories //-->
          <tr>
            <td>
<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

  new infoBoxHeading($info_box_contents, true, true);

  $categories_string = '';
  $tree = array();
  
//ajout L. 84 85 86 pour espace avec le heading de la box et la box des categories
?>
<tr>
  <td>
<?php
  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
  while ($categories = tep_db_fetch_array($categories_query))  {
    $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                                'parent' => $categories['parent_id'],
                                                'level' => 0,
                                                'path' => $categories['categories_id'],
                                                'next_id' => false);

    if (isset($parent_id)) {
      $tree[$parent_id]['next_id'] = $categories['categories_id'];
    }

    $parent_id = $categories['categories_id'];

    if (!isset($first_element)) {
      $first_element = $categories['categories_id'];
    }
  }

  //------------------------
  if (tep_not_null($cPath)) {
    $new_path = '';
    reset($cPath_array);
    while (list($key, $value) = each($cPath_array)) {
      unset($parent_id);
      unset($first_id);      
      $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
      if (tep_db_num_rows($categories_query)) {
        $new_path .= $value;
        while ($row = tep_db_fetch_array($categories_query)) {
          $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                               'parent' => $row['parent_id'],
                                               'level' => $key+1,
                                               'path' => $new_path . '_' . $row['categories_id'],
                                               'next_id' => false);

          if (isset($parent_id)) {
            $tree[$parent_id]['next_id'] = $row['categories_id'];
          }

          $parent_id = $row['categories_id'];

          if (!isset($first_id)) {
            $first_id = $row['categories_id'];
          }

          $last_id = $row['categories_id'];
        }
        $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
        $tree[$value]['next_id'] = $first_id;
        $new_path .= '_';
      } else {
        break;
      }
    }
  }
  tep_show_category($first_element);

  $info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string);
//modification appel style css boxe categorie
// au lie de
// new infoBox($info_box_contents);
// new infoBoxcategorie($info_box_contents, infoBoxcategorie);
  new noborderBox2 ($info_box_contents, true);
?>

<!-- ajout espace L 154 et 155 //-->
</td>
</tr>
            </td>
          </tr>

<!-- categories_eof //-->


J'ai réussi à ajouter un saut de ligne avec des balises supplémentaire <tr> et <td>, ça m'a fait un saut de ligne entre le header de la box et le cadre qui contient les catégories.

Je n'arrive pas à voir et je ne sais pas si c'est possible, d'ajouter une ou deux autres ensembles de balise <tr> <td> pour que la box catégorie soit construite avec un cadre pour chaque catégorie, chaque cadre séparé par un saut de ligne.

Bon weekend

NoZic
Bonjour,

Avec la méthode de construction de cette boxe, ça va être très difficile de faire ton cadre autours de ta catégorie principale.

Il faudrait utiliser une autre méthode de cosntruction.
Genre celle qui construit mon menu horizontal (pas fini pour IE6, toujours, je sais...) mais sans reprendre les css (qui font l'horizontalité justment), juste la construction du menu en ul li.
C'est là : [CATEGORIES] Un petit menu horizontal

Mais ça te force à tout revoir. sad.gif

Bon WE biggrin.gif
tofquer
Bonjour,

Merci NoZic, pour cette précision, je pensais que l'on pouvait intégrer simplement un saut dans ce code.

Encore des choses intéressantes à voir plus tard ....

Mon menu fonctionne bien.

J'ai juste un petit souci, chaque catégorie possède en fond de block une image, le block et l'image sont définis par une hauteur. Mais je ne comprends pas, sur Mozilla le rendu est impeccable et sur I.E.6 les blocks sont presque deux fois moins haut ? blink.gif

Je suppose que c'est peut être une écriture de mon CSS qui convient pas bien pour I.E. ?
Voici mon code CSS pour appliquer un style au catégories et sous catégories

Code
/* menu Image -noborderBox2 - Show Sub-categories  Star */
a.menucateg:link, a.menucateg:visited, a.menucateg:active {
display: block; /*permet d'attribuer le fond de couleur a tout le block */
vertical-align: middle;
color:#DBFE01; /*couleur du nom de la categorie*/
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
text-align: left;
padding-left: 3px;
height: 23px;
padding-top:7px; /*especa du texte de la categorie avec le haut du block*/
text-decoration: none;
/*background-color: #EDEDEF; /*defini la couleur du fond du texte de la categorie dans son block*/
background-image: url(images/boximage.jpg);
border: solid 2px #FFFFFF; /*defini largeur du bord interieur du block*/
width: 179px;
font-weight: bold;
}

a.menucateg:hover {
border: solid 1px #CCCCCC;
/*background-image: url(images/menuon.png);*/
background-image: url(images/boitebutton.gif);
background-repeat: repeat;
text-decoration: none;
border: solid 2px #FFFFFF; /*defini largeur du bord interieur du block*/
/*font-weight: bold;*/
color: #000000;
}

a.menusubcateg:link, a.menusubcateg:visited, a.menusubcateg:active {
display: block;
vertical-align: middle;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
height: 19px;
text-decoration: none;
padding-top:4px;
padding-left: 5px;
/*border-bottom: 1px solid #7b9ebd;*/
border-left: solid 2px #FFFFFF;
border-bottom: solid 2px #FFFFFF;
background-color: #DBFE01; /*couleur du block qui contien la sous categorie*/
width: 170px;
}

a.menusubcateg:hover {
border-bottom: 1px solid #666666;
border-top: 1px solid #666666;
background-image: url(images/menuon1.png);
background-repeat: repeat;
text-decoration: none;
color: #000000;
}
/* menu Image -noborderBox2 - Show Sub-categories  End */


Bonne journée smile.gif
tofquer
Re,

Je viens de voir que I.E. n'interprête pas de la même manière la taille d'un block ! Plus qu'à trouver les CSS pour I.E.

smile.gif
NoZic
Bonjour,

C'est répété moultes fois ici (par moi, du coup je suis au courant... biggrin.gif ).
IE diffère des standards du web par les border et les padding (qu'il intègre aux dimensions demandées alors que ce doit être à l'extérieur des dimensions demandées... cool).
Du coup je parie que tu obtiens un block de 23 - (7+2+2) = 12 pixels de haut au lieu de tes 23 pixels prévus (donc effectivement pas loin de 2x moins haut)...
Tu peux mesurer à partir d'un imprim'ecran, pas de souci...

Pour obtenir un design identique visuellement il ne faut pas de border et de padding dans tes css (bon courage smile.gif ).
Ou faire une feuille de style alternative pour IE.
laugh.gif

Huuuuuuuummmmm... bon courage et vive IE
tofquer
Bonjour NoZic,

C'est exactement ça !

J'ai trouvé un petit truc, mettre le signe - devant une instruction qui va être lue uniquement par I.E.6, ça fonctionne.

Voici le CSS de mes catégories et sous catégories, modifé.

Code
/* menu Image -noborderBox2 - Show Sub-categories  Star */
a.menucateg:link, a.menucateg:visited, a.menucateg:active {
display: block; /*permet d'attribuer le fond de couleur a tout le block */
verical-align: middle;
color:#DBFE01; /*couleur du nom de la categorie*/
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-weight: bold;*/
text-align: left;
padding-left: 3px;
height: 23px;
padding-top:8px; /*espace du texte de la categorie avec le haut du block*/
text-decoration: none;
/*background-color: #EDEDEF; /*defini la couleur du fond du texte de la categorie dans son block*/
background-image: url(images/boximage.jpg);
border: solid 2px #FFFFFF; /*defini largeur du bord interieur du block*/
width: 180px;
font-weight: bold;
/* instruction I.E.6*/
-border: solid 0px #FFFFFF;
-margin-top: 4px;
-margin-bottom: 2px;
-height: 31px;
}

a.menucateg:hover {
/*border: solid 1px #CCCCCC; */
/*background-image: url(images/menuon.png);*/
background-image: url(images/boitebutton.gif);
background-repeat: repeat;
text-decoration: none;
border: solid 2px #FFFFFF; /*defini largeur du bord interieur du block*/
/*font-weight: bold;*/
color: #000000;
/*instruction I.E.6 */
-border: solid 0px;
}

a.menusubcateg:link, a.menusubcateg:visited, a.menusubcateg:active {
display: block;
vertical-align: middle;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
height: 19px;
text-decoration: none;
padding-top:4px;
padding-left: 5px;
/*border-bottom: 1px solid #7b9ebd;*/
border-left: solid 2px #FFFFFF;
border-bottom: solid 2px #FFFFFF;
background-color: #DBFE01; /*couleur du block qui contien la sous categorie*/
width: 170px;
/* instruction I.E. 6 */
-border-left: solid 0px;
-border-bottom: solid 0 px;
-height: 23 px;
-margin-top: 2 px;
}

a.menusubcateg:hover {
border-bottom: 1px solid #666666;
border-top: 1px solid #666666;
background-image: url(images/menuon1.png);
background-repeat: repeat;
text-decoration: none;
color: #000000;
}
/* menu Image -noborderBox2 - Show Sub-categories  End */


Bon, maintenant mon menu me convient pour l'instant, lorsque je maitriserai mieux, j'y reviendrai peut être. Reste, les couleurs à voir.

Voici mes codes, ça pourra servir à d'autre.

Le fichier includes/boxes/categorie.php (les plus grosses modifs sont la définition d'un style pour les catégories et les sous catégories et un petit saut entre le contenu et le header)

Code
<?php
/*
  $Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2003 osCommerce

  Released under the GNU General Public License
*/
  function tep_show_category($counter) {
    global $tree, $categories_string, $cPath_array;
    
// proposition de NoZic pour ajouter un cadre autour de chaque block equivalent a une categorie    
    //if ($tree[$counter]['parent'] == 0) {
    //  $categories_string .= '<hr style="height: 1px; border: 0; background-color: grey; margin: 3px 0 8px 0;">';
    //}
//fin de la proposition de NoZic    
    

//ajoute decalage de deux espaces avant nom sous categorie
    for ($i=0; $i<$tree[$counter]['level']; $i++) {
    // ligne original $categories_string .= "&nbsp;&nbsp;"; supprime car ajoute espace entre les blocks avec style menucateg et menusubcateg
      $categories_string .= "";
    }

    $categories_string .= '<a href="';

    if ($tree[$counter]['parent'] == 0) {
      $cPath_new = 'cPath=' . $counter;
    } else {
      $cPath_new = 'cPath=' . $tree[$counter]['path'];
    }

   //$categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) .  '">';
   ////
// rempalcement de cette ligne cidessus par les suivantes pour definir un style de lien different  
    if ($tree[$counter]['parent'] == 0) {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menucateg">';
    } else {
      $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="menusubcateg">';
    }
//fin de la modif


// affiche en gras la categorie ou sous categorie active
    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '<b><font color="#B4CB27">';
     }

// affiche le nom des categories et sous categorie
    $categories_string .= $tree[$counter]['name'];

    if (isset($cPath_array) && in_array($counter, $cPath_array)) {
      $categories_string .= '</b></font>';
    }
// ajoute la petite fleche > après une categorie de produit
    if (tep_has_category_subcategories($counter)) {
    // ligne originale  $categories_string .= '-&gt;';
    // ajout de cette ligne pour afficher un espace puis l image de la petite fleche
      $categories_string .= '&nbsp;' . tep_image(DIR_WS_IMAGES . 'pointer_blue_light.gif', '');
    }

    $categories_string .= '</a>';


    if (SHOW_COUNTS == 'true') {
      $products_in_category = tep_count_products_in_category($counter);
      if ($products_in_category > 0) {
        $categories_string .= '&nbsp;(' . $products_in_category . ')';
      }
    }

    $categories_string .= '';
    // ligne original $categories_string .= '<br>';
// pour ajouter une ligne entre categorie mettre a L.60    $categories_string .= '<hr size="1px">';

    if ($tree[$counter]['next_id'] != false) {
      tep_show_category($tree[$counter]['next_id']);
    }
  }
?>
<!-- categories //-->
          <tr>
            <td>
<?php
  $info_box_contents = array();
  $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

  new infoBoxHeading($info_box_contents, true, true);

  $categories_string = '';
  $tree = array();
  
//ajout L. 84 85 86 pour espace avec le heading de la box et la box des categories
?>
<tr>
  <td>
<?php
  $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
  while ($categories = tep_db_fetch_array($categories_query))  {
    $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                                'parent' => $categories['parent_id'],
                                                'level' => 0,
                                                'path' => $categories['categories_id'],
                                                'next_id' => false);

    if (isset($parent_id)) {
      $tree[$parent_id]['next_id'] = $categories['categories_id'];
    }

    $parent_id = $categories['categories_id'];

    if (!isset($first_element)) {
      $first_element = $categories['categories_id'];
    }
  }

  //------------------------
  if (tep_not_null($cPath)) {
    $new_path = '';
    reset($cPath_array);
    while (list($key, $value) = each($cPath_array)) {
      unset($parent_id);
      unset($first_id);      
      $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
      if (tep_db_num_rows($categories_query)) {
        $new_path .= $value;
        while ($row = tep_db_fetch_array($categories_query)) {
          $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                               'parent' => $row['parent_id'],
                                               'level' => $key+1,
                                               'path' => $new_path . '_' . $row['categories_id'],
                                               'next_id' => false);

          if (isset($parent_id)) {
            $tree[$parent_id]['next_id'] = $row['categories_id'];
          }

          $parent_id = $row['categories_id'];

          if (!isset($first_id)) {
            $first_id = $row['categories_id'];
          }

          $last_id = $row['categories_id'];
        }
        $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
        $tree[$value]['next_id'] = $first_id;
        $new_path .= '_';
      } else {
        break;
      }
    }
  }
  tep_show_category($first_element);

  $info_box_contents = array();
  $info_box_contents[] = array('text' => $categories_string);
//modification appel style css boxe categorie
// au lie de
// new infoBox($info_box_contents);
// new infoBoxcategorie($info_box_contents, infoBoxcategorie);
  new noborderBox2 ($info_box_contents, true);
?>

<!-- ajout espace L 154 et 155 //-->
</td>
</tr>
            </td>
          </tr>

<!-- categories_eof //-->


Ensuite ajouter dans includes/classes/boxes.php, la définition du style noborderbox2

Code
//ajout d'une classe de box categorie pour la contrib show subcategorie style noborderbox2
  class noborderBox2 extends tableBox {
    function noborderBox2($contents) {
      $info_box_contents = array();
      $info_box_contents[] = array('text' => $this->noborderBox2Contents($contents));
      //ligne suivante definie la largeur du cadre de la box categorie, valeur 0 enleve le cadre
      $this->table_cellpadding = '0';
      $this->table_parameters = 'class="infoBox"';
      $this->tableBox($info_box_contents, true);
    }
    function noborderBox2Contents($contents) {
      $this->table_cellpadding = '0';
      $this->table_parameters = 'class="infoBoxContents"';
      $info_box_contents = array();
      $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
      for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
        $info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''),
                                           'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''),
                                           'params' => 'class="boxText"',
                                           'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : '')));
      }
      $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
      return $this->tableBox($info_box_contents);
    }
  }
  //fin ajout class box subcategorie


Et enfin déclarer dans stylesheet.css, la partie CSS mise un peu plus haut. Après à chacun de choisir les couleurs ou images de fond.

Encore merci NoZic pour toute ton aide, smile.gif

bonne soirée.

tofquer
Re,

voici ce que ça donne en image, avec le menu, le hover sur les catégories et enfin, les sous catégories avec le hover de sous catégories.

smile.gif

francis pil
Bonjour,

J'aimerais avoir des boxes différentes

pour chaque catégorie suppérieure (10).

Pour la version 2.3.1

Merci pour l'aide

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2024 Invision Power Services, Inc.