/ 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(--primary-color); /
/ --title-h3-color:var(--secondary-color-1); /
--title-h4-color:var(--neutral-soft-color);

/ 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(--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: 0;

/ --checkbox-color: var(--primary-color); /

• }

#yw-topnav .navbar-brand img {

• margin-top: 0;

}


@media (max-width: 1399px) {
#yw-topnav .navbar-nav > li > a.btn-link, #yw-topnav .navbar-nav > li > .btn-group > a.btn-link, #yw-topnav .navbar-nav > li > a:not(.btn), #yw-topnav .navbar-nav > li > .btn-group > a:not(.btn), #yw-topnav .navbar-brand {

• font-size: 1rem;

}
}

h2 {

• width: fit-content;
• color: white;
• background-color: var(--primary-color);
• clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
• padding: .3em;
• text-transform:uppercase;

}

.lead {

• font-size: 1.4rem;
• font-weight: 300;
• padding: 1em 0;

}

.titre_type_fiche{display:none;}

.form-control .select-allday {display:none;}

/ Bloc Contribuez page accueil /
section.rotate-1{transform: rotate(-1deg);}
section.rotate-1 container{transform: rotate(1deg);}
section.white h2 {background-color:transparent;width:auto;}
section.white .btn-info {

• background-color: white;
• color: var(--primary-color) !important;
• text-transform:uppercase;
• opacity:1;

}


section.white .btn-info:hover {transform:rotate(-5deg);}
section.white .btn-info::after {

• content: "\f061";
• font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
• font-weight: 900;
• margin-left: 8px;

}

/ images dans template card en fonction de la structure /
.bazar-card .visual-area.placeholder {

• background-image: none;
• background-color: white;

}

.style-vertical .bazar-card {

• border-radius: 0;
• border: 1px solid #2b2525;
• background-color: transparent;

}


.style-vertical .bazar-card .subtitle-area {

• font-size: 0.8rem;
• font-weight: 600;
• margin-right: 0.5rem;

}

.bazar-card .title-area {

• font-size: .8em;
• / height: 105px; /

}



.bazar-card .visual-area.placeholder {

• margin-top: .3em;

}


.logo-oasis {

• background-image: url('./custom/images/logo-oasis.png');
• background-repeat: no-repeat;
• background-position: center;
• background-size: contain;
• height: 90%;

}

.logo-hpf {

• background-image: url('./custom/images/logo-hpf.png');
• background-repeat: no-repeat;
• background-position: center;
• background-size: contain;
• height: 90%;

}

.logo-hl {

• background-image: url('./custom/images/logo-hl.svg');
• background-repeat: no-repeat;
• background-position: center;
• background-size: auto;
• height: 90%;

}
/

• /

/ Uniformisation des couleurs des facettes /
.input-group-addon {

• border-radius: 0;

}
.btn-sortby {

• border: 1px solid var(--primary-color)!important;

}

.sort-by button {

• border: 2px solid var(--primary-color);

}

.panel-primary .panel-title a.bazar-entry {
color: var(--neutral-light-color);
}

.panel {

• border-width: 1px;
• border-radius: 0;

}

.panel-default {

• border-color: var(--primary-color);
• -checkbox-color: var(--primary-color);

}

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

• background-color: var(--primary-color);
• border-color: var(--primary-color);

}

.results-container .filter-box:nth-of-type(2), .results-container .filter-box:nth-of-type(5) {

• -neutral-color: var(--primary-color);

}


.results-container {

• font-size: .8em;

}

.filter-box .filter-node {

• margin: 0.1em 1em;

}

[type="checkbox"] + span:not(.lever) {

• line-height: 1.1rem;
• font-size: 1em;

}

.bazar-list-dynamic-container .pagination {

• margin-top: 1em;

}

.bazar-list h4.panel-title {

• / color: var(--bs-card-title-color); /
• color: var(--primary-color);

}
/ Style horizontal pour ressources sur home page /

