[Résolu]Changer logo en fonction de la résolution ecran

[Franky4doigts]

Bonjour,

 

En fait c'est relativement simple mais je ne vois pas comment faire.

 

J'utilise un thème responsive.

Sur un écran PC le logo se voit clairement, pas de problème.

 

Par contre si je passe sur un smartphone, le logo est carrément illisible... "moche".

 

Du coup comment faire pour qu'au dessous d'une résolution on appelle le logo1.jpg et au dessus le logo.jpg ?

 

La personne pour qui je monte la boutique ne souhaite pas activer le thème mobile sinon ca ne m'aurait pas posé de problème.

 

Encore merci à vous !

Edited November 29, 2013 by Franky4doigts (see edit history)

[Szed]

Deux possibilités simple :

1. Votre logo est un background en CSS. De ce fait, vous utilisez les media query pour le modifier sous une certaines résolution
2. Votre logo est une image, comme c'est le cas normalement par défaut sous PS. Vous lui rajouter une classe par exemple : big-screen-only. Sous le logo, vous rajouter un second logo, le petit, avec une classe phone-only par exemple. Et en CSS et à l'aide des media query, vous n'affichez phone-only et cacher big-screen-only que sous une certaine résolution. Bon, ca force à appeler 2 logo dans tout les cas... :/

Edited November 7, 2013 by Szed (see edit history)

[Franky4doigts]

Merci de votre réponse!

 

Actuellement, je vois la technique grâce a vos explications par contre je n'ai pas les compétences pour le mettre en place.

Je vais me pencher sur les media query et tenter de faire quelque chose ...

 

Au pire je reviendrais ici pour de plus ample explication!

 

Encore un grand merci.

[Vinum]

Bonjour,

l'autre solution si votre logo n'est pas très complexe c'est de le convertir en svg. Il n'y aura ainsi aucune perte de qualité lors du redimensionnement de l'image.

[Franky4doigts]

La modification se trouve dans:

...\TONTHEME\css\320.css (chez moi ligne 1390) j'ai modifié la taille en passant de 141px à 300px.

 

Le problème c'est qu'il faut également bouger le panier et la barre de recherche.

 

Attention, c'est uniquement des modifs pour les mobiles, pour les tablettes il faut modifier de la même façon les fichier 480.css (de memoire) mais j'ai pas encore testé puisque j'ai pas de tablette sous la main .