remplacer le lien dans catégories par une image

[hkahil]

Bonjour quelqu'un pourrais me dire comment je peux remplacer le lien que j'ai dans une categorie par une image
merci

[rocky]

Topic moved from English forum

[jeckyl]

Bonjour quelqu'un pourrais me dire comment je peux remplacer le lien que j'ai dans une categorie par une image
merci

Bonjour,

de quel lien parlez vous ?

[hkahil]

dans le block categorie j'ai plusieurs lien par defaut
ipod,portables...
je voudrais mettre une icone a la place du lien

[jeckyl]

Bonjour,

regardez sur prestatools ou le prestastore je crois qu'il existe un module pour faire cela.

[hkahil]

bonjour je n'ai toujours rien trouver
personne pour m'aider svp!?

[Atch]

Bonjour,

Recette du Jour : Images dans block catégories à la sauce atchworks...

Ingrédients :

- category-tree-branch.tpl du module blockcatégorie
- global.css du theme
- et des images...

Préparation :

Commencez par récupérer l'id de la catégorie pour l'ajouter dans une nouvelle class à la balise de votre menu.
Pour cela ouvrez le fichier category-tree-branch.tpl et ajoutez ceci cat{$node.id}

Vous devriez avoir un truc de ce genre...

Faites un test avec votre navigateur et observez maintenant la source :

></pre>
<ul>

2eme étape : modification du global css.
Maintenant que l'on a récupéré les ID dans les class, il nous est facile de leur attribuer une image en background via le global css...

et ça donne :

div#categories_block_left ul.tree li {
   border:none;
   background-color: transparent;
   background-position: top left;
   background-repeat: no-repeat;
   padding: 3px 0 3px 25px;            <------ L'image fait 20 px de large dans mon exemple
......
}

div#categories_block_left ul.tree li.cat1 {background-image:  url('../img/cat/2.jpg')}
div#categories_block_left ul.tree li.cat2 {background-image:  url('../img/cat/3.jpg')}
div#categories_block_left ul.tree li.cat3 {background-image:  url('../img/cat/4.jpg')}
....

3°/ Vos images
Dans cette exemple, elles sont stockées dans le rep image du theme, avec comme nom, le numéro de la catégorie.

A vous d'arranger à votre sauce ensuite.

Servez c'est pret

V++

Atch

[hkahil]

merci atch ta sauce marche tres bien
par contre jai agrandi mon icone height:100px;
du coup quand je clique sur la zone de l'icone le lien n'est pas activé
faut que je clique sur la zone text
j'ai essayer d'aggrandir la zone text pour qu'elle prenne toute les dimensions de l'icone
marche pas

[hkahil]

petite question
est ce que ca peut marcher avec le modules
Horizontal Category Menu v1.0
Adds a Top Block to Display Category

[hkahil]

salut atch merci pour ta méthode
ca marche par contre j'aurais souhaiter afficher mes images en ligne et non en colonne
je n'arrives pas a mettre le display inline dans le css; ca ne fonctionne pas

peut tu me dire comment arranger cela stp

merci

[lexpat]

Et bien moi, je n'arrive même pas à la 2è étape car impossible d'afficher les classes dans le navigateur. Quelqu'un l'a déjà fait sur la version 1.3.2.3 ?

dans category-tree-branch.tpl (de mon theme) je remplace :

par:

et il ne se passe absolument rien...
Quelqu'un a une idée ?

Merci pour votre aide (ça fait deux jours que je cherche...)

[jeckyl]

Cela affiche quoi dans le code source de la page ?

[lexpat]

Il ne bouge pas :

<!-- Block categories module -->

Catégories


Les grigris
Les messages
Les perso



[removed]
// <![CDATA[
   // we hide the tree only if JavaScript is activated
   $('div#categories_block_left ul.dhtml').hide();
// ]]>
[removed]
<!-- /Block categories module -->

[clickforwebdesign]

je up car ca m'interesse car j'ai le mme probleme