.btn-voir {

• width: fit-content;
• background-color: var(--secondary-color-2);
• color: var(--secondary-color-1);
• text-transform: uppercase;
• padding: 0 .3em;

}

• .btn-voir::after {
  • content: "\f061";
  • font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  • font-weight: 900;
  • margin-left: 8px;

}

.btn-voir:hover {

• transform: rotate(-5deg) ;

}



.style-horizontal .bazar-card .content {

• justify-content: space-evenly;

}


.ressource-title {

• font-size: 1.2rem;
• color: var(--secondary-color-1);

}

.style-horizontal .bazar-entry.bazar-card.with-image {

• border: 1px solid;

}

.chronologie .field{

• transform: rotate(5deg);
• color: white;
• text-transform: uppercase;
• font-size: .9em;

}

.chronologie {

• background-color: var(--secondary-color-1);
• transform: rotate(-5deg) translateY(-12px);

padding: 1em .7em;
width: fit-content;
align-self: end;
color:white;
}

.style-horizontal .bazar-card .content {

• overflow: hidden;

}


/

---

/ / Fiche ressource /
/

---

/ .BAZ_fiche_titre {

• font-size: 2rem;

}

.BAZ_fiche_titre::after {

• content: none;

}


.checkbox {

• / margin-bottom: 1rem; /
• margin-bottom: 0;
• margin-left: 1rem;

}

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

.infos-ressource {

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

}

.content-ressource img {max-width:100%;}
@media (max-width: 768px) {

• .infos-ressource {
• flex-direction: column;
• }

}

@media (min-width: 1200px) {
.content-ressource {

• min-width: 800px;

}
}


.bloc-texte {

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

}


.meta-donnees {

• min-width: 370px;
• max-width: 400px;

}

.bandeau-infos.ressource-video {

• margin-top: 160px;

}

.embed-video {

• margin-top: -130px;

}
/ corriger le pb de ratio des vidéos /
.embed-video iframe {

• / max-height: 350px; /
• max-height: none;

}


/ .ratio-16x9 { --bs-aspect-ratio: 40%;} /


.embed-video .BAZ_lien {

• word-break: break-word;

}



.cadre {

• border: 1px solid var(--primary-color);
• padding: 0.1em .5em;
• margin:.5em;

/ white-space: pre;/

• word-break: break-word;
• line-height: 35px;

}

.duree {

• margin-top: 2em;
• /border: 1px solid;/
• width: fit-content;
• padding: 0 .5em;
• color: var(--neutral-soft-color);
• opacity:.7;

}

.objectif {

• background-color: var(--primary-color);
• color:white;
• white-space: pre;

}

.thema { color: var(--primary-color);

• width:fit-content;}

.public{

• background-color:var(--secondary-color-2);
• border:none;
• color:white;
• white-space: pre;}
• .chronologie{background-color:var(--secondary-color-1);color:white;}

.meta {

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

}


/

---

/ / En mode édition des fiches /

.info-collecte {

• background-color: #white;
• padding: 2em;

}


.saisie-meta-donnees {

• background-color: #ff950033;
• padding: 2em;

}



.saisie-moderateur, .infos-moderateur {

• background-color: #fff1dd;
• padding: 2em;

}

/

• /

/ Entete page principale /
.logos-collectif {

• transform: rotate(5deg);
• margin-top: 40px;

padding-bottom: 100px;

• margin-bottom: -100px;

}

.logos-collectif > .container {

• transform: rotate(-10deg);
• display: grid;
• • grid-template-rows: 1fr 1fr;
• height:300px;
• grid-template-columns: 40% 60%;

gap: 10px;
place-items: center;
}

section.logos-collectif > div:nth-child(1) > div:nth-child(2) {

• grid-row: 1/3;

}

section.logos-collectif > div:nth-child(1) > div:nth-child(3) {

• grid-row: 1/1;

}

