Retour à lʼaccueil de la documentation

Personnaliser l'apparence


Pour définir le style graphique de votre wiki, vous pouvez jouer sur les couleurs, les polices et les illustrations.
La page LookWiki vous permet de changer le style très facilement : accessible depuis le menu roue crantée Apparence

Thème graphique Margot

Le thème Margot est le thème standard livré avec la dernière version de YesWiki.

Squelette : choisir la disposition du site

Il propose plusieurs squelettes qui permettent de jouer sur la position du menu :
Modèle classique avec barre de menu horizontale
Choisir le squelette : 1-col

image Capture_dcran_classique.png (0.1MB)
Barre de menu verticale

Choisir le squelette : 1-col-verticalmenu

image Capture_dcran_vertical.png (96.2kB)
Avec une side bar

Choisir le squelette : 2-cols-left ou 2 cols-right
image Capture_dcran_2colsright.png (0.1MB)

Style

Margot
Avec le style margot.css la couleur primaire s'appliquera à la barre de menu et à vos liens hypertextes.
Margot-fun
Un style graphique moins conventionnel avec une position du menu sous le bandeau header et une forme
Margot light
Avec le style light.css la barre de menu sera blanche et seuls vos titres et les boutons "primaire" auront la couleur primaire

Choisir des couleurs

Générateur de palette de couleurs et outil de test de contraste : https://coolors.co/

Ou si vous n'avez pas la moindre idée, laissez-faire le hazard : https://randoma11y.com/



Pour ajuster les couleurs plus précisemment

Si vous n'avez pas peur d'un peu de code
Des variables CSS sont disponibles dans le thème Margot pour vous aider à affiner le design :
couleur des titres
couleur des liens
couleur de la barre de menu...

Sur chaque wiki, il existe une page nommée PageCss qui permet d'ajouter du code CSS pour définir des styles personnalisés

Un extrait de code est disponible par défaut dans PageCss :
/* :root { */

/* couleur des titres */
/* --title-h1-color:var(--neutral-color); */
/* --title-h2-color:var(--primary-color); */
/* --title-h3-color:var(--secondary-color-1); */
/* --title-h4-color:var(--secondary-color-2); */

/*}*/

Ce code définit des variables de couleurs qui s'appliquent à l'ensemble du wiki.
Titre de niveau 1 - couleur neutre
titre de niveau 2 - couleur primaire
titre de niveau 3 - couleur secondaire 1
titre de niveau 4 - couleur secondaire 2
Dans l'exemple qui est fournit par défaut vous remarquez les caractères /* et */ : c'est le code pour commenter une ligne, c'est à dire signaler qu'elle ne doit pas être appliqué.

Si vous souhaitez commencer la personnalisation il faudra d'abord enlever les commentaires pour les lignes que vous souhaitez personnaliser :
:root { 
--title-h4-color:var(--neutral-color);
}


Il est possible d'utiliser soit les couleurs en hexadecimal (#092e67) soit les variables de couleurs qui correspndent aux couleurs que que vous avez choisies via la page Apparence

[IMPORTANT!]Après avoir fait une modif de style CTRL + MAJ + R pour vider le cache du navigateur

Pour aller plus loin

En insérant des instructions css vous allez pouvoir appliquer tous les éléments de style que vous souhaitez.
Voici un lien vers la documentation de référence pour apprendre le CSS : https://www.w3schools.com/css/css_syntax.asp

Choisir des polices


Si vous ne possédez pas de charte graphique, voici un site sur lequel vous pouvez prendre des exemples de combinaisons de police : https://typespiration.com/

Modifier le favicon

Le favicon est le petit logo qui apparait sur l'onglet de votre navigateur à coté du titre de votre wiki. Par défaut c'est le logo YesWiki ✌️ mais l'idéal est de le remplacer par le logo de votre projet !
  • Le favicon est une version miniature de votre logo : il doit être carré, il est recommandé de redimensionner votre image au format 16px*16px ou 32px*32px.
  • Pour modifier votre favicon vous devez d'abord le télécharger sur une page de votre wiki, par exemple sur la page "Gérer site" après le racourci vers les pages spéciales (menu, pied de page, etc...), c'est un bon endroit pour laisser les infos réservées à l'administrateur.
  • Une fois que vous avez téléchargé votre favicon sur la page (grâce à la fonction attach), copiez l'url complète de l'image (clic droit sur l'image / copier l'url)
  • Dans Gestion du site / onglet fichier de configuration , coller l'url de votre image dans le paramètre favicon
Il est également possible d'utiliser un emoji (en copiant collant depuis cette page par exemple : https://getemoji.com

A toi de jouer !

  • Recherche les codes couleurs de ta charte ou choisis des couleurs dans une palette. Puis fais des essais de personnalisation du thème avec ces couleurs.
  • Remplace le favicon de ton wiki par le logo de ton projet ou une image pertinente

Tu es en difficulté ou tu as des questions ? N'hésite pas à solliciter la communauté YesWiki sur le forum