/
Voici un exemple de css custom pour le theme margot, il agit sur les variables css non personnalisables dans le theme et permet de faire des css sur mesure.
Chaque ligne ci-dessous est à décommenter pour etre utilisée
Pour en savoir plus, voyez la documentation sur https://yeswiki.net/?DocumentationThemeMargot
/
/ :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); /
/ --success-color: #3cab3b; /
/ couleur pour les messages d'erreur par defaut rouge /
/ --danger-color: #d8604c; /
/ couleur pour les messages d'alerte par defaut orange /
/ --warning-color: #D78958; /
/ couleur de fond de la partie centrale votre wiki /
/ --main-container-bg-color:var(--neutral-light-color); /
/ couleur des liens /
/ --link-color: var(--primary-color); /
/ couleur des liens au survol /
/ --link-hover-color: var(--primary-color); /
/ couleur de la barre de menu /
/ --navbar-bg-color: var(--primary-color); /
/ --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); /
/ couleur de fond du pied de page /
/ --footer-bg-color: transparent; /
/ --footer-text-color: var(--main-text-color); /
/ --footer-title-color: var(--main-text-color); /
/ --footer-border: 3px solid var(--neutral-soft-color); /
/ --btn-border: none; /
/ --btn-border-radius: .5em; /
/ --checkbox-color: var(--primary-color); /
/ } /
.bazar-cards-container .bazar-card {
/ titre de la card /
.bazar-cards-container .bazar-card .title {
/ sous-titre / description de la card /
.bazar-cards-container .bazar-card .subtitle-area {
.bazar-cards-container .bazar-card:hover, / au survol /
.bazar-cards-container .bazar-card:active, / au clic ou toucher sur tel. portable /
.bazar-cards-container .bazar-card:focus / a la navigation par touche Tab, accessibilité /
{
/ titre de la card au survol /
.bazar-cards-container .bazar-card:hover .title,
.bazar-cards-container .bazar-card:active .title,
.bazar-cards-container .bazar-card:focus .title
{
/ sous-titre / description de la card au survol /
.bazar-cards-container .bazar-card:hover .subtitle-area,
.bazar-cards-container .bazar-card:active .subtitle-area,
.bazar-cards-container .bazar-card:focus .subtitle-area {
.bazar-cards-container .bazar-card .visual-area {
/ :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); /
/ --success-color: #3cab3b; /
/ couleur pour les messages d'erreur par defaut rouge /
/ --danger-color: #d8604c; /
/ couleur pour les messages d'alerte par defaut orange /
/ --warning-color: #D78958; /
/ couleur de fond de la partie centrale votre wiki /
/ --main-container-bg-color:var(--neutral-light-color); /
/ couleur des liens /
/ --link-color: var(--primary-color); /
/ couleur des liens au survol /
/ --link-hover-color: var(--primary-color); /
/ couleur de la barre de menu /
/ --navbar-bg-color: var(--primary-color); /
/ --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); /
/ couleur de fond du pied de page /
/ --footer-bg-color: transparent; /
/ --footer-text-color: var(--main-text-color); /
/ --footer-title-color: var(--main-text-color); /
/ --footer-border: 3px solid var(--neutral-soft-color); /
/ --btn-border: none; /
/ --btn-border-radius: .5em; /
/ --checkbox-color: var(--primary-color); /
/ } /
.bazar-cards-container .bazar-card {
- border: 3px solid var(--primary-color); / couleur et épaisseur de bordure de la carte (card), on peut mettre directement le code couleur #ee0022 au lieu de var(--variable-de-la-couleur) /
- background-color: var(--secondary-color-1); / couleur du fond de la carte (card) /
/ titre de la card /
.bazar-cards-container .bazar-card .title {
- color:var(--primary-color); / couleur du texte /
/ sous-titre / description de la card /
.bazar-cards-container .bazar-card .subtitle-area {
- color:var(--secondary-color-2); / couleur du texte /
.bazar-cards-container .bazar-card:hover, / au survol /
.bazar-cards-container .bazar-card:active, / au clic ou toucher sur tel. portable /
.bazar-cards-container .bazar-card:focus / a la navigation par touche Tab, accessibilité /
{
- border: 3px solid var(--secondary-color-1); / couleur et épaisseur de bordure de la carte (card), on peut mettre directement le code couleur #ee0022 au lieu de var(--variable-de-la-couleur) /
- background-color: var(--secondary-color-2); / couleur du fond de la carte (card) /
/ titre de la card au survol /
.bazar-cards-container .bazar-card:hover .title,
.bazar-cards-container .bazar-card:active .title,
.bazar-cards-container .bazar-card:focus .title
{
- color:var(--secondary-color-1); / couleur du texte /
/ sous-titre / description de la card au survol /
.bazar-cards-container .bazar-card:hover .subtitle-area,
.bazar-cards-container .bazar-card:active .subtitle-area,
.bazar-cards-container .bazar-card:focus .subtitle-area {
- color:var(--secondary-color-1); / couleur du texte /
.bazar-cards-container .bazar-card .visual-area {
- border-bottom: none; / on cache une bordure de séparation blanche entre l'image et le bas de la carte /