[RÉGLÉ] Rendre le logo Protostar Responsive

[Myrogis]

Bonjour à tous !

Je suis en train de refaire un site internet pour ma boite, j'ai une petite question:

J'utilise le template de base de Joomla, protostar et le soucis c'est que le logo n'est pas responsive.
Alors que tout mes autres modules le sont. Le logo lui reste en 125x125 quoi qu'il advienne

Quelqu'un aurait une idée ?

D'avance merci

Myrogis

[Myrogis]

Re : Rendre le logo Protostar Responsive

Up svp :'(

[Rajoz]

Re : Rendre le logo Protostar Responsive

Bonjour Myrogis,

Quand on sélectionne l'image du logo dans les paramètres de Protostar, cette image (comme les autres du template) est responsive. Le CSS qui s'y applique est :

img {    max-width: 100%;
    width: auto \9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

Ce CSS fait que quand la largeur de l'écran est inférieur à la largeur de l'image, celle-ci commence à diminuer et la hauteur aussi proportionnellement. Note: dans le cas du logo, le header n'est pas limité en hauteur donc il n'impacte pas la taille de l'image.

On voit bien cet effet responsive en choisissant une image de plus grande taille. Prends par exemple dans Joomla!, l'image images/headers/blue flower.jpg qui fait 700x180 px.

L'image du logo réagit comme celle des modules, ici image de 700x180 px en logo + module en position-3 :

sur écran large de 1024px :


sur écran large de 320px :


Avec une image de 125x125 px il faudrait que l'écran ait une largeur inférieure à environ 125 pixels (plus les marges) pour que l'image commence à diminuer de taille d'affichage. Je ne connais pas de smartphone dont l'écran soit inférieur à 125px donc ton image ne change pas de dimension.

Qu'attends-tu exactement comme réaction de la part du logo (125x125 px) et pour quelle dimension d'écran ?
As-tu un module publié en position-0 (habituellement Recherche) ?

Amicalement,
Rajoz

[Myrogis]

Re : Rendre le logo Protostar Responsive

Bonjour Rajoz,

Ce que je souhaiterai c'est que l'architecture de mon site reste la même qu'importe l'appareil utilisé.

ex:
site en full screen classique

et sur un iphone 6 par exemple:



J'aurai souhaité que le logo de ma société ne soit pas aussi gros que cela.

est ce possible ?

Merci d'avance !

Myro

[Rajoz]

Re : Rendre le logo Protostar Responsive

Bonjour Myrogis,

J'ai encore un doute sur ce que tu souhaites obtenir :

Ce que je souhaiterai c'est que l'architecture de mon site reste la même qu'importe l'appareil utilisé.
J'aurai souhaité que le logo de ma société ne soit pas aussi gros que cela.

Ce qui provoque mon doute c'est le mot "architecture". Je le vois mal s'appliquer à seulement la dimension du logo. S'agit-il de l'architecture du bandeau d'en-tête avec logo + nom entreprise + image ?

En pratique, selon ce que désigne "architecture", il y a deux possibilités.

1) Dimension du logo seulement
- logo plus petit placé en haut et au milieu.
- reste du bandeau (nom entreprise + image) placé en dessous.


2) Dimension du logo et architecture du bandeau
- logo encore plus petit (doit être sur la même ligne que le reste du bandeau)
- bandeau conservant son architecture : logo + nom + image


Tu ne réponds pas à ma question concernant la partie droite du bandeau de l'en-tête contenant le nom et l'image de droite. S'agit-il bien comme je le suppose d'une seule image mise dans un module de type Contenu personnalisé publié en position-0 ?

Désolé de poser tant de questions, mais c'est parce que je ne peux voir le site qu'au travers de tes réponses.

Amicalement,
Rajoz

[Myrogis]

Re : Rendre le logo Protostar Responsive

re, excuse je suis pas encore rodé sur le jargon technique ! lol

Effectivement quand je parle d'architecture je veux dire garder le bloc LOGO/Module en postion 0

Car j'ai bien un module en position 0 c'est un module d'image random. (l'image est composé du nom d'entreprise/images)

Donc oui ce que je souhaite c'est que tout reste aligné mais que le logo se rétrécisse comme mon module en position 0.

Afin de garde l'alignement.

(désolé le site est pour le moment qu'en localhost :/ )

Merci pour le temps que tu consacres à mon sujet,

Myrogis

[Rajoz]

Re : Rendre le logo Protostar Responsive

Bonjour Myrogis,

Dans l'en-tête de Protostar (header) il y a le logo (qui n'est pas une position au sens module) et la position-0 pour les modules. Le CSS de base fait que lorsque l'écran se réduit, la position-0 se met sous le logo et le logo est centré mais ne change de taille que s'il est plus large que l'écran.

Pour maintenir le logo et la position-0 alignés en adaptant les dimensions pour que les deux tiennent sur une ligne, il faut ajouter un peu de CSS. La solution la plus rapide c'est de l'ajouter à la fin du fichier templates/protostar/css/template.css

Il ne faudra pas oublier que Protostar est un template natif de Joomla! et que la modification de template.css peut être écrasée lors de la mise à jour de Joomla! Donc bien noter le CSS ajouté pour pouvoir le remettre si besoin après mise à jour.

Le code CSS qu'il faut ajouter à template.css est :

.header .brand {
    width: 12%;
    float: left;
}
.header .header-search {
    width: 84%;
    float: right;
    text-align: right;
}

En résumé : 12% à gauche pour le logo et 84% à droite pour la position-0 (le total ne fait pas 100% pour laisser une marge entre les deux)

Je n'avais pas les dimensions des images en position-0, donc il faudra peut-être retoucher les 12% du logo et les 84% de la position-0 pour obtenir un résultat plus adapté tout en évitant le saut à la ligne.

J'ai testé ces valeurs de 12% et 84% avec un logo de 125x125px et une image de 700x100px sur plusieurs largeurs d'écran dont mon smartphone.

Amicalement,
Rajoz

[Myrogis]

Re : Rendre le logo Protostar Responsive

Merci Rajoz !