Jump to content
Franky4doigts

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

Recommended Posts

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 by Franky4doigts (see edit history)

Share this post


Link to post
Share on other sites

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 by Szed (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More