4.5 Changer la taille du logo

[Bocar]

Bonjour.

 

 

 

Le logo est à 200px de large par défaut.

 

 

Que faire pour changer la taille du Logo sur 4.5 svp ?

 

 

 

Merci.

[Youp3]

Bonsoir,

c’est parce que ce n’est pas avec la hauteur du logo qu’il faut jouer, mais avec la hauteur du header.

 

Essaie de modifier les propriétés CSS suivantes :

--header--height: 80px;
--responsive-header--height: 55px;

En live sur ton site, quand je désactive la propriété --header--height, le logo devient énorme.

 

Mais attention à ne pas définir une hauteur trop grande, car les éléments situés à la droite du logo sont centrés en hauteur et cela pourrait ne plus être très ergonomique.

 

PS : les outils de dev de Firefox sont tes amis pour tester des modifications CSS/HTML en live.

[Youp3]

Bonjour,

 

en tout cas ce n’est pas dans le code HTML :

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>

Et tout ce que je trouve dans les CSS ou dans le PCA a un lien avec la hauteur, mais pas la largeur.

Tu passes bien par éditer le thème, puis onglet logo pour utiliser ton image personnalisée ?

[Bocar]

Il y a 5 heures, Youp3 a dit :

Tu passes bien par éditer le thème, puis onglet logo pour utiliser ton image personnalisée ?

Oui.

 

 

On ne peut pas ajouter un width et un height à ce code :

<a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" alt='{setting="board_name" escape="true"}'></a>

?

 

 

Merci.

[Youp3]

Tu peux mais il sera écrasé par le css associé il me semble.

Cherche logo dans les css.

[Bocar]

#elLogo{
	flex: 0 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	height: var(--header--height);
}

ou

	#elLogo img {
		max-width: 100%;
		max-height: var(--logo--height);
	}

dans core > global > framework > global.css ?

 

 

Ou alors

		#elLogo img {
			max-height: var(--responsive-logo--height);
		}

dans core > global > responsive > global.css ?

 

 

 

Merci @Youp3.

Edited October 18, 2020 by Bocar

[Youp3]

Tout dépend de la configuration de ton thème (largeur flexible ou non).

Le mieux c’est que tu testes, car de mon côté je n’ai pas regardé plus précisément.

[Bocar]

il y a 19 minutes, Youp3 a dit :

Tout dépend de la configuration de ton thème (largeur flexible ou non).

Le mieux c’est que tu testes, car de mon côté je n’ai pas regardé plus précisément.

OK, mais où dois-je mettre le width et le height pour le logo ?

[cybero]

Hello,

 

normalement toute surcharge de css doit se mettre dans le fichier custom.css

Ce fichier est chargé en dernier justement dans le but d'être prioritaire

 

C'est comme cela jusqu'en version 4.4 en tout cas.

 

 

 

 

Ce que ne comprends pas, c'est que le logo doit prendre la taille de celui que tu uploads, ce n'est pas le cas ?

 

[Bocar]

Non.

 

 

Je prends le "class" du logo et je lui attribue un width et un height ?

 

 

Merc @cybero et @Youp3.

Edited October 19, 2020 by Bocar

[cybero]

Je n'ai pas quoi tester là, je ne garanti rien mais dans un premier temps, tu peux effectivement le mettre sur  #elLogo img  { .... }

Si ça ne suffit pas, essayer dans #elLogo { .... }

 

Mais comme dit par Youp3, je mieux est de tester par toi même

+ Attention à la conf du thème, flexible, responsive...

 

Edit: Je viens de voir qu'il y a des valeurs max-width et max-height qui pourraient t'ennuyer.

En théorie ça devrait donner quelque chose dans le genre:

/* xxx et yyy à remplacer par tes valeurs */

#elLogo img {
    width: xxx;
    height: yyy;
    max-height: unset;
    max-width: unset;
}

 

Edited October 19, 2020 by cybero

[Bocar]

Le logo est plus grand mais le menu ne descend pas.

Du coup, le logo est tronqué.

 

 

 

Par défaut, c'est comme ça :

 

[Bocar]

Ça fonctionne.

 

 

Merci @Youp3.