Thème Margot


Le thème Margot sera le thème Yeswiki par défaut dans la prochaine version Doryphore.
Il est né d'une collaboration entre Margot Hincker et Sebastian Castro lors du sprint Yeswiki d'octobre 2019 à Vedène.


Palette de couleurs

Une très belle palette par défaut est proposée :

image Capture_couleurs_margot.png (7.0kB)

Ces couleurs sont utilisables très facilement pour vos boutons, mais aussi les panel, accordion, et les background : voir la page de démonstration (n'hésitez pas à double cliquer pour voir le code Yeswiki utilisé)

Paramétrage des couleurs

Dans la future version Doriphore, vous bénéficierez d'un sélecteur de couleurs et de polices.

En attendant, vous avez la possibilité de modifier les couleurs en copiant ces quelques lignes de code dans PageCss :
:root {
   --primary-color: #1A89A0;     /* **couleur de la barre de menu, des titres et des liens** */
   --secondary-color-1: #d8604c; /* **couleur utilisée pour les cadres des facettes** */
   --secondary-color-2:#D78958;  /* **couleur utilisée pour l'encadre du texte mis en valeur** */
   --neutral-color:#4E5056;      /* **couleur des textes** */
   --neutral-soft-color:#b0b1b3; /* **couleur du menu de la barre d'edition** */
   --neutral-light-color:#fff;   /* **couleur de fond de votre wiki** */

   --success-color: #3cab3b;     /* ** couleur utilisée pour les messages positifs par defaut vert ** */
   --danger-color: #d8604c;      /* ** couleur utilisée pour les messages d'erreur par defaut rouge ** */
   --warning-color: #D78958;     /* ** couleur utilisée pour les messages d'alerte par defaut orange ** */

  --main-text-color:var(--neutral-color);             /* **couleur des textes** */
  --main-text-fontsize: 17px;                             /* **taille du texte** */
  --main-text-fontfamily:'Noto Sans Regular', sans-serif; /* **police** */
  --main-title-fontfamily : 'Noto Sans Regular', sans-serif; /* **police** */
  --main-bg-color:var(--neutral-light-color);             /* **couleur de fond de votre wiki** */
  --main-container-bg-color:var(--neutral-light-color);   /* **couleur de fond de la partie centrale votre wiki** */
  
  --link-color: var(--primary-color); /* ** couleur des liens** */
--link-hover-color: var(--primary-color); /* ** couleur des liens au survol ** */
--navbar-bg-color: var(--primary-color); /* ** couleur de la barre de menu ** */
--navbar-text-color: var(--neutral-light-color);
--navbar-link-color: var(--neutral-light-color);
--navbar-link-bg-color: transparent;
--navbar-link-hover-color: rgba(255,255,255,0.85);
--navbar-link-bg-hover-color: transparent;
--navbar-border: none;
--navbar-border-radius: 0;
--navbar-shadow: none;
--header-bg-color: var(--neutral-light-color);
--header-text-color: var(--neutral-color);
--header-title-color: var(--primary-color);
--footer-bg-color: transparent;      /* **couleur de fond du pied de page ** */
--footer-text-color: var(--main-text-color);
--footer-title-color: var(--main-text-color);
--footer-border-top: 3px solid var(--neutral-soft-color);
--btn-border: none;
--btn-border-radius: .5em;
--checkbox-color: var(--primary-color);
}


Bouts de styles à ajouter dans votre PageCss

Pour modifier le titre H1

h1 {
    letter-spacing: initial;
    font-size: 2.2rem;
    font-weight: 600;
    background-color: var(--title-h1-color);
    color: white;
    display: inline-block;
    padding: .25em;

}