Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
mettre image sur menu categorie
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

Bonjour,
est il possible d’avoir une image differente sur la balise de liens de chaque categorie de la barre de navigation ?
à quel endroit doit on les modifier ?

en fait j’ai 4 catégories sur ma barre de navigation est je voudrais que chacune ait sa propre image de fond.

Si qqun a une idée.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

Bon eh bien
mis a part mettre un image unique de backgroud qui represente la somme de mes 4 images differente par categorie dans l’id #nav dans menu.css, je ne vois comment faire .
en plus en faisant comme ça je galère pour positionner le texte de mes liens au bon endroit de l’image

si qqun peut m’aider

merci

 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Bonjour,

La balise ul comprend des sous-balise li ayant chacun une classe CSS propre (par exemple, nav-furniture dans la boutique de démo Magento).
Si tu applique une image de fond sur chacune de ces balise li avec la bonne classe, ça sera tout bon.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */

#nav { padding:0 20px; font-size:1.1em; }

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav li { float:left; }
#nav li.active a { color:#d96708; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#a7c6dd; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#d96708; }

/************ 1ST LEVEL ************/
#nav ul li,
#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:#ecf3f6 url(../images/nav_divider.gif) repeat-x 0 100%; }
/*#nav ul li.over { background:#d5e4eb url(../images/nav_divider.gif) repeat-x 0 100%; }*/
#nav ul li.last { background:#ecf3f6; padding-bottom:0; }

#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }

/************ 2ND LEVEL ************/
#nav ul { position:absolute; width:15em; top:25px; left:-10000px; border:1px solid #899ba5; }

