Jump to content
Invision Board France
  • 0
Bocar

4.5 Changer la taille du logo

Question

Bocar

Bonjour.

 

 

 

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

 

 

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

 

 

 

Merci.

Share this post


Link to post
Share on other sites

12 answers to this question

Recommended Posts

  • 0
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 ?

Share this post


Link to post
Share on other sites
  • 0
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.

Share this post


Link to post
Share on other sites
  • 0
Youp3

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

Cherche logo dans les css.

  • Thanks 1

Share this post


Link to post
Share on other sites
  • 0
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 by Bocar

Share this post


Link to post
Share on other sites
  • 0
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.

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
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 ?

Share this post


Link to post
Share on other sites
  • 0
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.

 

image.png.ffa585ea54cfe04817fd9326c5cf1d0b.png

 

 

 

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 ?

 

Share this post


Link to post
Share on other sites
  • 0
Bocar

Non.

 

 

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

 

 

Merc @cybero et @Youp3.

Edited by Bocar

Share this post


Link to post
Share on other sites
  • 0
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 by cybero

Share this post


Link to post
Share on other sites
  • 0
Bocar

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

Du coup, le logo est tronqué.

 

391670341_Logotropgrand.thumb.jpg.0440d48bc47b871134acd60115ad9d3d.jpg

 

 

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

 

1632232426_Logoentaillepardfaut.thumb.jpg.0c19c6eb5140ef98daf63feb72b0ebac.jpg

Share this post


Link to post
Share on other sites
  • 0
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.