section.logos-collectif > div:nth-child(1) > div:nth-child(4) {

• grid-row: 2/2;

}

.logos-collectif .hpf img{

• width: 180px;
• height: auto;

}
.home-header{padding:2em;}

section.pattern-border {
/box-shadow: var(--primary-color) 10px 10px;/
}


@media (max-width: 768px) {

.logos-collectif {

• padding-bottom: 0;

}
}

/ Home page Section DECOUVRIR /

.bloc-decouvrir {
/ border: 4px solid var(--primary-color);/

• padding: 1em;
• height: 330px;
• width: 330px;
• display: flex;
• flex-direction: column;
• justify-content: center;
• align-items: center;
• text-align: center;
• font-weight: 100;
• position: relative;
• z-index:2;

}


.bloc-decouvrir::after {

• position: absolute;
• top: 30px;
• left: 30px;
• width: 300px;
• height: 300px;
• content: "";
• z-index: -1;

}
.bloc-decouvrir.vert::after {background-color: var(--primary-color);}
.bloc-decouvrir.violet::after {background-color: var(--secondary-color-1);}
.bloc-decouvrir:hover::after {

• transform: rotate(5deg) ;

}


.bloc-decouvrir h3 {

• text-transform: uppercase;
• color: var(--primary-color);

}
.bloc-decouvrir .attached_file {

• background-color: var(--secondary-color-2);
• color: white;
  • padding: .5em .3em;
• transform: rotate(4deg);

}

.bloc-decouvrir section.pattern-border {

• / padding: 2rem; /
• padding: .5rem;

}
/Effet survol bloc /
.bloc-decouvrir:hover .attached_file{transform: rotate(0deg);}
.bloc-decouvrir:hover::after {

• transform: rotate(5deg) ;

}
.bloc-decouvrir:hover {

• text-decoration:none ; / pas de souligné sur les textes /

}



/ Page Ressource - bazarlist collé au haut de page /

.bazar-list-dynamic-container {

• margin-top: 1em;

}


/ RESSOURCES au HAZARD /
.extrait-ressource {

• display: flex;
• border: 1px solid var(--neutral-color);
• height: 200px;

}



/ FOOTER /
.footerpage .partenaires .img-responsive {
max-width: 100px;
height: auto;
}


.footerpage > .logo-projet {

• background-color: white;
• width: fit-content;
• padding: 10px 50px;
• margin-bottom: -40px;
• z-index: 1;

}


.footerpage .partenaires {

• height:300px;
• background-color:white;
  • padding: .5em;
  • margin: 2em .8em -2em auto;
  • width: 30%;
  • text-align:right;

}

#yw-footer {

• text-align: center;

}

/ Fix largeur du contenu de l'iframe /
.yeswiki-iframe-body > .container {

• max-width: 100%!important;

}

/ Masquer le bouton retour sur affichage iframe /
.yeswiki-page-widget .btn-backward {display:none;}


/ main.min.css | https://habit-r.org/custom/themes/bs5margot/styles/not-editable/main.min.css /

@media (min-width: 768px) {

• .yeswiki-page-widget .container {
  • max-width: 100%;
• }
  • .yeswiki-page-widget .meta-donnees {
• min-width: 200px;
• max-width: 250px;

}
}


/

---

/ / VIDEOS /
/

---

/
.video-grid{

• display:flex;
• flex-wrap:wrap;
• justify-content: space-evenly;}

.video-entry{

• width:350px;
• box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
• padding-top: 0;
• margin-bottom: 1em;
• background-color:#ffffffa3;
• border-radius:.5em;

}

.embed-responsive {

• margin-top: 0!important;
• margin-bottom: 0!important;
• border-top-left-radius: .5em;

border-top-right-radius: .5em;

• }

.caption {padding:1em;

• text-align:left;
• display: flex;
• flex-direction: column;
• justify-content: space-between;
• min-height: 190px;}

---