/ 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, <a href="?doc#/docs/fr/admin?id=ajouter-du-code-css-personnalis%c3%a9">voyez la documentation à ce sujet</a>. /



:root {

/ couleur des titres /
/ --title-h1-color:var(--neutral-color); /

• -title-h2-color:var(--secondary-color-2);
• -title-h3-color:var(--primary-color);
• -title-h4-color:var(--secondary-color-1);

/ couleur pour les messages positifs par defaut vert /
/ --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(--secondary-color-2);

/ --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); /

• }
• .scroll-container-toolbar {
  • position: sticky;
  • top: 0;
  • z-index: 980;

}

/ Fil d'ariane et bouton ouvrir nouvel onglet - selon le contexte /
.fil-ariane{margin-bottom:1em;}
.btn-iframe {display:none;}
.yeswiki-page-widget .fil-ariane{display:none;}
.yeswiki-page-widget .btn-iframe{display:block;}

/ Card/

.style-vertical .bazar-card {

• / background-color: var(--neutral-light-color); /
• background-color: white;
• box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.bazar-card .subtitle-area {

• font-size: .9rem;

}


.bazar-card .title-area {

• / font-size: 1.2rem; /
• font-size: 1rem;

}

/ Filtres ressources/

.results-container .panel-default {

• background-color: #DEF7E9;
  • border-color: #DEF7E9;
• -checkbox-color: var(--main-text-color);

}

.results-container .panel-body {

• background-color: white;
• margin: .5em;

}


.results-container .panel-default:not(.note-editor) > .panel-heading {

• color: var(--main-text-color);
• background-color: #DEF7E9;
• border-color: #DEF7E9;
• text-transform: uppercase;
• font-weight: bold;

}

/ EXPORT PDF /
@page {

• size: A4;
• margin: 10mm 10mm;

}

.pagedjs_pagebox {

• -pagedjs-margin-left: 10mm;
• -pagedjs-margin-right: 10mm;
• -pagedjs-margin-top: 10mm;
• -pagedjs-margin-bottom: 13mm;
• grid-template-columns:
  • [left] var(--pagedjs-margin-left)
  • [center] calc(
    • var(--pagedjs-pagebox-width) - var(--pagedjs-margin-left) - var(--pagedjs-margin-right)
  • )
  • [right] var(--pagedjs-margin-right);
• grid-template-rows:
  • [header] var(--pagedjs-margin-top)
  • [page] calc(
    • var(--pagedjs-pagebox-height) - var(--pagedjs-margin-top) - var(--pagedjs-margin-bottom)
  • )
  • [footer] var(--pagedjs-margin-bottom);

}

.pagedjs_pagebox > .pagedjs_area { padding: var(--pagedjs-padding-top) var(--pagedjs-padding-right) 0px var(--pagedjs-padding-left);}
@page:left {

• margin: 10mm;

}

@page:right {

• margin: 10mm;

}

.pagedjs_page.pagedjs_left_page .pagedjs_margin-bottom-left-corner > .pagedjs_margin-content::after,
.pagedjs_page.pagedjs_right_page .pagedjs_margin-bottom-right-corner > .pagedjs_margin-content::after
{

• content: '' !important;

}

h1, .yeswiki-publication h1 {

• page-break-before: avoid !important;

}

.pagedjs_page {font-size:14px;}
.pagedjs_page .img-matos{height:40px;}
.pagedjs_page .img-blog{width:120px;}
.pagedjs_page .gallery-container .image-container {height: 40px;}


.pagedjs_margin-bottom-center {

• background-image: url(custom/templates/bazar/images/kimiyo-Logo.jpg);
  • background-position: right bottom;
  • background-repeat: no-repeat;
  • background-size: 100px;

}

.yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page {

• background-color: white !important;
• background-size: cover;

}
.yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page h1, .yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page h2, .yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page h3, .yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page h4, .yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page h5, .yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page p {

• color: currentColor;
• color: #006277;
• font-size: 3em;

}

.yeswiki-publication .pagedjs_named_page.pagedjs_publication-cover_first_page .pagedjs_margin-bottom-center { background-image:none;}

.pagedjs_page [data-align-last-split-element="justify"] {

• text-align-last: left;

}
/ Taille de la fenetre pop up /
#yw-modal-iframe {

• height: 90vh;

}

/ RESSOURCES /
/.bandeau-infos{ background-color: var(--neutral-light-color);margin-top: 50px;}/
.BAZ_fiche_titre::after {

• content: none;
• }

.d-flex {display:flex;justify-content:flex-start;gap:1em;}
@media (width <= 800px) {

• .d-flex{display:flex;flex-direction:column;}

}

.entete{display: grid;

• grid-template-columns: auto auto;
• align-items: center;
• margin-bottom:2em;
• column-gap:2em;}

.entete-annuaire{

• display:flex;
• gap:2em;
• align-items: center;
• margin-bottom:2em;}

.entete-annuaire a.btn {padding:0;}


.moderation {

• • background-color: var(--secondary-color-2);
  • text-align: center;
  • border-radius: 8px;
  • font-weight: bold;
  • color: white;
  • font-size:small;
  • width:fit-content;
  • padding:0 .5rem;
• }

• • .entete .BAZ_fiche_titre { font-size: 1.8rem; }
• • .entete h2 { font-size: 1.4rem; }

@media (width <= 600px) {

• .entete{flex-direction:column;align-items: center;}
• .BAZ_fiche_titre{font-size:2rem;text-align:center;}
• .sous-titre{font-size:1.5rem;text-align:center;}
• .entete img{width:250px;height:auto;}

}
.bloc-titre{

• justify-content: space-between;
• display: flex;
• flex-direction: column;}

.infos-ressource {

• display: flex;
• gap:2em;
• justify-content: space-between;

}

.bloc-texte {

• background-color: white;
• padding: 1em;

}


.meta-donnees {

• min-width: 370px;
• max-width: 400px;
• background-color: #f5f5f5;
• padding: 1em;

}


.cadre {

• border:1px solid;
  • padding: 0.1em .5em;
  • margin:.5em;
  • white-space: pre;
  • word-break: break-word;
  • line-height: 35px;

}
.cadre.secondary-color-1{background-color:var(--secondary-color-1);color:white;}
.type-ressource-1{background-color: #6cc293;color:white;}
.type-ressource-2{background-color: #7ebbd6;color:white;}
.type-ressource-3{background-color:#b15a99;color:white;}

.thema {background-color:var(--secondary-color-1);color:var(--neutral-light-color); border: 1px solid var(--neutral-color);}

.picto-elements{

• display:flex;
• flex-wrap:wrap;
• gap:1em;
• padding-bottom: 2em;
• border-bottom: 3px solid white;
• margin-bottom: 2em;

}
.bloc-thema {

• border-radius: 5px;
• background-color: white;
• align-content: center;
• display: flex;
• flex-direction: column;
• width: 150px;
• justify-content: center;
• align-items: center;
• padding: .5em;
• text-align:center;
• }

.tag {

• color: #7ab1e8;
• background-color: white;
• border-radius: 10px;
• padding: 0px .3em;
• text-align: left;
• word-break: break-word;

}
span.tag::before {

• content: "#";

}

.btn {

• margin-top: .5em;
• }

.meta {

• font-size: .9em;
• opacity: .8;
• margin: 1em 0;
• color: var(--neutral-soft-color);

}

.picto-tempo{max-width:300px;}

.auteurs{

• margin-top: 2em;
• padding-top: 2em;
• border-top: 3px solid white;

}

---