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

/ couleur de fond /

#yw-main {
  • background-color: #f4f3ee;
}

:root {

/ couleur des titres /
/ --title-h1-color:var(--neutral-color); /
  • -title-h2-color:var(--neutral-color);
--title-h3-color:var(--neutral-color);
/ --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: #df7b52;

/ couleur de fond de la partie centrale votre wiki /
  • -main-container-bg-color:#f4f3ee;

/ 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(--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: 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:var(--secondary-color-1);

  • -footer-text-color: white;

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

/ --main-text-fontfamily : 'GOSHA Alternates', sans-serif;/
  • -main-title-fontfamily : 'Eurofurence', sans-serif;
  • / couleur par defaut au survol des cards /
  • -card-hover-color:#e8ece8;
  • }
  • /
    /
  • / NAVBAR /
  • /
    /
/ Le container devient flex wrap /
#yw-topnav .container {
  • display: flex !important;
  • flex-wrap: wrap;
  • align-items: center;
}

/ Ligne 1 gauche : bouton hamburger + logo /
#yw-topnav .btn-menu {
  • order: 1;
  • flex: 0 0 auto;
}

#yw-topnav .navbar-header {
  • order: 2;
  • flex: 1;
  • float: none !important;
}

/ Ligne 1 droite : fast-access /
#yw-topnav .yw-topnav-fast-access {
  • order: 3;
  • flex: 0 0 auto;
  • float: none !important;
}

/ Ligne 2 : topnav sur toute la largeur /
#yw-topnav .topnavpage {
  • order: 4;
  • flex: 0 0 100%;
  • width: 100%;
  • float: none !important;
}

/ Aligner les liens à gauche sur la ligne 2 /
#yw-topnav .topnavpage .navbar-nav {
  • float: none !important;
  • display: flex;
  • flex-wrap: wrap;
  • width:100vw;
}

/ icone recherche /
.navbar-default .btn-link {
  • color: var(--primary-color);
  • font-size: 1.2rem;
}

#yw-topnav .navbar-nav > li > a {
  • text-transform: uppercase;
  • font-family: var(--main-title-fontfamily);
  • font-size: 1.1rem;

}


#yw-topnav .btn.btn-warning, #yw-topnav .btn.btn-warning:hover, #yw-topnav .btn.btn-warning:focus {
  • text-transform: uppercase;
  • border-radius: 0;
  • padding: .4em 1em;
  • font-weight: normal;
}

/ NAVBAR MOBILE /
@media (width <= 800px) {
  • #yw-topnav > .container > .yw-topnav-fast-access {
  • width: 30vw;
  • flex-wrap: nowrap;
  • }

  • #yw-topnav .container {
  • width: auto;
  • }
  • #yw-topnav .container {
  • flex-wrap: nowrap;
  • }
  • .navbar-btn { font-size: 0;} / ne pas afficher le nom du user sur mobile /

  • #yw-topnav .navbar-brand img {
  • max-height: 3rem;
  • margin-top: 0.5rem;
  • }

}

.lead, .lead h2{color:var(--primary-color);}

a:focus, a:hover {
  • / text-decoration: underline; /
  • text-decoration: none;
}

/ Home page section : centrer le contenu du header /
section.full-width:not(.with-bg-pattern) {
  • justify-content: center;
}

/ cadre autour de la vidéo /
.embed-responsive-16by9 {
  • box-shadow: white 0px 0px 0px 15px, var(--secondary-color-1) 0px 0px 0px 16px;
}


/
/ / CUSTOM SECTIONS /
/
/
section.ecosens-s {
  • background-image: url('/custom/images/ecosens_s_600.png');
  • background-size: contain;
    • background-repeat: no-repeat;
    • color: var(--neutral-color);
  • font-weight: 400;
}
section.ecosens-e {
  • background-image: url('/custom/images/ecosens_e_600.png');
  • background-size: contain;
    • background-repeat: no-repeat;
    • color: var(--neutral-color);
  • font-weight: 400;
}

