Jump to content

logo imprimé et agrandir


Recommended Posts

Bonjour,

Je cherche sur la page produit à changer le logo bullet-alt qui correspond au logo communs de imprimer et agrandir.

Désirant mettre 2 logos different à la place, pourriez vous m' orienter sur la facon de m'y prendre.

Merci beaucoup

Link to comment
Share on other sites

hello,

Dans le repertoire de ton theme/css le global.css recherche :

#primary_block ul#usefull_link_block li a, #primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   text-decoration:none;
   color:#76839b;
   font-size:0.9em;
   background: white url('../img/bullet_alt.jpg') no-repeat top left;
   padding-left:15px;
   height:15px;
}



et colle juste en dessous :

#primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   background: white url('../img/bullet_alt2.jpg') no-repeat top left;
}



il ne te reste plus qu'a creer une autre image bullet_alt2.jpg et la mettre avec l'autre dans le repertoire img de ton theme

Link to comment
Share on other sites

Bonjour,

Je sais pour le [résolu], mais je vous demande un peu de temps, je n' ai pas testé et je travaille à la semaine en déplacement.

Merci de votre compréhension et d' avance merci pour l' aide apportée.

Link to comment
Share on other sites

hello,

Dans le repertoire de ton theme/css le global.css recherche :

#primary_block ul#usefull_link_block li a, #primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   text-decoration:none;
   color:#76839b;
   font-size:0.9em;
   background: white url('../img/bullet_alt.jpg') no-repeat top left;
   padding-left:15px;
   height:15px;
}



et colle juste en dessous :

#primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   background: white url('../img/bullet_alt2.jpg') no-repeat top left;
}



il ne te reste plus qu'a creer une autre image bullet_alt2.jpg et la mettre avec l'autre dans le repertoire img de ton theme



Un grand merci pour cette superbe aide, merci beaucoup
Link to comment
Share on other sites

Bonjour,

Je me permet de relancer ce post pour faire la meme chose avec l'encadré de 'envoyer à un ami'

Merci de bien vouloir me detailler comment trouver les ligne css a ajouter car je souhaiterai comprendre les reponses trouvés de votre part.

Merci beaucoup

Link to comment
Share on other sites

Bonjour,

Pour toutes ces modifications tu as besoin d'avoir le code html de la page et le global.css.
Ce code se trouve dans product.tpl, c'est parfois difficile de le retrouver si il y a beaucoup de lignes de codes, personnellement je me sert de l'extension webdevelloper de firefox, une barre s'affiche en haut de mon ecran, je clique sur informations > afficher les informations de l'element et je n'ai pu qu'à cliquer sur la page sur n'importe quel objet pour voir s'afficher toutes les informations.
En cliquant sur 'envoyer à un ami' par exemple je peux voir parmis les ancetres de cet element : ul#usefull_link_block
c'est a dire balise

  • avec identificateur usefull_link_block.
    une petite recherche dans le fichier product.tpl pour usefull_link_block donne ceci :
></pre>
<ul>
           {if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
{l s='Print'}

           {if $have_image && !$jqZoomEnabled}
{l s='View full size'}
           {/if}


là on peut reconnaitre les deux balises

correspondant à 'imprimer' et à 'agrandir'
Premier obstacle il n'y a pas de balise pour 'envoyer à un ami' mais on peut voir une ligne HOOK EXTRA LEFT
En fait 'envoyer à un ami' etant un module il s'accroche sur ce crochet.
donc il faut faire un tour dans repertoire modules > sendtoafriend où on trouve dans la page product_page.tpl le
manquant :
{l s='Send to a friend' mod='sendtoafriend'}


donc le code à la sortie va ressembler à ceci :

></pre>
<ul>
{l s='Send to a friend' mod='sendtoafriend'}
{l s='Print'}

           {if $have_image && !$jqZoomEnabled}
{l s='View full size'}
           {/if}


Là on peux voir que les deux premiere lignes n'ont pas d'identificateurs ni de classes sur leurs

ni sur leur d'ailleurs. La troisieme par contre à une classe 'span_link' sur sa balise
C'est la raison pour laquelle il y a la même image pour 'envoyer à un ami' et 'imprimer' et differente pour 'agrandir' (après les modifs des posts précédents).

Maintenant on peux faire une recherche pour 'usefull_link_block' dans le fichier global.css :

#primary_block ul#usefull_link_block li a, #primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   text-decoration:none;
   color:#76839b;
   font-size:0.9em;
   background: white url('../img/bullet_alt.jpg') no-repeat top left;
   padding-left:15px;
   height:15px;
}
#primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   background: white url('../img/bullet_alt2.jpg') no-repeat top left;
}



'#primary_block ul#usefull_link_block li a' >>> style pour la balise




devient:





et on rajoute en dessous de :

#primary_block ul#usefull_link_block span.span_link, #primary_block ul#usefull_link_block span.span_link:hover{
   background: white url('../img/bullet_alt2.jpg') no-repeat top left;



la ligne :

#primary_block ul#usefull_link_block li a.send_friend{
   background: white url('../img/bullet_alt3.jpg') no-repeat top left;
}



Il ne reste plus qu'à créer une troisième image bullet_alt3.jpg

J'espere avoir suffisamment détaillé et n'avoir pas fait une erreur mais j'ai testé et je vois bien trois images.
En esperant t'avoir aidé à mieux cerner le processus. Bon courage.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...