Index

Modifier la couleur du menu

Par défaut, le menu principal est composé d'une barre de couleur primaire sur laquelle les liens sont affichés en blanc ou plus précisemment la couleur claire que vous avez défini dans votre configuration graphique (page LookWiki)

Définition des variables de couleur

La page PageCss permet de définir vos propres règles de style en css.
Un certain nombre de variables permettent de jouer sur les couleurs sans entrer dans des syntaxes css (qui demandent quelques compétences techniques).
Les variables sont définies dans :root{ } exemple 
:root{--primary-color:pink;}


Pour vous aider, ces variables sont déjà présentes dans votre PageCss, elles sont cependant mises en commentaire , à vous de les modifier et les activer en fonction de vos besoins.
/* un commentaire est placé entre ces caractères */

Pour activer des variables, il faudra :
  • enlever les caractères / et / sur la ligne souhaitée
  • mais également sur la 1ere ligne :root{ et sur la dernière ligne }

Les variables liées à la barre de menu

/* couleur de la barre de menu */
 --navbar-bg-color: var(--neutral-light-color); 

 --navbar-text-color: var(--primary-color); 

 --navbar-link-color: var(--primary-color); 

 --navbar-link-bg-color: transparent; 

 --navbar-link-hover-color: var(--secondary-color);

 --navbar-link-bg-hover-color: transparent; 

 --navbar-border: none; 

 --navbar-border-radius: 0; 

 --navbar-shadow: none;


Le logo

Pour placer votre logo à gauche de la barre de menu : éditer PageTitre
Afin de ne pas alourdir votre site, pensez à minimiser votre fichier image, inutile d'avoir une taille de plus de 60px de haut...
La taille de l'image est limitée par la taille de la barre
#yw-topnav .navbar-brand img {  max-height: 2.9rem;}  /* soit environ 40px de haut */

Modifier cette valeur peut avoir un impact sur l'alignement du logo en version mobile
Il faudra modifier la marge du haut en version mobile
@media mobile and (max-width: 480px) {
	#yw-topnav .navbar-brand img {
	max-height: 3.9rem;
	width: auto;
	margin-left: .9rem;
	margin-top: 1rem;
	}
}
PDF