/ 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>. /
@font-face {
  • font-family: 'Source Sans Pro Bold';
  • url('../../custom/fonts/source-sans-pro/source-sans-pro.bold.ttf') format('ttf');
  • font-weight: 900;
  • font-style: bold;
}
h1, h2 {
  • font-family: "Source Sans Pro Bold", sans-serif;
  • font-optical-sizing: auto;
  • font-weight: 700;
  • font-style: normal;
}



:root {
--navbar-bg-color:white;
--navbar-link-color:var(--neutral-color);
--navbar-link-hover-color:var(--neutral-color);
/ couleur des titres - question Mélanie : en vw ou rem/
  • -title-h1-color:var(--neutral-color);
  • -title-h2-color:var(--primary-color);
  • -title-h3-color:var(--secondary-color-2);
  • -title-h4-color:var(--secondary-color-1);

--main-bg-color:#fffcf9;


/ 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: #FFF5EB;
--navbar-btn-default-color:var(--neutral-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:#FFF5EB;

/ --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 /
#yw-topnav .navbar-brand img {
  • / max-height: 2.9rem; /
  • max-height: 7rem;
}

.nav-link, .nav.nav-tabs > li > a, .nav.nav-pills > li > a {
  • font-size: 1.1em;
  • font-weight: bold;
}

/ Fix barre de recherche /
.bazar-search input[type="text"] {
  • margin-left: 2.7rem !important;
}
/ Fix btn-login /
#yw-topnav .yw-topnav-fast-access .btn-icon { width: auto;}

/ Fix img responsive /

.img-responsive {
  • max-width: 100%;
  • height: auto;
}

/ Élément | https://civamgard.fr/?accueil /

section.home-header {
  • padding: 0 3rem!important;
}
section.home-header .lead {
  • font-size: 2.3rem;
  • font-weight:700;
  • font-family: "Source Sans Pro Bold", sans-serif;
}

h1 {
  • font-size: 3rem;
  • font-weight: 700;
  • line-height: 3.8rem;
}
.lead u {
  • background-image: linear-gradient(transparent 70%, var(--secondary-color-1) 30%);
  • text-decoration: none;
    • /text-decoration-color:var(--secondary-color-1); /
    • background-size: 10%;
}
  • h2 {
    • font-size: 2.2rem;
    • font-weight: 700;
  • }
  • h3 {
    • font-size: 1.8rem;
  • }

.btn-secondary-1, #yw-topnav .btn:not(.btn-default):not(.btn-link) {
  • color: var(--neutral-color);
}


  • .btn-info{
  • border:2px solid var(--neutral-color);
  • color:var(--neutral-color);
  • background-color:transparent;
  • opacity:1;
  • margin-bottom:.5em;
  • }
/ carousel accueil /

.carousel-fade .carousel-item {
  • max-height: 400px;
}

h4.title-area .field-default {
  • display: -webkit-box;
  • webkit-line-clamp: 2;
  • webkit-box-orient: vertical;
  • overflow: hidden;
}

.c4-izmir figcaption {
  • font-size: 1.4rem;
}
figcaption {
  • color:white;
  • background-color: var(--secondary-color-2);
}

.col-flex{display:flex;justify-content:flex-start;gap:1.5em;}

