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


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');


  • :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); /
/ 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(--neutral-light-color);

  • -navbar-text-color: var(--primary-color);

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

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

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

  • -navbar-link-bg-hover-color: transparent;

/ --navbar-border: none; /

/ --navbar-border-radius: 0; /

  • -navbar-shadow: 0px 0px 20px #0000000f;

/ --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: 2em;

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

--main-text-fontsize:16px;

  • }
  • h1,h2,h3 {font-weight:800;}

  • h2 {
    • font-size: 2.5rem;
    • / border-bottom: 10px solid var(--secondary-color-1); /
    • width: fit-content;}
  • / Puces hexagone devant les titres h2 /
  • h2::before {
    • content: url('/files/GererSite_puce_Hexagone_bleu_20230110111213_20230126105542.png');
    • position: relative;
    • top: 12px;
    • margin-right: 10px;
}
.white h2::before {
  • content: url('/files/GererSite_puce_Hexagone_blanc_20230126095622_20230126111002.png');
  • position: relative;
  • top: 12px;
  • margin-right: 10px;
}
  • .btn{padding:1em;}
  • .btn-white{background-color:white; color:var(--primary-color)!important;}
  • a.btn-white{color:var(--primary-color)!important;}
  • .btn-white:hover{opacity:.8;}
  • a.btn-white:hover{color:var(--primary-color)!important;}
/ Correction pour enlever l'écart entre barre de menu et contenu de la page (main-container.css/
@media (min-width: 1200px){
  • #yw-main {padding: 0;}
}

@media (max-width: 800px){
#yw-topnav .links-container .nav > li::before { content: none;}

#yw-topnav .navbar-brand img {margin-top: .4rem; }
}
/
/ / Les actualités /
.style-vertical .bazar-card { background-color: var(--primary-color); }
.bazar-card .title-area {
  • color: var(--neutral-light-color);
  • width: fit-content;
  • line-height: 1.5em;
}
  • .bazar-card .title-area .title{ background-color: var(--secondary-color-1);}
.bazar-card .title-area + .subtitle-area { color: var(--neutral-light-color);}
.style-vertical .bazar-card .visual-area { border-bottom: none;}

/ Test entete sur page service ciivique /
.hexa-bleu{
  • background-image: url('/files/GererSite_Hexagone_bleu_20230105170649_20230110121146.png') !important;
  • background-repeat: no-repeat !important;
  • background-position: left !important;
  • background-size: contain !important;
  • height: 350px;
}

.hexa-rouge{
  • background-image: url('/files/GererSite_GRAPHICDESIGN_20230105170649_20230110121056.png') !important;
  • padding: 80px 100px 100px 160px;
  • /max-width: 600px;/
  • display: flex;
  • background-size: contain;
  • background-repeat: no-repeat;
  • min-height: 350px;
}

.hexa-rouge h1{font-size:3.8rem;}
.hexa-rouge .container{font-size:1.4rem;}

@media (max-width: 800px){
  • .hexa-rouge{padding: 80px 10px;}
  • .hexa-rouge .container{font-size:1.2rem;}
}

.titre-page .container{ background-color: var(--secondary-color-1);
  • color: #fff!important;
  • position: absolute;
  • bottom: 0;
  • right: 0;
  • width: 100%;
  • padding: 2em!important;
}

.titre-page h1, .titre-page h2, .titre-page h3 {color:white;}

/ Menu gauche dans page Groupe de travail /
.menupage{margin-top:30px;}
.menupage .nav > li > a {
  • border: 2px solid var(--primary-color);
  • border-radius: 30px;
  • margin-top: 1em;
}
.menupage .nav > li > a.active-link{background-color:var(--primary-color);color:white;}

/ Couleur du fond au survol des images sur page service civique /
.c4-izmir figcaption{background-color:#034991;}

/ colonnes flexibles /
.flexgrid{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;}
.colflex{width:180px;}


h5{
  • background-image: url('/files/GererSite_puce_hexagone_rouge_20230126103556_20230126170324.png');
  • background-repeat: no-repeat;
  • height: 100px;
  • display: flex;
  • justify-content: center;
  • width: 90px;
color: white;
flex-direction: column;
text-align: center;
background-size: contain;
font-size: 1.5em;
}


  • / Desktop Widget /@media screen and (min-width: 760px) {
iframe {
height: 1830px;
}
}/ Mobile Widget /@media screen and (max-width: 759px) {
iframe {
height: 4820px;
}
.form-group:not(.file):not(.checkbox) .control-label, .form-group.wrapper.checkbox .control-label {
  • font-size: x-small;
  • }
}