/ 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 {
--main-bg-color:#FDFBF3;
/ couleur des titres /
  • -title-h1-color:var(--primary-color);
  • -title-h2-color:var(--secondary-color-2);
  • -title-h3-color:#FCF4D9;
  • -title-h4-color:var(--secondary-color-2);
/ 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: #FDFBF3;

/ --navbar-text-color: var(--neutral-light-color); /

  • -navbar-link-color: var(--neutral-color);

/ --navbar-link-bg-color: transparent; /

  • -navbar-link-hover-color: var(--secondary-color-1);

  • -navbar-link-bg-hover-color:var(--secondary-color-1);

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

  • }

.navbar-brand {
  • / padding-top: var(--bs-navbar-brand-padding-y); /
  • padding-top: 1em;
}

#yw-topnav .navbar-brand img {
  • / max-height: 2.9rem; /
  • max-height: 60px;
}



#yw-topnav{box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}

#yw-topnav .navbar-nav > li > a:not(.btn), #yw-topnav .navbar-nav > li > .btn-group > a:not(.btn) {
  • font-weight: bold;
  • font-family:var(--main-title-fontfamily);
  • padding: .5rem 2rem;
}


#yw-topnav .dropdown-menu {
  • / background: var(--navbar-bg-color); /
  • / box-shadow: none; /
    • margin-top: 14px;
  • box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}


#yw-topnav .dropdown-menu a {
  • font-family: var(--main-title-fontfamily);
  • text-transform: none;
}

#yw-topnav .dropdown-menu li {
border-top: 1px solid var(--secondary-color-1);
}

#yw-topnav .dropdown-menu li:first-child{border:none;}

#yw-topnav .active-link {
color: var(--secondary-color-1)!important;
}

h1 {
  • font-size: 4rem;
  • font-weight: 900;
}

h2 {

  • font-size: 2.3rem;
  • text-transform: uppercase;
}

h4 {
  • text-transform: uppercase;
}



h3 {background-color:var(--primary-color);width:fit-content; padding:0 .5em;}

.lead {

  • font-size: 2.5rem;
  • font-weight: 500;
  • color: var(--secondary-color-2);
  • margin-right: 1em;
}

.btn{margin-bottom: .5em;}

.btn-secondary-2.btn {
  • color: var(--neutral-color);
  • background-color: transparent;
  • border: 2px solid var(--secondary-color-1);
  • text-transform: uppercase;
  • font-family: var(--main-title-fontfamily);
  • font-weight: normal;
}

.btn-secondary-2.btn:hover {
  • background-color: var(--secondary-color-1);
}

.bulle-2personnages-right{
  • min-height: 340px;
  • background-image: url(custom/images/bulle2personnages.png);
  • align-content: center;
  • background-repeat: no-repeat;
  • background-position: center right;
}

.bulle-2personnages{
  • min-height: 340px;
    • background-image: url(custom/images/bulle2personnages.png);
    • align-content: center;
    • background-repeat: no-repeat;
    • background-position: top left;}

.bulle-2personnages .container {padding-left:200px!important;}

.fond-2personnages .container {
  • background-image: url(custom/images/PersonnagesX2.png);
  • align-content: center;
  • background-repeat: no-repeat;
  • background-position:right;
  • min-height:300px;}


.footerpage > figure > img {
  • position: absolute;
  • margin-bottom: -350px;
  • z-index: 1000;
}

.titre_type_fiche {
  • display: none;
}

.temoin {
  • box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  • margin: .5em;
  • padding: 1.5em;
  • margin-top: 100px;
}

.temoin img {
  • border-radius: 50%;
  • margin-top: -100px;
}




  • .style-horizontal .bazar-card h4 {
    • / font-size: 1.8rem; /
    • font-size: 1.2rem;
    • color: var(--secondary-color-2);
  • }



  • .style-horizontal .bazar-card .content {
  • padding: 1em;
}

.style-horizontal .bazar-entry.bazar-card:hover {
  • box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 0px;
  • background-color: #ffffff96;
}


/ Pages intro avant les sous menus /

.section-teaser {
  • border:1px solid;
  • border-radius: 10px;
  • padding: .5em;
  • max-width: 90vw;
  • display:flex;
  • flex-direction:column;
}

a.section-teaser {
  • font-weight: 400;
}
a.section-teaser:hover {
  • text-decoration:none;
}

.section-teaser:hover {
  • box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 0px;
  • background-color: #ffffff96;
}

/ fix taille image dans presentation des ressources - ajout marge autour /
.style-vertical .bazar-card {
padding: 1.5rem 2rem;
}
/ Slider sur page d'accueil - carousel-actu.twig /

.actu-content {
  • display: flex;
  • padding: 1em;
  • border: 1px solid var(--primary-color);
  • border-radius: 20px;
  • justify-content: space-between;
  • min-height: 300px;
  • gap:1em;
}

@media (width<800px){
  • .actu-content{flex-direction:column;min-height: 500px;}
  • .info-lien {margin:.5em;}
}
/ intro dans carousel actu /