section.ecosens-s .container, section.ecosens-e .container {
  • background-color: white;
  • border-radius: 50%;
  • padding: 3em;
  • width: 350px;
  • height: 350px;
  • margin: 4em;
}

section.ecosens-s .container:hover, section.ecosens-e .container:hover {
  • background-color: #ffffffed;
  • text-decoration:none!important;
}


section.shape-blob3 {
  • width: 400px;
  • border-radius: 23% 77% 90% 38% / 65% 93% 47% 45%;
  • padding: 1rem;
  • position: relative;
  • top: 60px;
}



/
/ / Fiche agenda - fiche2.twig /
/
/ .date-titre{width:120px; color:var(--secondary-color-2);}
.anim{
  • color: var(--secondary-color-2);
    • font-size: 1.2em;
    • text-align: right;
    • font-weight:bold;}

.anim ul {
  • list-style: none;
}

.bloc-flex-description {
  • display: flex;
  • gap:2em;
  • align-items: flex-start;
}
.bloc-flex-description img{max-width:120px;}

.bloc-date-lieu {
  • display: flex;
  • align-items: center;
  • background-color: var(--secondary-color-1);
  • border-radius: 30px;
  • gap: 1em;
  • padding: .5em;
  • margin: 2em 0;
  • justify-content: center;
}


.bloc-date-lieu img { max-height: 40px;margin-left:1em;}
.info-date, .info-lieu{max-width:250px;}