.shadow{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

/ Pictos publics /
a.bloc-public { background-color: #4e6151;border-radius: 1em; padding: .5em;}
a.bloc-public h3 { color: #FFF5EB;}


/ AGENDA - fiche 2 /
.intro-agenda {

  • display: flex;
  • justify-content: space-around;
  • / border: 2px solid var(--primary-color);/
    • padding: .5em;
    • border-radius: 10px;
    • background-color: white;
    • font-size: 1.2em;
  • font-weight: 800;
  • margin-bottom: 2em;
  • color: #467246;

}
.info-date i, .info-lieu i {

  • font-size: 3em;
  • color: #e6efe6;
  • margin:10px;

}

.info-date, .info-lieu {

  • display: flex;
  • align-items: center;

}

.info-orga > p {

  • padding-left: 17px;

}

/ adaptation mobile agenda /
@media (max-width: 768px) {
.info-date , .info-lieu { flex-direction: column;}
.intro-agenda {

  • margin-top: 1em;
  • margin-bottom: 1em;
  • gap: 2em;}

h1{margin:0;}
}
/
/ / Formations Fiche 5 /
/
/
.BAZ_fiche_titre::after {
content: none;
}
.id5 h2 {
  • font-size: 1.1rem;
  • color: white;
  • background-color: var(--secondary-color-1);
  • width: fit-content;
}
.info-formation {
background-color: #FFF5EB;
min-width: 300px;
padding:1.5em;
  • border-radius: 20px;
}

.info-contact {
  • background-color: #FFF5EB;
  • border-radius: 20px;
  • padding: 2em;
  • margin-top:1em;
    • }
.d-flex{display:flex;gap:2em;}
.bulle {
  • background-color: var(--secondary-color-1);
padding: 1em;
font-size: 1.5em;
font-weight: bold;
  • color: white;
  • width: 100px;
  • border-radius: 50%;
  • height: 100px;
  • text-align: center;
  • float:right;
}

.bulle.AB, .formation-AB h2 {
  • background-color: #0fa55d;
  • }
.bulle.div , .formation-div h2 {
  • background-color: #007fb2;
  • }
.bulle.acc, .formation-acc h2 {
  • background-color: #71317a;
  • }
.bulle.com, .formation-com h2 {
  • background-color: #c1210d;
  • }
.bulle.elev, .formation-elev h2 {
  • background-color: #663700;
  • }
.bulle.valo, .formation-valo h2 {
  • background-color: #ef7d00;
  • }
  • /
    /
/ Actions Fiche 7 /
/
/ .action-content {
  • position: relative;
  • z-index: 10;
  • top:100px;
}
.encadre-action {
  • background-color: #FFF5EB;
  • border-radius: 20px;
  • padding: 2em;
  • margin-top: 4em;
  • }
.encadre-action h1 {
  • text-align:center;
  • color:var(--secondary-color-2);
}
  • .parallax {
  • min-height: 300px;
  • /background-attachment: fixed;/
  • background-position: top;
  • background-repeat: no-repeat;
  • background-size: cover;
}
.img-action {
  • position: absolute;
  • margin-top: -100px;
}

.bloc-primary {
  • display: flex;
  • margin-top:120px;
  • background-color: #FFF5EB;
    • border-radius: 20px;
    • padding: 2em;
}

/
/ / Card horizontal pour les actions /

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

  • .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-horizontal .bazar-card h4 {
  • / font-size: 1.8rem; /
  • font-size: 1.2rem;
  • color: var(--secondary-color-2);
  • }

.style-horizontal .bazar-card:is(:nth-child(4n+2), :nth-child(4n+3)) {
  • background-color: #ffdac6;;
  • &:hover { background-color: #ffdac6;}

}




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

.style-horizontal .bazar-card .content::after {
content: "\f061";
  • font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
  • font-weight: 900;
  • margin-left: 8px;
  • position: absolute;
bottom: 10px;
right: 2rem;
background-color:white;
border-radius:20px;
padding: 0 .5em;
  • }


/ Fix theme bs5 - page user creation user /
#users-table-action .form-row {
  • display: flex;
}



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

/ fix pdf embed /
.embed-responsive.pdf iframe {
  • border: 0;
  • width: 100%;
  • height: 1100px;
}

/ Adaptations mobile /
@media (max-width: 768px) {
.home-header .row {flex-direction: row-reverse;}
h1 { font-size: 1.8rem;}
h2 { font-size:1.4rem;}
h3 { font-size:1.2rem;}
.BAZ_fiche_titre { font-size: 1.8rem; line-height: 2.5rem;}
.d-flex{flex-wrap:wrap;}
a.bloc-public { max-width: 150px; } / 2 par ligne sur mobile /

}