.text-troncate {
  • display: -webkit-box;
  • webkit-line-clamp: 5;
  • webkit-box-orient: vertical;
  • overflow: hidden;
    • line-height: 1.4em;
}


.carousel-indicators [data-bs-target] {
  • background-color: var(--primary-color);
}




/ affichage thématiques /

  • .style-horizontal .bazar-card {
    • border: 1px solid var(--neutral-color);
    • border-radius: 10px;
    • padding: .5em;
    • max-width: 90vw;
  • }
  • .style-horizontal.bazar-cards-container {
    • / row-gap: 4rem; /
    • row-gap: 2rem;
}
.style-vertical .bazar-card {
  • / background-color: var(--neutral-light-color); /
  • background-color: white;
}

.bazar-card .title-area {
  • / color: var(--neutral-color); /
  • color: var(--secondary-color-2);
  • text-transform: initial;
}

.style-vertical .visual-area{background-position: center;}

/ FICHE THÉMATIQUE - id7 /

.bg-primary{background-color:var(--primary-color)!important;margin-top:2em;}
.bg-primary .btn{margin:1em auto;}
.bg-primary .container{padding:1em;}
.bg-primary h2 {margin:1em auto;}


.ss-titre {
  • color: var(--secondary-color-2);
  • font-size: 1.1em;
}

.info-lien {
  • background-color: #FCF4D9;
  • margin: 1em 2em;
  • padding: 1em;
  • box-shadow: rgba(0, 0, 0, 0.25) 4px 4px 0px;
  • border-radius: 10px;
  • font-weight: 700;
}



.header-thema {
  • display: flex;
  • margin: 2em 0;
  • align-items: center;
  • justify-content: space-between;
  • gap:4em;
}

.header-thema h1{text-align:left;justify-content: flex-start;font-size: 3.5rem;}
.header-thema img {border-radius:10px;}

.flex-content{display:flex;gap:4em;justify-content: space-between;}
.thema-contenu{max-width:700px;}
.list-sousthema{max-width:400px;}

@media (width<1080px){
  • .flex-content{flex-direction:column;}
}

.style-horizontal .bazar-card .visual-area {
-webkit-filter: grayscale(100%);
filter: grayscale(100%) !important;
background-color: white;
background-position: center;
margin-top:0;
}
.style-horizontal .bazar-card:hover .visual-area {
-webkit-filter: grayscale(100%);
filter: grayscale(10%) !important;
}


@media (width >= 900px) {
  • .style-horizontal .bazar-card {
    • height: 14.5rem;
  • }
}



.BAZ_fiche_titre::after { content: none;}
.BAZ_fiche_titre{
  • justify-content: center;
}


/ FICHE ACTU - id3 /
.intro{font-size:1.1em; font-weight:600;padding:2em;}
.img-actu{margin-left: auto;
margin-right: auto; display: flex;}


/ FICHE RESSOURCE - id4 /
.ressource-info {
  • background-color: var(--primary-color);
  • padding: 1em;
  • border-radius: 10px;
  • min-width:350px;
  • height: fit-content;
}

.ressource-info .btn-primary{border:1px solid white;}

.embed-video > p {
  • display: none;
}
.embed-responsive.pdf iframe {
  • border: 0;
  • width: 100%;
  • height: 1100px;
}


/ FILTRES FACETTE /
.panel-default {
  • border-color: var(--primary-color);
  • -chevron-color: var(--neutral-color);
}

.panel-default:not(.note-editor) > .panel-heading {
  • color: white;
  • background-color: var(--primary-color);
  • font-weight: bold;
}

.panel-heading.collapsed[data-toggle="collapse"]::after {
  • border-right: .17rem solid var(--neutral-color);
  • border-bottom: .17rem solid var(--neutral-color);
}

.panel-heading[data-toggle="collapse"]::after {
  • border-top: .17rem solid var(--neutral-color);
  • border-left: .17rem solid var(--neutral-color);
}

.results-container .filter-box:nth-of-type(2), .results-container .filter-box:nth-of-type(3) {
  • / --neutral-color: var(--secondary-color-1); /
  • -neutral-color: var(--main-text-color);
}


.filter-box .filter-node .filter-node-label:hover span {
  • white-space: normal;
  • text-overflow: unset;
  • line-height: 1.2em;
  • / background-color:white;/
}

.card-body, .panel-body {
  • background-color: white;
}
.sort-by{
flex-wrap: nowrap;
}

.bazar-search input[type="text"] {
margin-left: 2.7rem !important;
}

/ Formulaire saisie /

.list-bazar-entries .checkbox,.bazar-checkbox-cols .checkbox {
  • margin-bottom: 0;
  • margin-left:1em;
}

.aceditor-toolbar .btn {
  • padding-top: .6rem;
  • color: var(--neutral-soft-color);
  • font-size: .8em;
}

textarea.form-control {
  • min-height: 300px;
}

#users-table-action .form-row {
  • display: flex;
}


#users-table-action .form-row .form-group:nth-child(3) {
  • width: 100px;
}