remplacer le bouton ajouter au panier par une image

[binjow]

Bonjour à tous,

 

J'aimerai remplacer sur la page d’accueil et des catégories le texte "panier" par une image (le thème dont je pars est matrice).

Après un long bricolage (je suis tout juste débutant), j'ai réussi à obtenir ce que je voulais en modifiant les fichiers

 

product-list.tpl:

 

<a class="ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart.php')}?add&id_product={$product.id_product|intval}{if isset($static_token)}&token={$static_token}{/if}"<img src="/img/addcartsmall.jpg" width="55" height="15" align="baseline" /></a>

 

et le globall.css.

ici:

#center_column .products_block a.ajax_add_to_cart_button {
width: 55px;
height: 15px;
background-image: url(/img/addcartsmallhover.jpg);
padding: 0 55px 3px 0px;
}
#center_column .products_block a:hover.ajax_add_to_cart_button  {
width: 55px;
height: 15px;
background-image: url(/img/addcartsmall.jpg);
padding: 0 55px 3px 0px;
}

 

et ici:

 

#center_column .categorie_product a.ajax_add_to_cart_button {
width: 55px;
height: 15px;
background-image: url(/img/addcartsmallhover.jpg);
padding: 0 55px 3px 0px;
}
#center_column .categorie_product a:hover.ajax_add_to_cart_button  {
width: 55px;
height: 15px;
background-image: url(/img/addcartsmall.jpg);
padding: 0 55px 3px 0px;

 

Mais c'est du bricolage qui fonctionne avec firefox, ie et chrome sur mon pc, mais plus du tout à partir d'un safari sur mac. Donc voilà: pourriez vous m'aider à faire du travail de pro

 

2 images pour se rendre compte et les fichier modifiés en pj.

 

Merci de votre aide

fichier modif.zip

[daniel3000]

Bonjour,

 

je n'ai pas la solution, mais quelques questions qui pourraient peut-être t'aider:

- pour la taille sous mac: quelle est la taille réelle de ton image en fichier? la remette directement en 55x15px pourrait simplifier le travail du navigateur?

- pour la disposition sous mac: passer par un padding de 55 px à gauche pour positionner l'étiquette "panier" me semble limite (?). En effet, ceci signifie que l'on donne à la zone de cette étiquette une largeur à gauche supérieure de 55 px à la largeur de l'image. La zone de l'étiquette empiète donc nécessairement sur les zones "prix" et "détails". si firefox décide de superposer les zones, Mac décide apparemment de de les afficher les unes à la suite des autres. Un début de solution me semble donc être de supprimer le padding latéral et de positionner le bouton au plus simple (en suivant éventuellement ce qui est déjà fait pour les boutons 1 et 2), puis d'ajuster éventuellement en recalculant les dimensions des marges et des boutons.

Cordialement.

Daniel

[binjow]

Merci Daniel pour ton aide, je vais essayer d'intégrer plus "proprement" ces boutons panier. La taille de mon fichier est déjà de 55x15px, j'espère qu'un repositionnement avec le margin fera l'affaire...