/* Show menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:#ecf3f6; }
#nav ul li a:hover { background:#d5e4eb; }
#nav ul li a,
#nav ul li a:hover { color:#2f2f2f !important; }
#nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px;}

/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; }

je ne vois pas dans le fichier menu.css la sous balise li dont tu parles ( ex nav-furniture )
ce n’est peut etre pas dans ce fichier qu’il faut voir ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Non, dans le fichier original, ce n’est pas utilisé, il faut l’ajouter. Il s’agit de règles CSS, je te laisse consulter la doc à ce sujet sur le net.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

lorsque tu dis

Il s’agit de règles CSS, je te laisse consulter la doc à ce sujet sur le net.

il s’agit de la doc sur magento ou sur le CSS en général ?
car s’il s’agit des regles CSS pour mettre une image de fond à une balise, jusque là ça va ,mon souci serai d’aller la declarer dans la partie code.
est ce qu’il faut que je la déclare dans :
app\design\frontend\default\default\template\catalog\navigation\top.phtml, si oui où dans ce bout de code car je ne vois pas de balise li ?

<div class="header-nav-container">
    <
div class="header-nav">
        <
h4 class="no-display"><?php echo $this->__('Category Navigation:'?></h4>
        <
ul id="nav">
        
<?php foreach ($this->getStoreCategories() as $_category): ?>
            <?php 
echo $this->drawItem($_category?>
        <?php 
endforeach ?>
        
</ul>
    </
div>
    
<?php echo $this->getChildHtml('topLeftLinks'?>
</div>
Désolé s’il s’agit d’une question bète :(
 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Je parle de règles CSS en général.
Regarde le code HTML généré par Magento. Il n’est pas nécessaire de modifier le code que tu cites pour ajouter une image de fond à chaque élément de menu.

Je te conseille l’extension Firebug pour Firefox, qui aide bcp au dev CSS (entre autres).

Là, ce n’est qu’une problématique CSS, pas Magento.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

Si je comprends bien, j’e n’ai qu’à lire à l’aide de firebug le nom de la classe qui correspond ou du moins qui a été genéré par magento (car je ne la retrouve pas dans les differents fichiers CSS est en plus elle pporte le nom de ma categorie

<ul id="nav">
                    <
li class=")">
<
a href="http://www.e-kidshoes.com/chaussure-fille"><span>Fille</span></a>
<
ul class="level0">
<
li class="level1 nav-chaussure-fille-sandales-filles">
<
a href="http://www.e-kidshoes.com/chaussure-fille/sandales-filles"><span>Sandales</span></a>
</
li>
<
li class="level1 nav-chaussure-fille-ballerines">
<
a href="http://www.e-kidshoes.com/chaussure-fille/ballerines"><span>Ballerines</span></a>
</
li>
<
li class="level1 nav-chaussure-fille-baskets-filles">
<
a href="http://www.e-kidshoes.com/chaussure-fille/baskets-filles"><span>Baskets</span></a>
</
li>
<
li class="level1 nav-chaussure-fille-crocs-filles last">
<
a href="http://www.e-kidshoes.com/chaussure-fille/crocs-filles"><span>crocs</span></a>
</
li>
</
ul></li>
                    <
li class="level0 nav-chaussure-garcon parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.e-kidshoes.com/chaussure-garcon"><span>Garçon</span></a>
<
ul class="level0">
<
li class="level1 nav-chaussure-garcon-sandale-fermee">
<
a href="http://www.e-kidshoes.com/chaussure-garcon/sandale-fermee"><span>Sandales fermées</span></a>
</
li>
<
li class="level1 nav-chaussure-garcon-sandales-ouvertes">
<
a href="http://www.e-kidshoes.com/chaussure-garcon/sandales-ouvertes"><span>Sandales ouvertes</span></a>
</
li>
<
li class="level1 nav-chaussure-garcon-basket-garcons">
<
a href="http://www.e-kidshoes.com/chaussure-garcon/basket-garcons"><span>Baskets</span></a>
</
li>
<
li class="level1 nav-chaussure-garcon-crocs-garcons last">
<
a href="http://www.e-kidshoes.com/chaussure-garcon/crocs-garcons"><span>Crocs</span></a>
</
li>
</
ul></li>
                    <
li class="level0 nav-chaussure-bebe parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.e-kidshoes.com/chaussure-bebe"><span>Bébé</span></a>
<
ul class="level0">
<
li class="level1 nav-chaussure-bebe-filles parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/filles"><span>Filles</span></a>
<
ul class="level1">
<
li class="level2 nav-chaussure-bebe-filles-bottines-bebes-filles">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/filles/bottines-bebes-filles"><span>Bottines</span></a>
</
li>
<
li class="level2 nav-chaussure-bebe-filles-sandales-bebe-fille last">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/filles/sandales-bebe-fille"><span>Sandales</span></a>
</
li>
</
ul></li>
<
li class="level1 nav-chaussure-bebe-chaussures-bebe-garcons last parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/chaussures-bebe-garcons"><span>Garçons</span></a>
<
ul class="level1">
<
li class="level2 nav-chaussure-bebe-chaussures-bebe-garcons-bottines-bebe-garcons">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/chaussures-bebe-garcons/bottines-bebe-garcons"><span>Bottines</span></a>
</
li>
<
li class="level2 nav-chaussure-bebe-chaussures-bebe-garcons-sandales-bebe-garcon last">
<
a href="http://www.e-kidshoes.com/chaussure-bebe/chaussures-bebe-garcons/sandales-bebe-garcon"><span>Sandales</span></a>
</
li>
</
ul></li>
</
ul></li>
                    <
li class="level0 nav-accessoires-enfant parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.e-kidshoes.com/accessoires-enfant"><span>Accessoires</span></a>
<
ul class="level0">
<
li class="level1 nav-accessoires-enfant-sac-enfant-fille-garcon">
<
a href="http://www.e-kidshoes.com/accessoires-enfant/sac-enfant-fille-garcon"><span>Sacs</span></a>
</
li>
<
li class="level1 nav-accessoires-enfant-casquettes-enfants-fille-garcon">
<
a href="http://www.e-kidshoes.com/accessoires-enfant/casquettes-enfants-fille-garcon"><span>Casquettes</span></a>
</
li>
<
li class="level1 nav-accessoires-enfant-chapeau-enfant-fille-garcon-bebe last">
<
a href="http://www.e-kidshoes.com/accessoires-enfant/chapeau-enfant-fille-garcon-bebe"><span>Chapeaux</span></a>
</
li>
</
ul></li>
                </
ul>
je vais ensuite dans menu.css et je mets par ex la propriété background à la classe :level0 nav-chaussure-fille parent
c’est bien ça ?,
merci pour tonaide et ta patience…
 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

C’est bien ça.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fredisap
Sr. Member
 
Total Posts:  88
Joined:  2008-10-20
France
 

super merci ...

je ne pensais pas que l’on pouvez utiliser le code généré par magento (celui qui s’affiche lorsqu’on fait afficher le code source dans le navigateur) et l’utiliser pour le css
c’est vraiment compliqué tout ça ...
désolé mon niveau est vraiment celui du débutant niveau 0, c’est à dire un code html au quel on lie des propriétés css c’est tout.
Dés que l’on rentre dans le php ou le xml je suis largué…
j’ai du mal à comprendre les mecanismes.
je cherche vraiment à apprendre mais je n’arrive pas à trouver la formation adaptée au nuls comme moi. j’ai acheté pleins de bouquin, lu pas mal de site.
mais j’ai du mal à comprendre les mecanisme, savoir comment tout se construit, s’imbrique les layouts avec les templates, quand faut il intervenir sur un ou sur l’autre.
existe il des regles ? comment savoir si en fonction d’une tache bien precise, je dois intervenir sur le layout ou sur le templates ou encore comme on vient de le voir dans l’exemple des images des categories, le résultat du code genere par magento.

Plein plein de question qui meriteraient d’etre eclaircies pour moi et pour je pensepas mal d’autre personnes débutantes comme moi.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jguiss
Member
 
Avatar
Total Posts:  75
Joined:  2007-11-30
France / Avignon
 

Bonjour les Français !

J’ai un souci mes Class générées sont de la forme “nomdeClass.html” :

<ul id="nav">
<
li class="level0">
</
li>
<
li class="level0 nav-decoration.html parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.monurl.fr/decoration.html">
</
a>
<
ul class="level0">
</
ul>
</
li>
<
li class="level0 nav-forme.html parent" onmouseout="toggleMenu(this,0)" onmouseover="toggleMenu(this,1)">
<
a href="http://www.monurl.fr/forme.html">
</
a>
<
ul class="level0">
</
ul>
</
li>
<
li class="level0 nav-promotions-pas-cher.html">
<
a href="http://www.monurl.fr/promotions-pas-cher.html">
<
span>Promotions</span>
</
a>
</
li>
<
li class="level0 nav-vente-flash.html">
</
li>
</
ul>

J’utilise Firebug et il est impossible de styler avec mes CSS la Class “level0 nav-promotions-pas-cher.html” je pense que cela provient du .html en fin de Class.

Quelqu’un voit il une autre solution ? Ou si j’ai raison comment enlever le .html de la génération automatique des Class.

 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Bonjour,

Tu as mis le .html manuellement à la fin des réécritures d’url de catégories ou c’est fait automatiquement ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jguiss
Member
 
Avatar
Total Posts:  75
Joined:  2007-11-30
France / Avignon
 

Salut Sel !

Non non cela se fait automatiquement. C’est pas gênant mais si c’est bien a cause de ça que je n’arrive pas à styler mes Class cela le devient.

Merci de te pencher sur mon cas.

 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Dans le back office, il y a un paramètre qui permet d’indiquer quel suffixe ajouter aux urls de catégories. Est-ce que tu l’as modifié ? Je crois que par défaut il est vide.
Essaie ça. Si ça vient de là, tu peux ouvrir un bug, car c’en est un.

 
Magento Community Magento Community
Magento Community
Magento Community
 
jguiss
Member
 
Avatar
Total Posts:  75
Joined:  2007-11-30
France / Avignon
 

J’ai trouvé pour enlever le .html c’est dans :

Systeme > Configuration > Catalogue > Optimisation pour les moteurs de recherche > Suffixe d’URL des catégories

Par contre toujours impossible pour moi de styler mes Class !!!
C’est possible car j’ai ça :

class="level0 nav-forme”

Mais je n’y arrive pas !

 
Magento Community Magento Community
Magento Community
Magento Community
 
SeL_
Magento Team
 
Avatar
Total Posts:  1140
Joined:  2007-10-10
Paris, France
 

Là, il s’agit de CSS, pas de Magento.

Tu as signalé l’anomalie dans le bug-tracking ?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2