.btn-inscription {
  • background-image: url('./custom/images/inscription.svg');
  • background-size: contain;
  • padding: 0 2.1em;
  • color: #fff1d6;
  • background-repeat: no-repeat;
}
.btn-inscription:hover{color: #fff1d6;font-weight:bold;}

.titre_type_fiche { display: none;}

/ Fiche Animateurices id5 /
/
/
.bloc-classement {
  • display: flex;
  • justify-content: space-between;
}


.bloc-pratique > p {
  • color: var(--primary-color);
  • font-weight: bold;
  • font-size: 1.2em;
}


.bloc-pratique, .bloc-prez, .bloc-reseau, .bloc-admin {
  • background-color: white;
  • border-radius: 20px;
  • padding: 1em;
  • margin:.5em;
}


.img-anim {
  • position:absolute;
    • right: 30px;
    • border-radius: 20px;
    • top: 30px;
    • width: 250px;
    • width: auto;
    • max-height: 250px
}


.bloc-prez h2 {
  • max-width: 600px;
}

.bloc-prez p {
  • padding: 0 1em;
}

.bloc-classement {
font-size: .9em;
}
.bloc-classement h3 {
font-size: 1.1em;
color:var(--neutral-color);
}

/ Titre des fiches bazar - pas de ligne /

.BAZ_fiche_titre::after {
  • content: none;
}

/
  • /
/ --- Carte de base : activation de la transition --- /
.style-vertical .bazar-card {
  • padding: 1em;
  • border-radius: 0;
  • border: 1px solid #ebebeb;
  • background-color: white;
  • position: relative; / nécessaire pour l'overlay absolu /
  • overflow: hidden; / évite les débordements au survol /
}

/ --- Overlay de survol : transition douce --- /
.style-vertical .bazar-entry .content {
  • transition: background-color 0.1s ease, opacity 0.3s ease;
  • / opacity: 0;/
}

.style-vertical .bazar-entry:hover .content {
  • position: absolute;
  • background-color: var(--card-hover-color);
  • width: 100%;
  • height: 100%;
  • top: 0;
  • left: 0;
  • padding: 1em;
  • opacity: 1;
  • transition: background-color 0.6s ease, opacity 0.4s ease;
}

/ --- Texte et éléments : apparition décalée --- /
.style-vertical .bazar-entry .text-area,
.style-vertical .bazar-entry .floating-area .field-default {
  • transition: opacity 0.2s ease 0.1s; / léger délai pour après l'overlay /
  • opacity: 0;
}

.style-vertical .bazar-entry:hover .text-area,
.style-vertical .bazar-entry:hover .subtitle-area,
.style-vertical .bazar-entry:hover .floating-area .field-default {
  • opacity: 1;
}


.style-vertical .bazar-card .visual-area {
  • height: 220px;
  • border-radius: 0;
  • margin: 0.5em;
}

.style-vertical .bazar-card .content {
  • text-align: center;
  • align-items: center;
}

.style-vertical .area + .area:not(.floating-area) {
  • margin-top: 0.5em;
}

/ --- Typographie --- /
.white .bazar-card .title-area {
  • color: var(--secondary-color-1) !important;
  • text-transform: uppercase;
  • font-size: 1.4em;
  • line-height: 1.2em;
}

/ Limiter le titre à 1 ligne /
h4.title-area .field-default {
  • display: -webkit-box;
  • webkit-line-clamp: 1;
  • webkit-box-orient: vertical;
  • overflow: hidden;
}

.bazar-card .title-area + .subtitle-area {
  • color: var(--neutral-color);
}

.style-vertical .bazar-card .subtitle-area {
  • flex-grow: 0;
}

/ --- Zone texte --- /
.bazar-card .text-area {
  • flex-grow: 0;
  • text-align: center;
  • font-size: 1rem;
  • font-weight: normal;
  • color: var(--neutral-color);
}

.style-vertical .bazar-card .text-area {
  • display: none;
}

.style-vertical .bazar-card .text-area::after {
  • content: none;
  • background-image: none;
  • height: auto;
}

/ --- Contenu centré en hauteur --- /
.bazar-card .content {
  • justify-content: center;
}

.bazar-cards-container {
  • margin-bottom: 2rem;
}

/ --- Date de fin (cachée par défaut) --- /
.style-vertical .bazar-card .date-fin {
  • display: none;
}

/ --- Zone flottante (cachée par défaut) --- /
.style-vertical .bazar-card .floating-area .field-default {
  • display: none;
}


/
  • /

/ Overlay de survol /
.style-vertical .bazar-entry:hover .content {
  • position: absolute;
  • background-color: var(--card-hover-color);
  • width: 100%;
  • height: 100%;
  • top: 0;
  • left: 0;
  • padding: 1em;
}

/ Titre en entier au survol /
.style-vertical .bazar-entry:hover h4.title-area .field-default {
  • display: block;
}

/ Texte affiché au survol /
.style-vertical .bazar-entry:hover .text-area {
  • display: block;
}

/ Sous-titre étendu au survol /
.style-vertical .bazar-entry:hover .subtitle-area.line-clamp {
  • display: -webkit-box;
  • webkit-line-clamp: 16 !important;
}

/ Date de fin visible au survol /
.style-vertical .bazar-card:hover .date-fin {
  • display: block;
  • color: var(--neutral-color);
  • font-weight: normal;
}

/ Zone flottante visible au survol /
.style-vertical .bazar-card:hover .floating-area {
  • position: relative;
  • right: auto;
  • top: 10px;
  • transform: initial;
}

.style-vertical .bazar-card:hover .floating-area .field-default {
  • display: block;
  • background-color: transparent;
}


/ ============ /
/ FILTER BOX - FACETTES /
/ ====================== /

.filters {
  • background-color: #e8ece8;
}

.filters .panel-default {
  • border-color: transparent;
  • -checkbox-color: var(--neutral-soft-color);
}

.filters .panel-default:not(.note-editor) > .panel-heading {
  • color: var(--neutral-color);
  • background-color: transparent;
  • border-color: transparent;
  • text-transform: uppercase;
  • font-family: var(--main-title-fontfamily);
  • font-size: 1.1rem;
}

.filters .panel {
  • background-color: transparent;
}


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

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

/ Sur page Agenda - cacher la barre de recherche fait apparaitre un filtre "agenda ou envent interne" /
.bazar-list-dynamic-container select.form-control {
display: none;
}

/
/ / FOOTER /
/
/
.footerpage a {
  • color: white;
  • }
.footerpage {
  • text-align:center;
}