/
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 /
/ --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-link-bg-color: transparent; /
/ --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); /
/ } /
#yw-topnav .navbar-nav > li > a {
#yw-topnav .btn.btn-default {
/ Menu workgroup /
.BAZ_liste {
.BAZ_liste li a {
#yw-topnav .dropdown > ul:nth-child(2) {
h1,h2{text-transform:uppercase;font-weight:800;}
h3{
img {
/ fix espace sous l'image dans home /
div.span6 {
.home-header {font-size:1.3em;background-position-y: -100px;}
.highlight h2 {
.lead{
font-size: 2em;
.btn-info, .btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:active:focus {
.btn-secondary-1, .btn-secondary-2, .btn-secondary-2:hover, .btn-secondary-2:active, .btn-secondary-2:focus, .btn-secondary-2:active:focus {
.btn-secondary-2{background-color:var(--primary-color);}
/ card.css /
.style-vertical .bazar-card {
.bazar-card .title-area {
.bazar-card .title-area + .subtitle-area {
.results-container .filter-box:nth-of-type(2), .results-container .filter-box:nth-of-type(3), .results-container .filter-box:nth-of-type(4),.results-container .filter-box:nth-of-type(5) {
/ FICHE 1 - DIRECTORY /
.intro {
.footerpage .logo-partners {
.footerpage h4{font-family:var(--main-text-font-family);text-align:center;}
@media (min-width: 992px) {
}
/ fix ace editor color /
.ace_scroller {
.titre_type_fiche {
display: none;
}
/ Community /
@media (width>=960px){
.d-flex{
}
.info-structure .btn{padding:0;}
/ Resources /
.picto-elements {
.entete {
span.cadre {
:root {
/ couleur des titres /
- -title-h1-color:var(--neutral-color);
- -title-h2-color:var(--primary-color);
- -title-h3-color:var(--neutral-color);
/ --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: #000000;
- -navbar-text-color: #ffffff;
- -navbar-link-color: #ffffff;
/ --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: 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); /
/ } /
#yw-topnav .navbar-nav > li > a {
- font-family: var(--main-title-fontfamily);
- text-transform:uppercase;
- font-weight: 300;
#yw-topnav .btn.btn-default {
- background: var(--navbar-bg-color) !important;
- color: var(--navbar-link-color) !important;
/ Menu workgroup /
.BAZ_liste {
- list-style: none;
- padding-left: 1.5em;
.BAZ_liste li a {
- padding-left: 0;
#yw-topnav .dropdown > ul:nth-child(2) {
- width: 400px;
h1,h2{text-transform:uppercase;font-weight:800;}
h3{
- font-weight: 100;
- text-transform: uppercase;
- }
img {
- border-radius: 0;
/ fix espace sous l'image dans home /
div.span6 {
- margin-bottom: -10px;
.home-header {font-size:1.3em;background-position-y: -100px;}
.highlight h2 {
- background-color: #392f5a;
- color: white;
- font-size: 1.7rem;
- width: fit-content;
- text-align: center;
- margin-right: auto;
- margin-left: auto;
- padding: .3em 1em;
- border-radius: 30px 0;
.lead{
font-size: 2em;
- font-family: var(--main-title-fontfamily);
.btn-info, .btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:active:focus {
- border: 3px solid;
- color: #031926;
- border-radius: 25px 0;
- text-transform: uppercase;
- font-family: var(--main-title-fontfamily);
- padding: .5em 2em;
- background-color:transparent;
- opacity:1;
.btn-secondary-1, .btn-secondary-2, .btn-secondary-2:hover, .btn-secondary-2:active, .btn-secondary-2:focus, .btn-secondary-2:active:focus {
- border-radius: 25px 0;
- text-transform: uppercase;
- font-family: var(--main-title-fontfamily);
- padding: .5em 2em;
.btn-secondary-2{background-color:var(--primary-color);}
/ card.css /
.style-vertical .bazar-card {
- / background-color: var(--neutral-light-color); /
- background-color: var(--secondary-color-1);
.bazar-card .title-area {
- font-size: 1em;
- text-transform: uppercase;
.bazar-card .title-area + .subtitle-area {
- / color: var(--primary-color); /
- color: var(--neutral-color);
- font-family: var(--main-title-fontfamily);
- text-transform: uppercase;
.results-container .filter-box:nth-of-type(2), .results-container .filter-box:nth-of-type(3), .results-container .filter-box:nth-of-type(4),.results-container .filter-box:nth-of-type(5) {
- -neutral-color: black;
/ FICHE 1 - DIRECTORY /
.intro {
- color: var(--primary-color);
- font-size: 1.1em;
.footerpage .logo-partners {
- display: flex;
- gap: 1em;
- align-items: center;
- justify-content: center;
.footerpage h4{font-family:var(--main-text-font-family);text-align:center;}
@media (min-width: 992px) {
- section.home-col-text{
- max-width: 600px;
- margin-right: 5em;
}
/ fix ace editor color /
.ace_scroller {
- -secondary-color-1: green!important;
.titre_type_fiche {
display: none;
}
/ Community /
@media (width>=960px){
.d-flex{
- display:flex;
- gap: 2em;
- margin-top: 2em;}
- .meta-donnees {
- min-width: 350px;
- background-color: var(--secondary-color-1);
- padding: .5em;
}
.info-structure .btn{padding:0;}
/ Resources /
.picto-elements {
- display: flex;
- flex-wrap: wrap;
- gap: 1em;
- padding-bottom: 2em;
- border-bottom: 3px solid white;
- margin-bottom: 2em;
.entete {
- margin-bottom: 2em;
span.cadre {
- border: 1px solid;
- padding: .5em;
- margin-right: .5em;