/
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
/
/ :root { /
/ 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-top: 3px solid var(--neutral-soft-color); /
/ --btn-border: none; /
/ --btn-border-radius: .5em; /
/ --checkbox-color: var(--primary-color); /
/ } /
/ Personnalisation du style pour les fiches bazar /
/
/ / Fiche réponse id 47 /
/
/ .id47 h1,h4{color:var(--neutral-color);}
.id47 h1{font-size:2rem;
.entete-container{
.entete-item{
.entete-item2{
.text-reponse{
/ style utilisé pour afficher le tag en lien /
a.tag-label {
/ style utilisé pour afficher le tag en texte non cliquable /
.tag-label {
/
/ / Fiche question id 33 /
/
/ .id33 h1,h4{color:var(--neutral-color);}
.id33 h1{font-size:2rem;
.list-reponses{
.bloc-reponse{
.bloc-reponse:hover { opacity:.8;}
a.bloc-reponse:hover { text-decoration:none!important;}
a.origine-1 { background-color:var(--secondary-color-2);}
a.origine-2 { background-color:var(--secondary-color-1);}
a.origine-3 { background-color:var(--secondary-color-2);}
a.origine-4 { background-color:var(--secondary-color-1);}
a.origine-5 { background-color:var(--secondary-color-2);}
a.origine-6 { background-color:var(--secondary-color-1);}
a.origine-7 { background-color:var(--secondary-color-2);}
.add-reponse{
/
/ / template FAQ /
/
/ .faq-container{
.trombi-content .title {
.trombi-content{
.bloc-question {
.bloc-question:hover { opacity:1;}
a.bloc-question:hover { text-decoration:none!important;}
.nb-reponses {
.aspect-1{background-image:url('custom/templates/bazar/images-aspect/vignette_os1.jpg');}
.aspect-2{background-image:url('custom/templates/bazar/images-aspect/vignette_os2.jpg');}
.aspect-3{background-image:url('custom/templates/bazar/images-aspect/vignette_os3.jpg');}
/ :root { /
/ 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-top: 3px solid var(--neutral-soft-color); /
/ --btn-border: none; /
/ --btn-border-radius: .5em; /
/ --checkbox-color: var(--primary-color); /
/ } /
/ Personnalisation du style pour les fiches bazar /
/
/ / Fiche réponse id 47 /
/
/ .id47 h1,h4{color:var(--neutral-color);}
.id47 h1{font-size:2rem;
- margin-right:1em;
.entete-container{
- display:flex;
- flex-wrap:nowrap;
- justify-content:space-between;
- gap:20px;
.entete-item{
- max-width:250px;
.entete-item2{
- max-width:800px;
.text-reponse{
- text-align: justify;
- margin: 2em;
/ style utilisé pour afficher le tag en lien /
a.tag-label {
- margin: 1em;
- background-color: var(--primary-color)!important;
- padding: .7em!important;
- color: var(--neutral-light-color);
- border-radius:0;
- opacity:1;
- margin-left:0;
- line-height:3;
/ style utilisé pour afficher le tag en texte non cliquable /
.tag-label {
- margin: 1em;
- background-color: var(--primary-color)!important;
- padding: .7em!important;
- color: var(--neutral-light-color);
- border-radius:0;
- opacity:1;
- margin-left:0;
- line-height: 2;
- width: fit-content;
/
/ / Fiche question id 33 /
/
/ .id33 h1,h4{color:var(--neutral-color);}
.id33 h1{font-size:2rem;
- margin-right:1em;
.list-reponses{
- display:flex;
- flex-wrap:wrap;
- justify-content:flex-start;
- gap:10px 20px;
- margin-top:1em;
.bloc-reponse{
- order:1;
- min-width:200px;
- max-width:300px;
- height:400px;
- border:2px solid var(--primary-color);
.bloc-reponse:hover { opacity:.8;}
a.bloc-reponse:hover { text-decoration:none!important;}
a.origine-1 { background-color:var(--secondary-color-2);}
a.origine-2 { background-color:var(--secondary-color-1);}
a.origine-3 { background-color:var(--secondary-color-2);}
a.origine-4 { background-color:var(--secondary-color-1);}
a.origine-5 { background-color:var(--secondary-color-2);}
a.origine-6 { background-color:var(--secondary-color-1);}
a.origine-7 { background-color:var(--secondary-color-2);}
- margin: 1em;
- background-color: var(--neutral-light-color);
- font-size: 20px;
- font-weight: 700;
- padding: .5em;
- color:var(--neutral-color);
.add-reponse{
- order:5;
- height:400px;
- border:2px solid var(--neutral-soft-color);
- text-align:center;
- padding: 1em;
- display: flex;
- flex-direction: column;
- justify-content: center;
/
/ / template FAQ /
/
/ .faq-container{
- display:flex;
- flex-wrap:wrap;
- justify-content:space-between;
- gap:25px;
.trombi-content .title {
- font-weight: 800;
- color: var(--neutral-color);
- text-align:left;
.trombi-content{
- background-color: var(--neutral-light-color);
- margin:10px;
- text-align: left;
- padding: .5em;
- width: fit-content;
.bloc-question {
- height:400px;
- background-size:cover;
- width: 250px;
- border: 1px solid var(--neutral-soft-color);
- border-radius: 4px;
- opacity:.7;
- position:relative;
.bloc-question:hover { opacity:1;}
a.bloc-question:hover { text-decoration:none!important;}
.nb-reponses {
- background-color: white;
- color: black;
- border-radius: 0px 25px 0px 25px;
- position:absolute;
- bottom:10px;
- right:10px;
.aspect-1{background-image:url('custom/templates/bazar/images-aspect/vignette_os1.jpg');}
.aspect-2{background-image:url('custom/templates/bazar/images-aspect/vignette_os2.jpg');}
.aspect-3{background-image:url('custom/templates/bazar/images-aspect/vignette_os3.jpg');}