Personnaliser un thème - Apparence

Le thème qui est appliqué sur le site lors de sa création se nomme Rebirth et il est hérité de Bootstrap v4.
Il est personnalisable dans le manager e-monsite via la page Configuration/Apparence.

Les paramètres personnalisables dans Apparence sont stockés dans des variables CSS. La variable CSS récupère une variable twig, celle qui a été définie à la création du paramètre. Elle permet de stocker par exemple la couleur sélectionnée par l'utilisateur. Puisque la couleur est personnalisable par l'utilisateur, on va créer une variable correspondante dans :root.

Exemple : Dans Configuration/Apparence, dans la section Typographie, dans l'onglet Titre H1, on sélectionne une couleur pour l'option Couleur des titres.

    --h1-color: {{theme.h1_color}};

Apparence globale

Site

Largeur du site

Permet de définir la largeur du contenu du site proportionnellement à la largeur de la fenêtre parmis 3 tailles proposées.
La largeur maximale des .container est définie en vw (viewport width) et sera au choix petite 60vw, moyenne 75vw ou grande 80vw.

--container-max-width-lg: {{max_width}};
--container-max-width-xl: {{max_width}};
--container-max-width-xxl: {{max_width}};

{% for name, max_width in theme.container_max_widths %}
    --container-max-width-{{name}}:{{max_width}};
{% endfor %}

Fixer la largeur du site à 1320px

Si activé, le contenu du site ne dépassera jamais 1320px de large même sur les écrans très larges. (s'applique sur les .container)

{% if theme.container_fixed_max_width %}
    {% set xxl = '1320px' %}
{% else %}

Couleur de fond

Permet de sélectionner une couleur de fond pour le site. Applique un background-color sur la balise body.

--body-bg: {{theme.body_bg}};

Motif d'arrière-plan

Permet à l'utilisateur de sélectionner un fichier image qui sera utilisé comme motif de fond sur le site. Ce motif restera immobile au scroll. L'image en arrière-plan sera placée en haut à gauche du site puis répétée pour occuper tout l'espace disponible.
Applique un background-image sur la balise body et un background-attachment: fixed;

body{
    background-image: url('{{theme.body_pattern}}');
    background-attachment: fixed;
}

Remarque : Lorsqu'une couleur de fond est choisie et qu'un motif d'arrière-plan a été définit, le motif de fond passera par-dessus la couleur de fond. La couleur de fond n'apparaitra que si l'image sélectionnée pour le motif de fond comporte de la transparence.

Bords arrondis

Permet d'activer ou non les bords arrondis sur les principaux composants comme les boutons, vignettes, sous-menus.
La valeur de l'arrondi sera alors de 0.25rem. (Ce réglage peut être redéfinit plus précisement à l'échelle des composants).
Correspond à la variable border_radius.

{% set theme = theme|merge({'border_radius' : theme.border_radius ? '.25rem' : '0'}) %}

--border-radius: {{theme.border_radius}};

{% if theme.border_radius %}
    border-radius: var(--border-radius);
{% endif %}

Bouton haut de page

Si cette option est activée, ajoute un bouton en bas à droite de la fenêtre qui permet de revenir en haut de page.
Correspond à la variable scrolltop. Ce paramètre intervient au niveau du DOM de la page (le template layout du thème Rebirth) :

{% if theme.scrolltop %}
    <a href="javascript:void(0)" id="scroll-to-top" class="d-none d-sm-inline-block" onclick="$('html, body').animate({ scrollTop:0}, 600);">
        <i class="material-icons md-lg md-expand_less"></i>
    </a>
{% endif %}

Couleur des bordures

Lorsque l'option est activée, elle permet de modifier la couleur par défaut des bordures des éléments du site qui comportent une bordure. Ce réglage peut être redéfinit plus précisement à l'échelle des composants. Correspond à la variable border_color.

{% set theme = theme|merge({'border_color' : theme.border_color ? theme.border_color : (theme.body_color is dark ? 'var(--gray-200)' : 'var(--gray-700)')}) %}

Remarque : La couleur par défaut de la bordure est déterminée en fonction de la luminosité de la couleur du texte :

Si la couleur du texte est claire, la couleur de bordure par défaut sera var(--gray-700) soit #cccccc.
Si la couleur du texte est sombre, la couleur de bordure par défaut sera var(--gray-200) soit #b3b3b3.
Si une couleur de bordure est définie par l'utilisateur, elle est utilisée et surcharge la valeur par défaut.

--border-color: {{theme.border_color}};

Conteneur #wrapper

Le conteneur du site est constitué de la zone de contenu (ensemble des lignes et colonnes de la page) et du menu vertical s'il existe. Il s'agit de l'élément #wrapper.

Couleur de fond

Permet d'ajouter une couleur de fond sur le conteneur.
Ajoute un background-color sur l'élément #wrapper et redéfinit les variables css --body-bg et --modal-content-bg à l'intérieur de l'élément.
Correspond à la variable wrapper_bg.

#wrapper{
    {% if theme.wrapper_bg %}
        background-color: {{theme.wrapper_bg}};
        --body-bg: {{theme.wrapper_bg}};
        --modal-content-bg: {{theme.wrapper_bg}};
    {% endif %}
}

Bordure extérieure

Permet de définir une couleur de bordure pour le conteneur. Si une couleur de bordure est définie, ajoute une bordure sur le conteneur (#wrapper) de la couleur sélectionnée. Sinon, aucune bordure n'est appliquée.
Correspond à la variable wrapper_border.

{% if theme.wrapper_border %}
    #wrapper{
        border: var(--border-width) solid {{theme.wrapper_border}};
    }
{% endif %}

Marge au dessus du conteneur

Permet d'ajouter un espace au dessus du conteneur (entre le menu et le conteneur par exemple). Ajoute la class .margin-top sur l'élément wrapper qui créé une marge de 15px (margin-top: calc(var(--grid-gutter-width) / 2);). Correspond à la variable wrapper_margin_top.

#wrapper.margin-top{
    margin-top: calc(var(--grid-gutter-width) / 2);
}

Zone de contenu #main

La zone de contenu du site est constituée par l'ensemble des lignes et colonnes de la page. Il s'agit de la section #main dans le DOM.
Elle ne comprend pas le menu vertical s'il existe.

Couleur de fond

Permet de choisir et d'appliquer une couleur de fond à la zone de contenu. Ajoute un background-color sur l'élément #main et redéfinit la variables css --body-bg à l'intérieur de l'élément. Correspond à la variable main_bg.

#main{
    {% if theme.main_bg %}
        background-color: {{theme.main_bg}};
        --body-bg: {{theme.main_bg}};
    {% endif %}
}

Bordure extérieure

Permet de définir une couleur de bordure pour la zone de contenu. Si une couleur de bordure est définie, ajoute une bordure sur la zone de contenu (#main) de la couleur sélectionnée. Sinon, aucune bordure n'est appliquée.
Correspond à la variable main_border.

#main{
    {% if theme.main_border %}
        border: var(--border-width) solid {{theme.main_border}};
    {% endif %}
}

Vignette .card

Une vignette correspond au composant bootstrap 4 card. On peut personnaliser ici les éléments du site qui prennent la forme d'une vignette. Il s'agit le plus souvent d'éléments sous forme de blocs composés d'une image, un titre, une description et un lien.

Éléments qui s'affichent sous forme de vignettes :

Widget produit
Widget liste de pages lorsque le type d'affichage 1 ou 2 est sélectionné
Widget liste des catégories de pages lorsque le type d'affichage 1 ou 2 est sélectionné
Widget liste des catégories de la boutique lorsque le type d'affichage 1 est sélectionné
Widget liste d'articles lorsque le type d'affichage 1 est séléctionné
...

Couleur de fond

Permet de choisir et d'appliquer une couleur de fond sur les vignettes. Correspond à la variable card_bg.

.card{
    background-color: var(--card-bg);
}

.view .card{
    {% if theme.card_bg %}
        --card-bg: {{theme.card_bg}};
    {% endif %}
}

Bordures

Lorsque l'option est activée, elle permet d'ajouter une bordure sur les vignettes et d'en choisir la couleur.
Correspond à la variable card_border_color.

.card{
    {% if theme.card_border_color %}
        --border-color: {{theme.card_border_color}};
    {% endif %} 
}

.card{
    border: var(--border-width) solid var(--border-color);
}

{% if theme.card_border_color_auto == 'false' %}
    .card{
        border-style: none;    
    }
    .card-header{
        border-bottom-style: none;
    }
    .card-footer{
        border-top-style: none;
    }
{% endif %}

Ombre portée

Lorsque l'option est activée, elle permet d'ajouter une ombre portée sur les vignettes et d'en choisir la couleur et son opacité.
Correspond à la variable card_shadow.

.view .card{
    {% if theme.card_shadow %}
        box-shadow: 0 .5rem 1rem {{theme.card_shadow}};
    {% endif %}
}

Couleur de fond de l'entête

Permet de choisir et d'appliquer une couleur de fond sur l'entête des vignettes lorsqu'il est affiché. Correspond à la variable card_header_bg.

{% if theme.card_header_bg %}
    --card-header-bg-color: {{theme.card_header_bg}};
{% endif %}

{% if theme.card_header_bg %}
    .card-header{
        background-color: var(--card-header-bg-color);
    }
{% endif %}

Couleur de fond du bas

Permet de choisir et d'appliquer une couleur de fond sur le bas des vignettes lorsqu'il est affiché. Correspond à la variable card_footer_bg.

{% if theme.card_footer_bg %}
    --card-footer-bg-color: {{theme.card_footer_bg}};
{% endif %}

{% if theme.card_footer_bg %}
    .card-footer{
        background-color: var(--card-footer-bg-color);
    }
{% endif %}

Bords arrondis

Permet d'arrondir les angles des vignettes de manière plus ou moins prononcée.
L'utilisateur a le choix entre 4 options allant de l'angle droit au plus arrondi :

0
.5 rem
1 rem
1.5 rem

Correspond à la variable card_borderradius.

{% if theme.card_borderradius %}
    --card-border-radius: {{theme.card_borderradius}};
{% endif %}

.card{
    {% if theme.card_borderradius %}  
        border-radius: var(--card-border-radius); 
    {% endif %}
}

Couleur des éléments

Couleur principale - primary

Permet de définir une couleur principale pour les éléments à mettre en évidence sur le site.
Elle est utilisée sur les éléments du site qui utilisent la classe .primary (définie par bootstrap).
Il s'agit des boutons .btn-primary, des badges .badge-primary ou des alertes .alert-primary par exemple.
Elle est également utilisée sur les éléments qui utilisent la variable CSS --primary (en background-color, en color, ou en border-color).

Voir tous les éléments qui utilisent la "couleur principale"

Bouton primaire (.btn-primary) :
Il s'agit des boutons CTA qui contiennent la class .btn-primary, la couleur principale est utilisée en couleur de fond et en couleur de bordure. Elle peut être surchargée dans Apparence/Boutons/Boutons primaires.
Lien actif d'un menu déroulant (.dropdown-item.active,.dropdown-item:active) :
Il s'agit du lien actif contenu à l'intérieur d'un menu déroulant. La couleur principale est utilisée en couleur de fond.
Case à cocher de formulaire .custom-control-input (.custom-control-input:checked~.custom-control-label::before) :
Il s'agit des cases à cocher des formulaires comportant la class .custom-control-input. La couleur principale est utilisée en couleur de fond de la case lorsqu'elle est cochée.
Case à cocher de formulaire (.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before) :
Il s'agit des cases à cocher des formulaires comportant la class .custom-checkbox.
Bouton radio dans un formulaire (.custom-radio .custom-control-input:checked~.custom-control-label::after) :
Il s'agit des boutons radio à cocher des formulaires comportant la class .custom-radio. Applique la couleur principale en bordure de 4px d'épaisseur à l'intérieur du cercle lorsqu'il est coché.
Jauge avec curseur valeur min et max (.custom-range::-webkit-slider-thumb) :
Il s'agit des jauges paramétrables qui permettent de sélectionner une valeur minumum et une valeur maximum. Les poignées et la partie active prennent la couleur principale.
Liste horizontale de liens type pills (.nav-pills .nav-link.active,.nav-pills .show>.nav-link) :
Il s'agit d'une liste horizontale de liens comportant la classe .nav-pills. Le lien actif utilise la couleur principale comme couleur de fond.
Page active de la pagination (.page-item.active .page-link) :
Il s'agit de la pagination. La page active utilise la couleur principale comme couleur de fond et comme couleur de bordure.
Badge primaire (.badge-primary) :
Il s'agit des badges pour un indiquer une nouveauté par exemple. Les badges comportant la class .badge-primary utilisent la couleur principale comme couleur de fond.
Barre de progression (.progress-bar) :
Il s'agit des barres de progression. La partie complétée utilise la couleur principale comme couleur de fond.
Couleur de fond (.bg-primary) :
Applique la couleur principale comme couleur de fond sur tous les élèments qui possèdent la classe .bg-primary
Couleur de bordure (.border-primary) :
Applique la couleur principale comme couleur de bordure sur tous les élèments qui possèdent la classe .border-primary
Couleur du texte (.text-primary) :
Applique la couleur principale comme couleur sur tous les élèments qui possèdent la classe .text-primary
Badge nouveauté (.badge-new) :
Il s'agit des badges pour un indiquer une nouveauté. Les badges utilisent la couleur principale comme couleur de fond.
Carousel - visuel de prévisualisation de l'image actif (.carousel-thumbs .thumb.selected img) :
Applique une bordure de la couleur principale sur le visuel de prévisualisation de l'image active d'un carousel.
Étiquette primaire (.ribbon-primary) :
Il s'agit des étiquettes qu'on peut appliquer sur les produits par exemple. Celles qui possèdent la classe .ribbon-primary prennent la couleur principale comme couleur de fond.
Étapes d'un processus - Mise en avant de l'étape active (.stepper li.active::before) :
Il s'agit de l'affichage des étapes lors d'un processus de paiement par exemple. Permet d'afficher l'étape active avec la couleur principale comme couleur de fond.
Nom de l'auteur dans les questions/réponses (.qr-answer .meta-author) :
Si le plugin Questions/Réponses est activé, applique la couleur principale au nom de l'auteur de la réponse.
Style mise en avant (.col.leaderboard .col-content,.leaderboard.row-container:not(.container),.leaderboard.container .row-content) :
Applique la couleur principale comme couleur de fond sur les colonnes/lignes avec le style "Mise en avant". Peut être surchargé dans Apparence / Styles prédéfinis / Mise en avant.
Compteur numérique animé (.widget-numeric-counter[data-colorgraph=""] path:last-child) :
Concerne le widget Compteur numérique animé lorsque le type de compteur "graphique" est sélectionné. Applique la couleur principale comme contour sur le cercle ou le demi-cercle si aucune couleur n'est choisie.
Widget playlist - Barre de lecture (.jp-play-bar) :
Correspond au widget playlist, plus précisémment à la barre de lecture. Applique la couleur principale comme couleur de fond selon la progression de la lecture.
Widget playlist - Bouton repeat et aléatoire (.jp-toggles .btn.jp-repeat-off,.jp-toggles .btn.jp-shuffle-off) :
Correspond au widget playlist, plus précisémment aux boutons repeat et aléatoire, leur applique la couleur principale lorsqu'ils sont actifs.
Widget playlist - Barre de volume (.jp-volume-bar-value) :
Correspond au widget playlist, plus précisémment à la barre de volume, applique la couleur principale pour indiquer le niveau de volume.
Liste d'éléments (.list-group-item.active) :
Correspond au composant bootstrap List group, il s'agit d'une liste d'éléments (liens par exemple). La couleur principale est appliquée sur l'élément actif.
Liste d'éléments (.list-group-item.active a) :
Correspond au composant bootstrap List group, il s'agit d'une liste d'éléments (liens par exemple). La couleur principale est appliquée sur le lien actif.
Liste d'éléments (.list-group-item>button[data-toggle=collapse]:not(.collapsed)) :
Correspond au composant bootstrap List group, il s'agit d'une liste d'éléments (liens par exemple). La couleur principale est appliquée sur le bouton qui permet de déployer le contenu et sur sa bordure.
Bouton retour en haut de page (#scroll-to-top) :
Applique la couleur principale comme couleur de fond sur le bouton de retour en haut de page.
Pagination (.list-group[data-addon=pages] .pages-item) :
Il s'agit de la pagination. La page active utilise la couleur principale comme couleur de fond et comme couleur de bordure.

{% set theme_colors = {
    'primary': {'color': theme.color_primary, 'on': theme.color_on_primary},
} %}

Couleur principale

Permet de définir une couleur principale pour les éléments à mettre en évidence sur le site. Correspond à la variable color_primary.

Couleur du texte sur la couleur principale

Définit la couleur que prendra le texte lorsqu'il sera sur fond de couleur principale.

Couleur secondaire - secondary

Permet de définir une couleur secondaire pour les éléments un peu moins importants du site.
Elle est utilisée sur les éléments du site qui utilisent la classe .secondary (définie par bootstrap).
Il s'agit des boutons .btn-secondary, des badges .badge-secondary ou des alertes .alert-secondary par exemple.
Elle est également utilisée sur les éléments qui utilisent la variable CSS --secondary (en background-color, en color, ou en border-color).

Voir tous les éléments qui utilisent la "couleur secondaire"

Bouton secondaire (.btn-secondary) :
Il s'agit des boutons qui contiennent la class .btn-secondary, la couleur secondaire est utilisée en couleur de fond et en couleur de bordure. Elle peut être surchargée dans Apparence/Boutons/Boutons secondaires.
? (.custom-file-label) :
La couleur secondaire est utilisée en couleur de fond.
Badge secondaire (.badge-secondary) :
Il s'agit des badges secondaires. La couleur secondaire est utilisée en couleur de fond de la case lorsqu'elle est cochée.
Tooltips (.bs-tooltip-left .arrow::before,.bs-tooltip-auto[x-placement^=left] .arrow::before) et (.tooltip-inner) :
Il s'agit des textes de complément d'information qui apparaissent au survol des certains éléments (comme les bulles d'aide par exemple). Ils utilisent la couleur secondaire comme couleur de fond.
Couleur de fond (.bg-secondary) :
Applique la couleur secondaire comme couleur de fond sur tous les élèments qui possèdent la classe .bg-secondary
Couleur de bordure (.border-secondary) :
Applique la couleur secondaire comme couleur de bordure sur tous les élèments qui possèdent la classe .border-secondaire
Couleur du texte (.text-secondary) :
Applique la couleur secondaire comme couleur sur tous les élèments qui possèdent la classe .text-secondary
Étiquette secondaire (.ribbon-secondary) :
Il s'agit des étiquettes qu'on peut appliquer sur les produits par exemple. Celles qui possèdent la classe .ribbon-secondary prennent la couleur principale comme couleur de fond.
Étapes d'un processus (.stepper li::before) :
Il s'agit de l'affichage des étapes lors d'un processus de paiement par exemple. Permet d'afficher les étapes avec la couleur secondaire comme couleur de fond.
Nom de l'auteur dans les questions/réponses (.qr-question .meta-author) :
Si le plugin Questions/Réponses est activé, applique la couleur secondaire au nom de l'auteur de la question.
Widget playlist - Boutons de contrôle du volume (.jp-volume-controls .btn) :
Correspond au widget playlist, plus précisémment aux boutons du volume. Applique la couleur secondaire comme couleur des boutons de contrôle du volume.
Widget playlist - Bouton repeat et aléatoire (.jp-toggles .btn) :
Correspond au widget playlist, plus précisémment aux boutons repeat et aléatoire, leur applique la couleur secondaire lorsqu'ils sont inactifs.
Sélecteur de date - Entête mois (.ui-datepicker-header) :
Correspond au sélecteur de date, plus précisemment à son entête qui affiche le mois. Applique la couleur secondaire comme couleur de fond.
Sélecteur de date - Entête jours dela semaine (.ui-datepicker thead) :
Correspond au sélecteur de date, plus précisemment à l'entête qui affiche les jours. Applique la couleur secondaire comme couleur de fond.
Sélecteur de date (.ui-datepicker-calendar .ui-state-active) :
Correspond au sélecteur de date, plus précisemment à son entête. Applique la couleur secondaire comme couleur de fond.
Liste non-ordonnée (.col-content.col-no-widget ul>li:before,.content ul>li:before) :
La couleur secondaire est utilisée comme couleur de fond de la puce si elle n'est pas définie dans l'apparence des styles.
Liste ordonnée (.col-content.col-no-widget ol>li:before) :
La couleur secondaire est utilisée comme couleur du numéro si elle n'est pas définie dans l'apparence des styles.

{% set theme_colors = {
    'secondary': {'color': theme.color_secondary, 'on': theme.color_on_secondary},
} %}

Couleur secondaire

Si l'option est activée, permet de définir une couleur secondaire pour les éléments un peu moins importants du site. Correspond à la variable color_secondary.

Couleur du texte sur la couleur secondaire

Définit la couleur que prendra le texte lorsqu'il sera sur fond de couleur secondaire.

Composants

Les composants sont par exemple le fil d'ariane, la section d'ajout au panier de la page produit, les lignes en surbrillances, le survol des paginations et des listes de liens ou encore le bas des vignettes (articles de blog par exemple).

Couleur de fond des composants

Si activée, permet de définir une couleur de fond pour les composants.

                --component-bg: {{theme.component_bg}};

Typographie

Textes

Police

Permet de définir la police des textes.

                {% set theme = theme|merge({'font_family_base' : theme.font_family_base ? '"' ~ theme.font_family_base|replace({'+': ' '}) ~ '"' : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'}) %}

                --font-family-base: {{theme.font_family_base|raw}};

                body{
                    font-family: var(--font-family-base);
                }

Couleur du texte

Permet de définir la couleur des textes.

                {% set theme = theme|merge({'body_color' : theme.body_color ? theme.body_color : 'rgba(0, 0, 0, 1)'}) %}

                --body-color: var(--gray-900);

                body{
                    color: var(--body-color);
                }

Taille du texte

Permet de définir la taille de la police des textes.

                --font-size-root: {{theme.font_size_root}};

                html{
                    font-size: var(--font-size-root);
                }

Graisse du texte

Permet de définir la graisse des textes.

                {% if theme.font_weight_root %}
                    --font-weight-base: {{theme.font_weight_root}};
                {% endif %}

                body{
                    font-weight: var(--font-weight-base);
                }

Titre

Permet de définir l'apparence des titres en général. Ils peuvent être redéfinis plus précisemment selon le type de titre (H1,H2 etc).

Police

Permet de définir la police des titres.

                {% set theme = theme|merge({'headings_font_family' : (theme.headings_font_family and ('"' ~ theme.headings_font_family|replace({'+': ' '}) ~ '"' != theme.font_family_base)) ? '"' ~ theme.headings_font_family|replace({'+': ' '}) ~ '"' : 'var(--font-family-base)'}) %}

                --headings-font-family: {{theme.headings_font_family}};

                h1, h2, h3, h4, h5, h6,
                .h1, .h2, .h3, .h4, .h5, .h6{
                    font-family: var(--headings-font-family);
                }

Couleur des titres

Permet de définir la couleur des titres.

                {% set theme = theme|merge({'headings_color' : theme.headings_color ? theme.headings_color : 'var(--body-color)'}) %}

                --headings-color: {{theme.headings_color}};

                h1, h2, h3, h4, h5, h6,
                .h1, .h2, .h3, .h4, .h5, .h6{
                    color: var(--headings-color);
                }

Taille des titres

Permet de définir la taille de la police des titres.

                --headings-font-size: {{theme.headings_font_size}};
                --headings-xl: 4rem;
                --headings-l: 3.2rem;
                --headings-m: 2.7rem;
                --headings-s: 2.2rem;

                {% if theme.headings_font_size %}
                    h1, .h1{
                        font-size: var(--headings-font-size);
                    }
                    h2, .h2{
                        font-size: calc(var(--headings-font-size) * 0.7); 
                    }
                    h3, .h3{
                        font-size: calc(var(--headings-font-size) * 0.45);
                    }
                    h4, .h4{
                        font-size: calc(var(--headings-font-size) * 0.3);
                    }
                {% endif %}

Graisse des titres

Permet de définir la graisse des titres.

                --headings-font-weight: {{theme.headings_font_weight}};

                h1, h2, h3, h4, h5, h6,
                .h1, .h2, .h3, .h4, .h5, .h6{
                    font-weight: var(--headings-font-weight);
                }

Titre H1

Permet de définir l'apparence du titre principal de chaque page (Titre H1)..

Police des titres H1

Permet de définir la police des titres H1.

                {% if theme.h1_font_family %}
                    --h1-font-family: {{'"' ~ theme.h1_font_family|replace({'+': ' '}) ~ '"'}}, var(--headings-font-family);
                {% endif %}

                h1, .h1{
                    font-family: var(--headings-font-family);
                    {% if theme.h1_font_family %}
                        font-family: var(--h1-font-family);
                    {% endif %}
                }

Couleur des titres H1

Permet de définir la couleur des titres H1.

                {% if theme.h1_color %}
                    --h1-color: {{theme.h1_color}};
                {% endif %}

                h1, .h1{
                    font-family: var(--headings-font-family);
                    {% if theme.h1_color %}
                        color: var(--h1-color);
                    {% endif %}
                }

Graisse des titres H1

Permet de définir la graisse des titres H1.

                {% if theme.h1_font_weight %}
                    --h1-font-weight: {{theme.h1_font_weight}};
                {% endif %}

                h1, .h1{
                    {% if theme.h1_font_weight %}
                        font-weight: var(--h1-font-weight);
                    {% endif %}
                }

Casse

Permet de définir la casse des titres H1.

                {% if theme.h1_transform %}
                    --h1-transform: {{theme.h1_transform}};
                {% endif %}

                h1, .h1{
                    {% if theme.h1_transform %}
                        text-transform: var(--h1-transform);
                    {% endif %}
                }

Titre H2

Permet de définir l'apparence des titres secondaires de chaque page (Titre H2)..

Police des titres H2

Permet de définir la police des titres H2.

                {% if theme.h2_font_family %}
                    --h2-font-family: {{'"' ~ theme.h2_font_family|replace({'+': ' '}) ~ '"'}}, var(--headings-font-family);
                {% endif %}

                h2, .h2{
                    font-family: var(--headings-font-family);
                    {% if theme.h2_font_family %}
                        font-family: var(--h2-font-family);
                    {% endif %}
                }

Couleur des titres H2

Permet de définir la couleur des titres H2.

                {% if theme.h2_color %}
                    --h2-color: {{theme.h2_color}};
                {% endif %}

                h2, .h2{
                    font-family: var(--headings-font-family);
                    {% if theme.h2_color %}
                        color: var(--h2-color);
                    {% endif %}
                }

Graisse des titres H2

Permet de définir la graisse des titres H2.

                {% if theme.h2_font_weight %}
                    --h2-font-weight: {{theme.h2_font_weight}};
                {% endif %}

                h2, .h2{
                    {% if theme.h2_font_weight %}
                        font-weight: var(--h2-font-weight);
                    {% endif %}
                }

Casse

Permet de définir la casse des titres H2.

                {% if theme.h2_transform %}
                    --h2-transform: {{theme.h2_transform}};
                {% endif %}

                h2, .h2{
                    {% if theme.h2_transform %}
                        text-transform: var(--h2-transform);
                    {% endif %}
                }

Titre H3

Permet de définir l'apparence des titres H3..

Police des titres H3

Permet de définir la police des titres H3.

                {% if theme.h3_font_family %}
                    --h3-font-family: {{'"' ~ theme.h3_font_family|replace({'+': ' '}) ~ '"'}}, var(--headings-font-family);
                {% endif %}

                h3, .h3{
                    font-family: var(--headings-font-family);
                    {% if theme.h3_font_family %}
                        font-family: var(--h3-font-family);
                    {% endif %}
                }

Couleur des titres H3

Permet de définir la couleur des titres H3.

                {% if theme.h3_color %}
                    --h3-color: {{theme.h3_color}};
                {% endif %}

                h3, .h3{
                    font-family: var(--headings-font-family);
                    {% if theme.h3_color %}
                        color: var(--h3-color);
                    {% endif %}
                }

Graisse des titres H3

Permet de définir la graisse des titres H3.

                {% if theme.h3_font_weight %}
                    --h3-font-weight: {{theme.h3_font_weight}};
                {% endif %}

                h3, .h3{
                    {% if theme.h3_font_weight %}
                        font-weight: var(--h3-font-weight);
                    {% endif %}
                }

Casse

Permet de définir la casse des titres H3.

                {% if theme.h3_transform %}
                    --h3-transform: {{theme.h3_transform}};
                {% endif %}

                h3, .h3{
                    {% if theme.h3_transform %}
                        text-transform: var(--h3-transform);
                    {% endif %}
                }

Logo et titre du site

Logo

Importer un logo

Permet d'importer un logo qui s'affichera en haut du site.

                {% if site.logo %}
                    <img src="{{site.logo}}" alt="{{site.title|e}}" class="img-fluid brand-logo {{theme.brand_logo_display}}"/>
                {% endif %}

Affichage du logo

Correspond à la variable brand_logo_display. Ajoute une class qui permet de gérer l'affichage du logo.
Les 3 valeurs possibles sont d-none, d-none d-lg-linline-block, d-inline-block.

                {% if site.logo %}
                    <img src="{{site.logo}}" alt="{{site.title|e}}" class="img-fluid brand-logo {{theme.brand_logo_display}}"/>
                {% endif %}

Taille du logo

Si activé, permet de définir la hauteur maximale du logo. (4 tailles sont proposées : 40px, 80px, 120px, 250px).
Correspond à la variable brandlogosize.

                {% if theme.brandlogosize %}
                    --brand-logo-size:{{theme.brandlogosize}};
                {% endif %}

                @media (min-width: {{theme.grid_breakpoints.lg}}){
                    .brand-logo{
                        {% if theme.brandlogosize %}
                            max-height: var(--brand-logo-size);
                        {% endif %}
                    }    
                }

Titre du site

Affichage du titre

Correspond à la variable brand_title_display. Ajoute une class qui permet de gérer l'affichage du titre.
Les 3 valeurs possibles sont d-inline-block, d-none et d-none d-lg-linline-block.

                {% if site.title %}
                    <span class="brand-titles d-lg-flex flex-column align-items-start">
                        <span class="brand-title {{theme.brand_title_display}}">{{site.title|raw}}</span>
                    </span>
                {% endif %}

Graisse du titre

Permet de gérér la graisse du titre.
Correspond à la variable brand_font_weight.
Les 3 valeurs possibles sont var(--font-weight-light), var(--font-weight-normal), var(--font-weight-bold).

                .brand-title{
                    font-weight: {{theme.brand_font_weight}};
                }

Couleur du titre

Permet de définir la couleur du titre. Correspond à la variable brand_color.

                --brand-color: {% if theme.brand_color %} {{theme.brand_color}} {% else %} var(--headings-color) {% endif %};

                .top-brand{
                    color: var(--brand-color);
                }

                #navbar{
                    {% if theme.brand_color %}
                        --navbar-brand-color: var(--brand-color);    
                    {% endif %}
                }

                .navbar-brand{
                    color: var(--navbar-brand-color);
                }

Couleur de fond du titre

Permet de définir la couleur de fond du titre. Ajoute un padding sur .brand-title. Correspond à la variable brand_bg.

                .brand-title{
                    {% if theme.brand_bg or theme.brand_hover_bg %}
                        padding: .25em .5rem;
                    {% if theme.brand_bg %}
                        background-color: {{theme.brand_bg}};
                    {% endif %}
                }

Couleur au survol

Permet de définir la couleur du titre au survol. Correspond à la variable brand_hover_color.

                --brand-hover-color: {% if theme.brand_hover_color %} {{theme.brand_hover_color}} {% else %} var(--brand-color) {% endif %};

                .top-brand:hover, .top-brand:focus {
                    color: var(--brand-hover-color);
                }

                #navbar{
                    --navbar-brand-hover-color: {{theme.brand_hover_color ? theme.brand_hover_color : 'var(--navbar-brand-color)'}};
                }

                .navbar-brand:hover,
                .navbar-brand:focus{
                        color: var(--navbar-brand-hover-color);
                }

Couleur de fond au survol

Permet de définir la couleur de fond du titre au survol. Ajoute un padding sur .brand-title. Correspond à la variable brand_hover_bg.

                .brand-title{
                    {% if theme.brand_bg or theme.brand_hover_bg %}
                        padding: .25em .5rem;
                    {% if theme.brand_bg %}
                        background-color: {{theme.brand_bg}};
                    {% endif %}
                }

                {% if theme.brand_hover_bg %}
                    .navbar-brand:hover .brand-title,
                    .navbar-brand:focus .brand-title,
                    .top-brand:hover .brand-title,
                    .top-brand:focus .brand-title{
                        background-color: {{theme.brand_hover_bg}};
                    }
                {% endif %}

Position

Permet de définir la position du bloc logo + titre dans le DOM parmis 4 emplacements :
headerleft, menu, brand-top-left, brand-top-center.
Correspond à la variable brand_position

headerleft : Le bloc est placé à gauche à l'intérieur de l'élèment #navbar
menu : L'élément #navbar est scindé en 2 avec le bloc logo + titre au centre
brand-top-left : Le bloc logo + titre est placé à gauche dans un élément #brand-top-wrapper au dessus de #navbar
brand-top-center : Le bloc logo + titre est placé au centre dans un élément #brand-top-wrapper au dessus de #navbar

                {% if theme.brand_position == 'headerleft' %}{% endif %}
                {% if theme.brand_position == 'menu' %}{% endif %}
                {% if theme.brand_position == 'brand-top-left' %}{% endif %}
                {% if theme.brand_position == 'brand-top-center' %}{% endif %}

Sous-titre du site

Affichage du sous-titre

Correspond à la variable brand_subtitle_display. Ajoute une class qui permet de gérer l'affichage du titre.
Les 2 valeurs possibles sont d-none et d-none d-lg-linline-block.

                {% if site.tagline %}
                    <span class="{{'brand-subtitle ' ~ theme.brand_subtitle_display}}">{{site.tagline|raw}}</span>
                {% endif %}

Navigation et menu

Navigation générale

Couleur des liens

Permet de définir la couleur des liens sur l'ensemble du site. Correspond à la variable link_color.

--link-color: {{theme.link_color}};

                a{
                    color: var(--link-color);
                }

Couleur des liens au survol

Permet de définir la couleur des liens lorsqu'ils sont survolés sur l'ensemble du site. Correspond à la variable link_hover_color.

--link-hover-color: {{theme.link_hover_color}};

                a:hover{
                    color: var(--link-hover-color);
                }

Apparence des liens

Permet de définir si les liens doivent être soulignés sur l'ensemble du site. Correspond à la variable link_decoration.

--link-decoration: {{theme.link_decoration}};

                a{
                    text-decoration: var(--link-decoration);
                }

Apparence des liens au survol

Permet de définir si les liens doivent être soulignés au survol sur l'ensemble du site. Correspond à la variable link_hover_decoration.

--link-hover-decoration: {{theme.link_hover_decoration}};

                a:hover{
                    text-decoration: var(--link-hover-decoration);
                }

Menu horizontal

Le menu horizontal correspond à l'élèment #navbar.

Largeur du menu

Permet de définir la largeur du menu à savoir s'il occupe uniquement la largeur du site ou s'il s'étend sur toute la largeur de la fenêtre.
Si la première option est sélectionnée, la class "container" est ajoutée à l'élément #navbar, ce qui l'empêche d'occuper toute la largeur de la fenêtre. Correspond à la variable navbar_width.

                {% set navbar_classes = [] %}
                {% if theme.navbar_width == 'container' %}
                    {% set navbar_classes = navbar_classes|merge(['container']) %}
                {% endif %}

                <nav class="navbar navbar-expand-lg {{navbar_classes|join(' ')}}" id="navbar" data-animation="sliding"{% if theme.navbar_fixed and theme.navbar_shrinked %} data-shrink="150"{% endif %}></code>

Couleur de fond du menu

Permet de définir la couleur de fond du menu. Applique un background-color sur l'élément #navbar.
Correspond à la variable navbar_bg.

                #navbar{
                    {% if theme.navbar_bg %}
                        background-color: {{theme.navbar_bg}};
                    {% endif %}
                }

Couleur de la bordure inférieure

Permet d'ajouter une bordure inférieure sur l'élément #navbar. Correspond à la variable navbar_border.

                #navbar{
                    {% if theme.navbar_border %}
                        border-bottom: var(--border-width) solid {{theme.navbar_border}};
                    {% endif %}
                }

Bords arrondis

Si activé permet d'arrondir les angles du menu. Correspond à la variable navbar_radius.
Ajoute au choix sur l'élément #navbar :

la class radius si l'élément header n'est pas affiché et qu'une marge supérieure est activée sur le #wrapper ou si le header est activé et qu'il comporte une marge supérieure
la class radius-top si les conditions ci-dessus ne sont pas remplies.

                {% if theme.navbar_radius %}
                    {% if ((zones.header.active == false) and theme.wrapper_margin_top) or (zones.header.active and theme.header_margin_top) %}
                        {% set navbar_classes = navbar_classes|merge(['radius']) %}
                    {% else %}
                        {% set navbar_classes = navbar_classes|merge(['radius-top']) %}
                    {% endif %}
                {% endif %}

                @media (min-width: {{theme.layout_expanded_min}}){
                    #navbar.radius{
                        border-radius: .25rem;
                    }
                    #navbar.radius-top{
                        border-radius: .25rem .25rem 0 0;
                    }
                }

Ombre portée

Permet d'ajouter une ombre portée sur l'élèment #navbar et d'en définir la couleur et l'opacité. Correspond à la variable navbar_shadow.

                #navbar{
                    {% if theme.navbar_shadow %}
                        box-shadow: 0 .2rem .5rem {{theme.navbar_shadow}};
                    {% endif %}
                }

Marges intérieures verticales

Si l'option "étendue" est sélectionnée, ajoute la class py-lg-4 sur l'élèment #navbar. Correspond à la variable navbar_padding_y.

                {% if theme.navbar_padding_y == 'expanded' %}
                    {% set navbar_classes = navbar_classes|merge(['py-lg-4']) %}
                {% endif %}

Fixer le menu horizontal

Permet de fixer l'élément #navbar en haut du site en lui appliquant une class position-fixed, position-sticky ou position-absolute selon certaines conditions.
Correspond à la variable navbar_fixed.

                {% if theme.navbar_fixed %}
                    {% if navbar_superimposed %}
                        {% set navbar_classes = navbar_classes|merge(['position-fixed']) %}
                        {% if theme.navbar_transparent_on_slider %}
                            {% set navbar_classes = navbar_classes|merge(['is-transparent']) %}
                        {% endif %}
                    {% else %}
                        {% set navbar_classes = navbar_classes|merge(['position-sticky']) %}
                    {% endif %}
                {% elseif navbar_superimposed %}
                    {% set navbar_classes = navbar_classes|merge(['position-absolute']) %}
                {% endif %}

                <nav class="navbar navbar-expand-lg {{navbar_classes|join(' ')}}" id="navbar" data-animation="sliding"{% if theme.navbar_fixed and theme.navbar_shrinked %} data-shrink="150"{% endif %}>

Rétracter lors du défilement (uniquement si Fixer le menu horizontal est coché)

Permet de rétracter le menu au défilement de la page en ajoutant une class .is-shrinked à l'élèment #navbar.
Réduit la hauteur du logo de moitié. Correspond à la variable navbar_shrinked.

                <nav class="navbar navbar-expand-lg {{navbar_classes|join(' ')}}" id="navbar" data-animation="sliding"{% if theme.navbar_fixed and theme.navbar_shrinked %} data-shrink="150"{% endif %}>

Marge supérieure (uniquement si Fixer le menu horizontal est décoché)

Permet d'ajouter une marge au dessus du menu (La taille de la marge correspond à var(--grid-gutter-width) / 2).
Correspond à la variable navbar_margin_top.

                @media (min-width: {{theme.layout_expanded_min}}){
                    #navbar{
                        {% if theme.navbar_margin_top and (theme.navbar_fixed == false) %}
                            margin-top: calc(var(--grid-gutter-width) / 2);
                        {% endif %}
                    }
                }

Superposer sur le contenu inférieur

Permet de superposer le menu sur l'entête header si celui-ci est activé dans Configuration/Menu. Correspond à la variable navbar_superimposed.

                {% set navbar_superimposed = zones.header.active and theme.navbar_superimposed %}
                {% set navbar_classes = [] %}
                {% if theme.navbar_fixed %}
                    {% if navbar_superimposed %}
                        {% set navbar_classes = navbar_classes|merge(['position-fixed']) %}
                        {% if theme.navbar_transparent_on_slider %}
                            {% set navbar_classes = navbar_classes|merge(['is-transparent']) %}
                        {% endif %}
                    {% else %}
                        {% set navbar_classes = navbar_classes|merge(['position-sticky']) %}
                    {% endif %}
                {% elseif navbar_superimposed %}
                    {% set navbar_classes = navbar_classes|merge(['position-absolute']) %}
                {% endif %}

Fond transparent sur l'entête (uniquement si Fixer le menu horizontal et Superposer sur le contenu inférieur sont cochés)

Permet d'ajouter la class .is-transparent sur l'élèment #navbar. Correspond à la variable navbar_transparent_on_slider.

                {% set navbar_superimposed = zones.header.active and theme.navbar_superimposed %}
                {% set navbar_classes = [] %}
                {% if theme.navbar_transparent_on_slider %}
                    {% set navbar_classes = navbar_classes|merge(['is-transparent']) %}
                {% endif %}

                #navbar.position-fixed.is-transparent{
                    background-color: transparent;
                    box-shadow: none;
                }

Liens du menu horizontal

Couleur des liens

Permet de définir la couleur des liens du menu #navbar. Correspond à la variable navbar_link_color.

                {% set theme = theme|merge({'navbar_link_color' : theme.navbar_link_color ? theme.navbar_link_color : theme.color_primary}) %}

                --navbar-link-color: {{theme.navbar_link_color}};

                .navbar-nav .nav-link{
                    color: var(--navbar-link-color);
                }

Couleur des liens au survol

Permet de définir la couleur des liens du menu #navbar au survol. Correspond à la variable navbar_link_hover_color.

                {% set theme = theme|merge({'navbar_link_hover_color' : theme.navbar_link_hover_color ? theme.navbar_link_hover_color : theme.navbar_link_color}) %}

                --navbar-link-hover-color: {{theme.navbar_link_hover_color}};

                .navbar-nav .nav-link:hover,
                .navbar-nav .nav-link:focus{
                    color: var(--navbar-link-hover-color);
                }

Fond des liens au survol

Permet de définir la couleur de fond des liens du menu #navbar au survol. Correspond à la variable navbar_link_hover_bg.

                {% set theme = theme|merge({'navbar_link_hover_bg' : theme.navbar_link_hover_bg ? theme.navbar_link_hover_bg : 'var(--navbar-link-bg)'}) %}

                --navbar-link-hover-bg: {{theme.navbar_link_hover_bg}};

                .navbar-nav .nav-link:hover,
                .navbar-nav .nav-link:focus{
                    background-color: var(--navbar-link-hover-bg);
                }

Bordure au survol

Permet d'ajouter une bordure au survol d'un lien du menu. Correspond à la variable navbar_link_hover_border.

                @media (min-width: {{theme.layout_expanded_min}}){
                    {% if theme.navbar_link_hover_border %}
                        #menu .navbar-nav .nav-item{
                            position: relative;
                        }
                        #menu .navbar-menu .nav-link::before{
                            position: absolute;
                            bottom: 3px;
                            left: var(--navbar-nav-link-padding-x);
                            display: block;
                            height: 3px;
                            width: calc(100% - (var(--navbar-nav-link-padding-x) * 2));
                            opacity: 0;
                            transition: var(--transition-fade);
                            background-color: {{theme.navbar_link_hover_border}};
                            content: "";
                        }
                    {% endif %} 
                }

Alignement des liens du menu

Permet d'aligner les liens du menu à gauche, au centre ou à doite via des les classes .flex-lg-grow-0.mx-lg-auto et flex-lg-grow-0.ml-lg-auto sur l'élèment #menu.
Correspond à la variable navbar_nav_align.

                <div class="collapse navbar-collapse {{theme.navbar_nav_align}}{{(theme.navbar_nav_align == 'flex-lg-grow-0 mx-lg-auto') and (theme.brand_position == 'menu') ? ' invisible' : ''}}" id="menu">

Hauteur des liens

Augmente le padding-top et le padding-bottom des liens .nav-link de l'élèment #menu. Correspond à la variable navbar_link_height.

                @media (min-width: {{theme.layout_expanded_min}}){
                    #navbar .nav-link{
                        {% if theme.navbar_link_height == 'expanded' %}
                        margin: calc(var(--navbar-padding-y) * -1) 0;
                        padding: calc(var(--navbar-padding-y) + var(--nav-link-padding-y)) var(--nav-link-padding-x);
                        {% endif %}
                    }
                }

Contenu du menu horizontal

Moteur de recherche

Permet d'ajouter le widget recherche à l'intérieur du #menu à l'intérieur d'une liste ul .navbar-widgets. Correspond à la variable navbar_search.

                    {% if theme.navbar_search or (theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published)) %}
                        <ul class="navbar-nav navbar-widgets ml-lg-4">
                            {% if theme.navbar_search %}
                                <li class="nav-item d-none d-lg-block">
                                    <a href="javascript:void(0)" class="nav-link search-toggler"><i class="material-icons md-search"></i></a>
                                </li>
                            {% endif %}
                            {% if theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published) %}
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/cart/" class="nav-link">
                                        <i class="material-icons md-shopping_cart"></i>
                                        <span class="d-lg-none">{{lang.line('cart')}}</span>
                                        <span class="badge badge-primary" data-role="cart-count"></span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/account/" class="nav-link">
                                        <i class="material-icons md-perm_identity"></i>
                                        <span class="d-lg-none">{{lang.line('go_to_account')}}</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    {% endif %}

Bouton "Panier"

Permet d'ajouter le widget panier à l'intérieur du #menu à l'intérieur d'une liste ul .navbar-widgets. Correspond à la variable navbar_cart.

                    {% if theme.navbar_search or (theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published)) %}
                        <ul class="navbar-nav navbar-widgets ml-lg-4">
                            {% if theme.navbar_search %}
                                <li class="nav-item d-none d-lg-block">
                                    <a href="javascript:void(0)" class="nav-link search-toggler"><i class="material-icons md-search"></i></a>
                                </li>
                            {% endif %}
                            {% if theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published) %}
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/cart/" class="nav-link">
                                        <i class="material-icons md-shopping_cart"></i>
                                        <span class="d-lg-none">{{lang.line('cart')}}</span>
                                        <span class="badge badge-primary" data-role="cart-count"></span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/account/" class="nav-link">
                                        <i class="material-icons md-perm_identity"></i>
                                        <span class="d-lg-none">{{lang.line('go_to_account')}}</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    {% endif %}

Liens vers les réseaux sociaux

Permet d'ajouter le widget réseaux sociaux à l'intérieur du #menu à l'intérieur d'une liste ul .website-social-links. Correspond à la variable navbar_sn.

                    {% if theme.navbar_search or (theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published)) %}
                        <ul class="navbar-nav navbar-widgets ml-lg-4">
                            {% if theme.navbar_search %}
                                <li class="nav-item d-none d-lg-block">
                                    <a href="javascript:void(0)" class="nav-link search-toggler"><i class="material-icons md-search"></i></a>
                                </li>
                            {% endif %}
                            {% if theme.navbar_cart and (site.modules.eco and site.modules.eco.params.published) %}
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/cart/" class="nav-link">
                                        <i class="material-icons md-shopping_cart"></i>
                                        <span class="d-lg-none">{{lang.line('cart')}}</span>
                                        <span class="badge badge-primary" data-role="cart-count"></span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{site.url ~ site.modules.eco.seo_uri}}/do/account/" class="nav-link">
                                        <i class="material-icons md-perm_identity"></i>
                                        <span class="d-lg-none">{{lang.line('go_to_account')}}</span>
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    {% endif %}
                    {% if site.social_network and theme.navbar_sn %}
                        {% include "system.includes.social_links" %}
                    {% endif %}

Menu déroulants

Permet de personnaliser l'affichage des menus déroulants .dropdown-menu de la #navbar.

Couleur des liens

Permet de définir la couleur des liens a.dropdown-item à l'intérieur des menus déroulants de la #navbar. Correspond à la variable navbar_dropdowns_color. Redéfinit la propriété CSS --navbar-link-color au sein de l'élèment #menu.

                @media (max-width: {{theme.layout_stretched_max}}){
                    #menu{
                        {% if theme.navbar_bg == false %}
                        --navbar-link-color: {{theme.navbar_dropdowns_color ? theme.navbar_dropdowns_color : 'var(--body-color)'}};
                        {% endif %}
                    }
                }

                    #menu .dropdown-menu{
                        {% if theme.navbar_dropdowns_color %}
                        --body-color: {{theme.navbar_dropdowns_color}};
                        {% endif %}
                    }

Couleur de fond

Permet de définir la couleur de fond des liens a.dropdown-item à l'intérieur des menus déroulants de la #navbar. Correspond à la variable navbar_dropdowns_bg.

                .dropdown-menu{
                    background-color: var(--dropdown-bg);
                }

                @media (max-width: {{theme.layout_stretched_max}}){
                    #menu{
                        background-color: {{theme.navbar_bg ? theme.navbar_bg : (theme.navbar_dropdowns_bg ? theme.navbar_dropdowns_bg : 'var(--body-bg)')}};
                    }
                }

                #menu .dropdown-menu{
                    {% if theme.navbar_dropdowns_bg %}
                        --dropdown-bg: {{theme.navbar_dropdowns_bg}};
                    {% endif %}
                }

Couleur des liens au survol

Permet de définir la couleur des liens a.dropdown-item à l'intérieur des menus déroulants de la #navbar au survol. Correspond à la variable navbar_dropdowns_hover_color.

                @media (max-width: {{theme.layout_stretched_max}}){
                    #menu{
                        {% if theme.navbar_bg == false %}
                        --navbar-link-hover-color: {{theme.navbar_dropdowns_hover_color ? theme.navbar_dropdowns_hover_color : 'var(--black)'}};
                        {% endif %}
                    }
                }

                #menu .dropdown-menu{
                    {% if theme.navbar_dropdowns_hover_color %}
                    --{{theme.body_color is dark ? 'black' : 'white'}}: {{theme.navbar_dropdowns_hover_color}};
                    {% endif %}
                }

Couleur de fond au survol

Permet de définir la couleur de fond des liens a.dropdown-item à l'intérieur des menus déroulants de la #navbar au survol. Correspond à la variable navbar_dropdowns_hover_bg.

                @media (max-width: {{theme.layout_stretched_max}}){
                    #menu{
                        {% if theme.navbar_bg == false %}
                        --navbar-link-hover-bg: {{theme.navbar_dropdowns_hover_bg ? theme.navbar_dropdowns_hover_bg : 'var(--component-bg)'}};
                        {% endif %}
                    }
                }

                #menu .dropdown-menu{
                    --component-bg: {{theme.navbar_dropdowns_hover_bg ? theme.navbar_dropdowns_hover_bg : 'var(--navbar-link-hover-bg)'}};
                }

Bordure extérieure

Permet de définir une couleur de bordure pour l'élèment .dropdown-menu. Correspond à la variable navbar_dropdowns_border.

                #menu .dropdown-menu{
                    {% if theme.navbar_dropdowns_border %}
                        --border-color: {{theme.navbar_dropdowns_border}};
                    {% else %}
                        --border-width: 0;
                    {% endif %}
                }

                @media (max-width: {{theme.layout_stretched_max}}){
                    #menu .dropdown-menu{
                        {% if theme.navbar_dropdowns_border %}
                            border-width: var(--border-width) 0 0;
                        {% endif %}
                    }
                }

Bordure de séparation

Permet de définir une couleur de bordure de séparation entre les .dropdown-item. Correspond à la variable navbar_dropdowns_separate.

                {% if theme.navbar_dropdowns_separate %}
                    #menu .dropdown-menu li:not(:first-child){
                        border-top: 1px solid {{theme.navbar_dropdowns_separate}};
                    }
                {% endif %}

Ombre portée

Permet d'ajouter une ombre portée sur les sous-menus .dropdown-menu et d'en définir la couleur et l'opacité. Correspond à la variable navbar_dropdowns_shadow.

                @media (min-width: {{theme.layout_expanded_min}}){
                    #menu .dropdown-menu{
                        {% if theme.navbar_dropdowns_shadow %}
                        --box-shadow: 0 .5rem 1rem {{theme.navbar_dropdowns_shadow}};
                        {% endif %}
                    }
                }

Bords arrondis

Permet d'arrondir les angles des sous-menus. Correspond à la variable navbar_dropdowns_radius.

                @media (min-width: {{theme.layout_expanded_min}}){
                    #menu .dropdown-menu{
                        {% if theme.navbar_dropdowns_radius %}
                        --border-radius: .25rem;
                        {% endif %}
                    }
                }

Boutons

Bouton d'action

Sur Rebirth, un bouton d'action correspond à la class .btn.btn-main

Couleur de fond

Permet de définir la couleur de fond des .btn-main. Correspond à la variable btn_main_bg_color.

                {% if theme.btn_main_bg_color %}
                    --btn-main-bg-color: {{ theme.btn_main_bg_color }};
                {% endif %}

                .btn-main {
                    {% if theme.btn_main_bg_color %}
                        background-color: var(--btn-main-bg-color);
                    {% endif %} 
                    }

Couleur de fond au survol

Permet de définir la couleur de fond des .btn-main au survol. Correspond à la variable btn_main_hover_bg_color.

                    {% if theme.btn_main_hover_bg_color %}
                        --btn-main-hover-bg-color: {{ theme.btn_main_hover_bg_color }};
                    {% endif %}

                .btn-main:hover{
                    {% if theme.btn_main_hover_bg_color %}
                        background-color: var(--btn-main-hover-bg-color);
                    {% endif %}
                }

Couleur du texte

Permet de définir la couleur du texte des .btn-main. Correspond à la variable btn_main_color.

                    {% if theme.btn_main_color %}
                        --btn-main-color: {{ theme.btn_main_color }};
                    {% endif %}

                .btn-main{
                    {% if theme.btn_main_color %}
                        color: var(--btn-main-color);
                    {% endif %}
                }

Couleur du texte au survol

Permet de définir la couleur du texte des .btn-main au survol. Correspond à la variable btn_main_hover_color.

                    {% if theme.btn_main_hover_color %}
                        --btn-main-hover-color: {{ theme.btn_main_hover_color }};
                    {% endif %}

                .btn-main:hover{
                    {% if theme.btn_main_hover_color %}
                        color: var(--btn-main-hover-color);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure des .btn-main. Correspond à la variable btn_main_border_color.

                    {% if theme.btn_main_border_color %}
                        --btn-main-border-color: {{ theme.btn_main_border_color }};
                    {% endif %}

                .btn-main {
                    {% if theme.btn_main_border_color %}
                        border-color: var(--btn-main-border-color);
                    {% endif %}
                    }

Couleur de la bordure au survol

Permet de définir la couleur de la bordure des .btn-main au survol. Correspond à la variable btn_main_hover_border_color.

                    {% if theme.btn_main_hover_border_color %}
                        --btn-main-hover-border-color: {{ theme.btn_main_hover_border_color }};
                    {% endif %}

                .btn-main:hover{
                    {% if theme.btn_main_hover_border_color %}
                        border-color: var(--btn-main-hover-border-color);
                    {% endif %}
                }

Marges intérieures horizontales

Permet de définir l'épaisseur des marges intérieures horizontales des .btn-main. Correspond à la variable btn_main_padding_horizontal.
4 choix possibles :

var(--btn-padding-x-sm)
var(--btn-padding-x)
var(--btn-padding-x-lg)
var(--btn-padding-x-xl)

                .btn-main {
                    {% if theme.btn_main_padding_horizontal %}
                        padding-left: {{theme.btn_main_padding_horizontal}};
                        padding-right: {{theme.btn_main_padding_horizontal}};
                    {% endif %}
                    }

Marges intérieures verticales

Permet de définir l'épaisseur des marges intérieures verticales des .btn-main. Correspond à la variable btn_main_padding_vertical.
4 choix possibles :

var(--btn-padding-y-sm)
var(--btn-padding-y)
var(--btn-padding-y-lg)
var(--btn-padding-y-xl)

                .btn-main {
                    {% if theme.btn_main_padding_vertical %}
                        padding-top: {{theme.btn_main_padding_vertical}};
                        padding-bottom: {{theme.btn_main_padding_vertical}};
                    {% endif %}
                }

Bords arrondis

Permet d'arrondir les angles des .btn.btn-main. Correspond à la variable btn_main_borderradius.
4 choix possibles :

var(--border-radius-none)
.25rem
.75rem
5rem

                {% if theme.btn_main_borderradius %}  
                    --btn-main-border-radius: {{theme.btn_main_borderradius}}; 
                {% endif %}

                .btn-main {
                    {% if theme.btn_main_borderradius %}  
                        border-radius: var(--btn-main-border-radius); 
                    {% endif %}
                }

Bouton standard

Sur Rebirth, un bouton standard correspond à la class .btn.btn-default

Couleur de fond

Permet de définir la couleur de fond des .btn-default. Correspond à la variable btn_default_bg_color.

                {% if theme.btn_default_bg_color %}
                    --btn-default-bg-color: {{ theme.btn_default_bg_color }};
                {% endif %}

                .btn-default {
                    {% if theme.btn_default_bg_color %}
                        background-color: var(--btn-default-bg-color);
                    {% endif %} 
                    }

Couleur de fond au survol

Permet de définir la couleur de fond des .btn-main au survol. Correspond à la variable btn_default_hover_bg_color.

                    {% if theme.btn_default_hover_bg_color %}
                        --btn-default-hover-bg-color: {{ theme.btn_default_hover_bg_color }};
                    {% endif %}

                .btn-default:hover{
                    {% if theme.btn_default_hover_bg_color %}
                        background-color: var(--btn-default-hover-bg-color);
                    {% endif %}
                }

Couleur du texte

Permet de définir la couleur du texte des .btn-default. Correspond à la variable btn_default_color.

                    {% if theme.btn_default_color %}
                        --btn-default-color: {{ theme.btn_default_color }};
                    {% endif %}

                .btn-default{
                    {% if theme.btn_default_color %}
                        color: var(--btn-default-color);
                    {% endif %}
                }

Couleur du texte au survol

Permet de définir la couleur du texte des .btn-default au survol. Correspond à la variable btn_default_hover_color.

                    {% if theme.btn_default_hover_color %}
                        --btn-default-hover-color: {{ theme.btn_default_hover_color }};
                    {% endif %}

                .btn-default:hover{
                    {% if theme.btn_default_hover_color %}
                        color: var(--btn-default-hover-color);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure des .btn-default. Correspond à la variable btn_default_border_color.

                    {% if theme.btn_default_border_color %}
                        --btn-default-border-color: {{ theme.btn_default_border_color }};
                    {% endif %}

                .btn-default {
                    {% if theme.btn_default_border_color %}
                        border-color: var(--btn-default-border-color);
                    {% endif %}
                    }

Couleur de la bordure au survol

Permet de définir la couleur de la bordure des .btn-default au survol. Correspond à la variable btn_default_hover_border_color.

                    {% if theme.btn_default_hover_border_color %}
                        --btn-default-hover-border-color: {{ theme.btn_default_hover_border_color }};
                    {% endif %}

                .btn-default:hover{
                    {% if theme.btn_default_hover_border_color %}
                        border-color: var(--btn-default-hover-border-color);
                    {% endif %}
                }

Marges intérieures horizontales

Permet de définir l'épaisseur des marges intérieures horizontales des .btn-default. Correspond à la variable btn_default_padding_horizontal.
4 choix possibles :

var(--btn-padding-x-sm)
var(--btn-padding-x)
var(--btn-padding-x-lg)
var(--btn-padding-x-xl)

                .btn-default {
                    {% if theme.btn_default_padding_horizontal %}
                        padding-left: {{theme.btn_default_padding_horizontal}};
                        padding-right: {{theme.btn_default_padding_horizontal}};
                    {% endif %}
                    }

Marges intérieures verticales

Permet de définir l'épaisseur des marges intérieures verticales des .btn-default. Correspond à la variable btn_default_padding_vertical.
4 choix possibles :

var(--btn-padding-y-sm)
var(--btn-padding-y)
var(--btn-padding-y-lg)
var(--btn-padding-y-xl)

                .btn-default {
                    {% if theme.btn_default_padding_vertical %}
                        padding-top: {{theme.btn_default_padding_vertical}};
                        padding-bottom: {{theme.btn_default_padding_vertical}};
                    {% endif %}
                }

Bords arrondis

Permet d'arrondir les angles des .btn.btn-default. Correspond à la variable btn_default_borderradius.
4 choix possibles :

var(--border-radius-none)
.25rem
.75rem
5rem

                {% if theme.btn_default_borderradius %}  
                    --btn-default-border-radius: {{theme.btn_default_borderradius}}; 
                {% endif %}

                .btn-default {
                    {% if theme.btn_default_borderradius %}  
                        border-radius: var(--btn-default-border-radius); 
                    {% endif %}
                }

Bouton primaire

Sur Rebirth, un bouton primaire correspond à la class .btn.btn-primary

Couleur de fond

Permet de définir la couleur de fond des .btn-primary. Correspond à la variable btn_primary_bg_color.

                {% if theme.btn_primary_bg_color %}
                    --btn-primary-bg-color: {{ theme.btn_primary_bg_color }};
                {% endif %}

                .btn-primary {
                    {% if theme.btn_primary_bg_color %}
                        background-color: var(--btn-primary-bg-color);
                    {% endif %} 
                    }

Couleur de fond au survol

Permet de définir la couleur de fond des .btn-main au survol. Correspond à la variable btn_primary_hover_bg_color.

                    {% if theme.btn_primary_hover_bg_color %}
                        --btn-primary-hover-bg-color: {{ theme.btn_primary_hover_bg_color }};
                    {% endif %}

                .btn-primary:hover{
                    {% if theme.btn_primary_hover_bg_color %}
                        background-color: var(--btn-primary-hover-bg-color);
                    {% endif %}
                }

Couleur du texte

Permet de définir la couleur du texte des .btn-primary. Correspond à la variable btn_primary_color.

                    {% if theme.btn_primary_color %}
                        --btn-primary-color: {{ theme.btn_primary_color }};
                    {% endif %}

                .btn-primary{
                    {% if theme.btn_primary_color %}
                        color: var(--btn-primary-color);
                    {% endif %}
                }

Couleur du texte au survol

Permet de définir la couleur du texte des .btn-primary au survol. Correspond à la variable btn_primary_hover_color.

                    {% if theme.btn_primary_hover_color %}
                        --btn-primary-hover-color: {{ theme.btn_primary_hover_color }};
                    {% endif %}

                .btn-primary:hover{
                    {% if theme.btn_primary_hover_color %}
                        color: var(--btn-primary-hover-color);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure des .btn-primary. Correspond à la variable btn_primary_border_color.

                    {% if theme.btn_primary_border_color %}
                        --btn-primary-border-color: {{ theme.btn_primary_border_color }};
                    {% endif %}

                .btn-primary {
                    {% if theme.btn_primary_border_color %}
                        border-color: var(--btn-primary-border-color);
                    {% endif %}
                    }

Couleur de la bordure au survol

Permet de définir la couleur de la bordure des .btn-primary au survol. Correspond à la variable btn_primary_hover_border_color.

                    {% if theme.btn_primary_hover_border_color %}
                        --btn-primary-hover-border-color: {{ theme.btn_primary_hover_border_color }};
                    {% endif %}

                .btn-primary:hover{
                    {% if theme.btn_primary_hover_border_color %}
                        border-color: var(--btn-primary-hover-border-color);
                    {% endif %}
                }

Marges intérieures horizontales

Permet de définir l'épaisseur des marges intérieures horizontales des .btn-primary. Correspond à la variable btn_primary_padding_horizontal.
4 choix possibles :

var(--btn-padding-x-sm)
var(--btn-padding-x)
var(--btn-padding-x-lg)
var(--btn-padding-x-xl)

                .btn-primary {
                    {% if theme.btn_primary_padding_horizontal %}
                        padding-left: {{theme.btn_primary_padding_horizontal}};
                        padding-right: {{theme.btn_primary_padding_horizontal}};
                    {% endif %}
                    }

Marges intérieures verticales

Permet de définir l'épaisseur des marges intérieures verticales des .btn-primary. Correspond à la variable btn_primary_padding_vertical.
4 choix possibles :

var(--btn-padding-y-sm)
var(--btn-padding-y)
var(--btn-padding-y-lg)
var(--btn-padding-y-xl)

                .btn-primary {
                    {% if theme.btn_primary_padding_vertical %}
                        padding-top: {{theme.btn_primary_padding_vertical}};
                        padding-bottom: {{theme.btn_primary_padding_vertical}};
                    {% endif %}
                }

Bords arrondis

Permet d'arrondir les angles des .btn.btn-primary. Correspond à la variable btn_primary_borderradius.
4 choix possibles :

var(--border-radius-none)
.25rem
.75rem
5rem

                {% if theme.btn_primary_borderradius %}  
                    --btn-primary-border-radius: {{theme.btn_primary_borderradius}}; 
                {% endif %}

                .btn-primary {
                    {% if theme.btn_primary_borderradius %}  
                        border-radius: var(--btn-primary-border-radius); 
                    {% endif %}
                }

Bouton secondaire

Sur Rebirth, un bouton secondaire correspond à la class .btn.btn-secondary

Couleur de fond

Permet de définir la couleur de fond des .btn-secondary. Correspond à la variable btn_secondary_bg_color.

                {% if theme.btn_secondary_bg_color %}
                    --btn-secondary-bg-color: {{ theme.btn_secondary_bg_color }};
                {% endif %}

                .btn-secondary {
                    {% if theme.btn_secondary_bg_color %}
                        background-color: var(--btn-secondary-bg-color);
                    {% endif %} 
                    }

Couleur de fond au survol

Permet de définir la couleur de fond des .btn-main au survol. Correspond à la variable btn_secondary_hover_bg_color.

                    {% if theme.btn_secondary_hover_bg_color %}
                        --btn-secondary-hover-bg-color: {{ theme.btn_secondary_hover_bg_color }};
                    {% endif %}

                .btn-secondary:hover{
                    {% if theme.btn_secondary_hover_bg_color %}
                        background-color: var(--btn-secondary-hover-bg-color);
                    {% endif %}
                }

Couleur du texte

Permet de définir la couleur du texte des .btn-secondary. Correspond à la variable btn_secondary_color.

                    {% if theme.btn_secondary_color %}
                        --btn-secondary-color: {{ theme.btn_secondary_color }};
                    {% endif %}

                .btn-secondary{
                    {% if theme.btn_secondary_color %}
                        color: var(--btn-secondary-color);
                    {% endif %}
                }

Couleur du texte au survol

Permet de définir la couleur du texte des .btn-secondary au survol. Correspond à la variable btn_secondary_hover_color.

                    {% if theme.btn_secondary_hover_color %}
                        --btn-secondary-hover-color: {{ theme.btn_secondary_hover_color }};
                    {% endif %}

                .btn-secondary:hover{
                    {% if theme.btn_secondary_hover_color %}
                        color: var(--btn-secondary-hover-color);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure des .btn-secondary. Correspond à la variable btn_secondary_border_color.

                    {% if theme.btn_secondary_border_color %}
                        --btn-secondary-border-color: {{ theme.btn_secondary_border_color }};
                    {% endif %}

                .btn-secondary {
                    {% if theme.btn_secondary_border_color %}
                        border-color: var(--btn-secondary-border-color);
                    {% endif %}
                    }

Couleur de la bordure au survol

Permet de définir la couleur de la bordure des .btn-secondary au survol. Correspond à la variable btn_secondary_hover_border_color.

                    {% if theme.btn_secondary_hover_border_color %}
                        --btn-secondary-hover-border-color: {{ theme.btn_secondary_hover_border_color }};
                    {% endif %}

                .btn-secondary:hover{
                    {% if theme.btn_secondary_hover_border_color %}
                        border-color: var(--btn-secondary-hover-border-color);
                    {% endif %}
                }

Marges intérieures horizontales

Permet de définir l'épaisseur des marges intérieures horizontales des .btn-secondary. Correspond à la variable btn_secondary_padding_horizontal.
4 choix possibles :

var(--btn-padding-x-sm)
var(--btn-padding-x)
var(--btn-padding-x-lg)
var(--btn-padding-x-xl)

                .btn-secondary {
                    {% if theme.btn_secondary_padding_horizontal %}
                        padding-left: {{theme.btn_secondary_padding_horizontal}};
                        padding-right: {{theme.btn_secondary_padding_horizontal}};
                    {% endif %}
                    }

Marges intérieures verticales

Permet de définir l'épaisseur des marges intérieures verticales des .btn-secondary. Correspond à la variable btn_secondary_padding_vertical.
4 choix possibles :

var(--btn-padding-y-sm)
var(--btn-padding-y)
var(--btn-padding-y-lg)
var(--btn-padding-y-xl)

                .btn-secondary {
                    {% if theme.btn_secondary_padding_vertical %}
                        padding-top: {{theme.btn_secondary_padding_vertical}};
                        padding-bottom: {{theme.btn_secondary_padding_vertical}};
                    {% endif %}
                }

Bords arrondis

Permet d'arrondir les angles des .btn.btn-secondary. Correspond à la variable btn_secondary_borderradius.
4 choix possibles :

var(--border-radius-none)
.25rem
.75rem
5rem

                {% if theme.btn_secondary_borderradius %}  
                    --btn-secondary-border-radius: {{theme.btn_secondary_borderradius}}; 
                {% endif %}

                .btn-secondary {
                    {% if theme.btn_secondary_borderradius %}  
                        border-radius: var(--btn-secondary-border-radius); 
                    {% endif %}
                }

Entête

L'entête s'active dans Configuration > Menus. Il permet d'afficher un diaporama d'images. Il s'agit de l'élèment header et il contient l'élèment .carousel.

Largeur de l'entête

Permet de définir la taille de l'entête parmis 2 choix (container ou window). Ajoute la class .container sur le header si la première option est sélectionnée. Correspond à la variable header_width

                {% if theme.header_width == 'container' %}
                    {% set header_classes = header_classes|merge(['container']) %}
                {% endif %}

                <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>

Marge supérieure

Permet d'ajouter une marge au dessus de l'entête header via la class .margin-top ( qui correspond à var(--grid-gutter-width) / 2). Correspond à la variable header_margin_top

                {% if theme.header_margin_top %}
                    {% set header_classes = header_classes|merge(['margin-top']) %}
                {% endif %}

                    <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>

                @media (min-width: {{theme.grid_breakpoints.sm}}){
                    #header.margin-top{
                        margin-top: calc(var(--grid-gutter-width) / 2);
                    }
                }

Bords arrondis

Permet d'arrondir les angles des enfants direct de l'élèment header via la class .radius, .radius-top, .radius-bottom appliquée à header (selon les marges qui sont activées ou non sur l'élèment #header ou #wrapper). Correspond à la variable header_radius

                {% if theme.header_radius %}
                    {% if theme.header_margin_top and theme.wrapper_margin_top %}
                        {% set header_classes = header_classes|merge(['radius']) %}
                    {% elseif theme.header_margin_top and (theme.wrapper_margin_top == false) %}
                        {% set header_classes = header_classes|merge(['radius-top']) %}
                    {% elseif (theme.header_margin_top == false) and theme.wrapper_margin_top %}
                        {% set header_classes = header_classes|merge(['radius-bottom']) %}
                    {% endif %}
                {% endif %}

                    <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>

                @media (min-width: {{theme.grid_breakpoints.sm}}){
                    #header.margin-top{
                        margin-top: calc(var(--grid-gutter-width) / 2);
                    }
                    #header.radius > *{
                        border-radius: .25rem;
                    }
                    #header.radius-top > *{
                        border-radius: .25rem .25rem 0 0;
                    }
                    #header.radius-bottom > *{
                        border-radius: 0 0 .25rem .25rem;
                    }
                }

Pied de page

Le pied de page correspond à l'élément footer. Il s'agit de la zone en bas du site éditable dans le menu Configuration > Réglages > Zones éditables > Zone en bas de votre site. Celui-ci n'apparaît sur le site que si son contenu a été défini.

Couleur de fond

Permet de définir la couleur de fond du pied de page. Correspond à la variable footer_bg

                #footer{
                    {% if theme.footer_bg %}
                        background-color: {{theme.footer_bg}};
                        --body-bg: {{theme.footer_bg}};
                    {% endif %}
                }

Couleur de la bordure supérieure

Ajoute une bordure supérieure au pied de page et permet d'en définir la couleur. Correspond à la variable footer_border

                #footer{
                    {% if theme.footer_border %}
                        border-top: 1px solid {{theme.footer_border}};
                    {% endif %}
                }

Frise

Permet d'ajouter une frise sur le haut du footer et d'en choisir le motif. Ajoute une class .frieze-triangles ou .frieze-circles sur le footer selon le motif sélectionné. Correspond à la variable footer_frieze

                <footer id="footer"{% if theme.footer_frieze != 'none' %} class="frieze-{{theme.footer_frieze}}"{% endif %}>

                #footer[class*="frieze-"]{
                    position: relative;
                    top: 6px;
                    margin-top: calc(var(--grid-gutter-width) + 6px);
                }
                #footer[class*="frieze-"]::before{
                    position: absolute;
                    top: -6px;
                    height: 6px;
                    width: 100%;
                    content: "";
                }
                #footer.frieze-triangles::before{
                    background: repeating-linear-gradient(45deg, {{theme.footer_bg}} 0, {{theme.footer_bg}} 4px, transparent 4px, transparent 14px), repeating-linear-gradient(135deg, transparent, transparent 8px, {{theme.footer_bg}} 8px, {{theme.footer_bg}} 14px);
                    background-size: 12px 6px;
                }
                #footer.frieze-circles::before{
                    background: repeating-radial-gradient({{theme.footer_bg}}, {{theme.footer_bg}} 5px, transparent 6px, transparent 12px);
                    background-size: 12px 12px;
                }

Marge supérieure

Permet d'ajouter une marge au dessus du pied de page. Correspond à la variable footer_margin_top

                {% if theme.footer_margin_top %}
                    @media (min-width: {{theme.layout_expanded_min}}){
                        #footer{
                            margin-top: var(--grid-gutter-width);
                        }
                    }
                {% endif %}

Contenu du pied de page

Couleur des titres

Permet de redéfinir la couleur des titres à l'intérieur du footer. Correspond à la variable footer_headings_color

                #footer{
                    {% if theme.footer_headings_color %}
                        --headings-color: {{theme.footer_headings_color}};
                    {% endif %}
                }

Couleur du texte du pied de page

Permet de redéfinir la couleur du texte à l'intérieur du footer. Correspond à la variable footer_color

                #footer{
                    {% if theme.footer_color %}
                        --body-color: var(--gray-900);
                        --text-muted: {{theme.footer_color|alpha(0.8)}};
                        {% if theme.footer_border_color == false %}
                        --border-color: {{theme.footer_color is dark ? 'var(--gray-200)' : 'var(--gray-700)'}};
                        {% endif %}
                        {% if theme.footer_component_bg == false %}
                        --component-bg: {{theme.footer_color is dark ? 'var(--gray-50)' : 'var(--gray-800)'}};
                        {% endif %}
                        {% if theme.footer_headings_color == false %}
                        --headings-color: var(--body-color);
                        {% endif %}
                        --white: {{theme.footer_color|lighten(90)}};
                        --gray-50: {{theme.footer_color is dark ? theme.footer_color|lighten(85) : theme.footer_color|darken(85)}};
                        --gray-100: {{theme.footer_color is dark ? theme.footer_color|lighten(80) : theme.footer_color|darken(80)}};
                        --gray-200: {{theme.footer_color is dark ? theme.footer_color|lighten(70) : theme.footer_color|darken(70)}};
                        --gray-300: {{theme.footer_color is dark ? theme.footer_color|lighten(60) : theme.footer_color|darken(60)}};
                        --gray-400: {{theme.footer_color is dark ? theme.footer_color|lighten(50) : theme.footer_color|darken(50)}};
                        --gray-500: {{theme.footer_color is dark ? theme.footer_color|lighten(40) : theme.footer_color|darken(40)}};
                        --gray-600: {{theme.footer_color is dark ? theme.footer_color|lighten(30) : theme.footer_color|darken(30)}};
                        --gray-700: {{theme.footer_color is dark ? theme.footer_color|lighten(20) : theme.footer_color|darken(20)}};
                        --gray-800: {{theme.footer_color is dark ? theme.footer_color|lighten(10) : theme.footer_color|darken(10)}};
                        --gray-900: {{theme.footer_color}};
                        --black: {{theme.footer_color|darken(90)}};
                        {% if theme.footer_color_secondary == false %}
                        --secondary: {{theme.footer_color is dark ? 'var(--gray-700)' : 'var(--gray-400)'}};
                        --on-secondary: var(--white);
                        {% endif %}
                        --light: {{theme.footer_color is dark ? 'var(--gray-100)' : 'var(--gray-800)'}};
                        --on-light: {{theme.footer_color is dark ? 'var(--body-color)' : 'var(--gray-100)'}};
                        --dark: {{theme.footer_color is dark ? 'var(--gray-800)' : 'var(--gray-100)'}};
                        --on-dark: {{theme.footer_color is dark ? 'var(--white)' : 'var(--body-color)'}};
                        --box-shadow: {{'0 .5rem 1rem ' ~ (theme.footer_color is dark ? theme.footer_color|lighten(90)|alpha(0.15) : theme.footer_color|darken(90)|alpha(0.15))}};
                        --btn-box-shadow: {{'inset 0 1px 0 ' ~ theme.footer_color|lighten(90)|alpha(0.15) ~ ', 0 1px 1px ' ~ theme.footer_color|darken(70)|alpha(0.075)}};
                        --btn-active-box-shadow: {{'inset 0 3px 5px ' ~ theme.footer_color|darken(70)|alpha(0.125)}};
                        --card-bg: var(--body-bg);
                        --toast-box-shadow: {{'0 .25rem .75rem ' ~ (theme.footer_color is dark ? theme.footer_color|lighten(90)|alpha(0.1) : theme.footer_color|darken(90)|alpha(0.1))}};
                    {% endif %}
                }

Couleur des liens

Permet de redéfinir la couleur des liens à l'intérieur du footer. Correspond à la variable footer_link_color

                #footer{
                    {% if theme.footer_link_color %}
                        --link-color: {{theme.footer_link_color}};
                        {% if theme.footer_link_hover_color == false %}
                        --link-hover-color: {{theme.footer_link_color is dark ? theme.footer_link_color|lighten(20) : theme.footer_link_color|darken(20)}};
                        {% endif %}
                    {% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la couleur des liens au survol à l'intérieur du footer. Correspond à la variable footer_link_hover_color

                #footer{
                    {% if theme.footer_link_color %}
                        --link-color: {{theme.footer_link_color}};
                        {% if theme.footer_link_hover_color == false %}
                        --link-hover-color: {{theme.footer_link_color is dark ? theme.footer_link_color|lighten(20) : theme.footer_link_color|darken(20)}};
                        {% endif %}
                    {% endif %}
                    {% if theme.footer_link_hover_color %}
                        --link-hover-color: {{theme.footer_link_hover_color}};
                    {% endif %}
                }

Apparence des liens

Permet de redéfinir l'apparence des liens à l'intérieur du footer. Correspond à la variable footer_link_decoration

                #footer a{
                    {% if theme.footer_link_decoration %}
                        --link-decoration: {{theme.footer_link_decoration}};
                    {% endif %}
                    {% if theme.footer_linkhover_decoration %}
                        --link-hover-decoration: {{theme.footer_linkhover_decoration}};
                    {% endif %}
                }

Apparence des liens au survol

Permet de redéfinir l'apparence des liens au survol à l'intérieur du footer. Correspond à la variable footer_linkhover_decoration

                #footer a{
                    {% if theme.footer_link_decoration %}
                        --link-decoration: {{theme.footer_link_decoration}};
                    {% endif %}
                    {% if theme.footer_linkhover_decoration %}
                        --link-hover-decoration: {{theme.footer_linkhover_decoration}};
                    {% endif %}
                }

Couleur principale

Permet de redéfinir la couleur principale à l'intérieur du footer. Correspond à la variable footer_color_primary

                {% if theme.footer_color_primary %}
                    {% set footer_colors = footer_colors|merge({
                        'primary' : {
                            'color' : theme.footer_color_primary,
                            'on' : theme.footer_color_primary and theme.footer_color_on_primary ? theme.footer_color_on_primary : (theme.footer_color ? theme.footer_color : theme.body_color)
                        }
                    }) %}
                {% endif %}

                #footer{
                    {% if theme.footer_color_primary %}
                        --primary: {{theme.footer_color_primary}};
                        {% if theme.footer_color_on_primary %}
                        --on-primary: {{theme.footer_color_on_primary}};
                        {% elseif theme.footer_color %}
                        --on-primary: {{theme.footer_color}};
                        {% endif %}
                        --input-btn-focus-box-shadow: {{'0 0 0 .2rem ' ~ theme.footer_color_primary|alpha(0.25)}};
                        --input-focus-border-color: {{theme.footer_color_primary is dark ? theme.footer_color_primary|lighten(25) : theme.footer_color_primary|darken(25)}};
                        --custom-control-indicator-checked-disabled-bg: {{theme.footer_color_primary|alpha(0.5)}};
                        {% if theme.footer_link_color == false %}
                        --link-color: {{theme.footer_color_primary}};
                        --link-hover-color: {{theme.footer_color_primary is dark ? theme.footer_color_primary|lighten(20) : theme.footer_color_primary|darken(20)}};
                        {% endif %}
                    {% endif %}
                }

Couleur du texte sur la couleur primaire

Permet de redéfinir la couleur du texte sur la couleur principale à l'intérieur du footer. Correspond à la variable footer_color_on_primary

                {% if theme.footer_color_primary %}
                    {% set footer_colors = footer_colors|merge({
                        'primary' : {
                            'color' : theme.footer_color_primary,
                            'on' : theme.footer_color_primary and theme.footer_color_on_primary ? theme.footer_color_on_primary : (theme.footer_color ? theme.footer_color : theme.body_color)
                        }
                    }) %}
                {% endif %}

                #footer{
                    {% if theme.footer_color_primary %}
                        --primary: {{theme.footer_color_primary}};
                        {% if theme.footer_color_on_primary %}
                        --on-primary: {{theme.footer_color_on_primary}};
                        {% elseif theme.footer_color %}
                        --on-primary: {{theme.footer_color}};
                        {% endif %}
                        --input-btn-focus-box-shadow: {{'0 0 0 .2rem ' ~ theme.footer_color_primary|alpha(0.25)}};
                        --input-focus-border-color: {{theme.footer_color_primary is dark ? theme.footer_color_primary|lighten(25) : theme.footer_color_primary|darken(25)}};
                        --custom-control-indicator-checked-disabled-bg: {{theme.footer_color_primary|alpha(0.5)}};
                        {% if theme.footer_link_color == false %}
                        --link-color: {{theme.footer_color_primary}};
                        --link-hover-color: {{theme.footer_color_primary is dark ? theme.footer_color_primary|lighten(20) : theme.footer_color_primary|darken(20)}};
                        {% endif %}
                    {% endif %}
                }

Couleur secondaire

Permet de redéfinir la couleur secondaire à l'intérieur du footer. Correspond à la variable footer_color_secondary

                {% if theme.footer_color_secondary %}
                    {% set footer_colors = footer_colors|merge({
                        'secondary' : {
                            'color' : theme.footer_color_secondary,
                            'on' : theme.footer_color_on_secondary ? theme.footer_color_on_secondary : theme.footer_color|lighten(90)
                        }
                    }) %}
                {% endif %}

                #footer{
                    {% if theme.footer_color_secondary %}
                    --secondary: {{theme.footer_color_secondary}};
                    --on-secondary: {{theme.footer_color_on_secondary ? theme.footer_color_on_secondary : 'var(--white)'}};
                    {% endif %}
                }

Couleur des bordures

Permet de redéfinir la couleur des bordures à l'intérieur du footer. Correspond à la variable footer_border_color

                #footer{
                    {% if theme.footer_border_color %}
                        --border-color: {{theme.footer_border_color}};
                    {% endif %}
                }

Couleur de fond des composants

Permet de redéfinir la couleur de fond des composants à l'intérieur du footer. Correspond à la variable footer_component_bg

                #footer{
                    {% if theme.footer_component_bg %}
                        --component-bg: {{theme.footer_component_bg}};
                    {% endif %}
                }

Fond des champs de formulaire

Permet de redéfinir la couleur de fond des champs de formulaire à l'intérieur du footer. Correspond à la variable footer_input_bg

                #footer{
                    {% if theme.footer_input_bg %}
                        --input-bg: {{theme.footer_input_bg}};
                        --input-focus-bg: {{theme.footer_input_bg}};
                    {% endif %}
                }

Liens vers les réseaux sociaux

Permet d'afficher les liens vers les réseaux sociaux à l'intérieur du footer. Correspond à la variable footer_sn

                <footer id="footer"{% if theme.footer_frieze != 'none' %} class="frieze-{{theme.footer_frieze}}"{% endif %}>
                    <div class="container">
                        {% if site.social_network and theme.footer_sn %}
                            {% include "system.includes.social_links" %}
                        {% endif %}
                    </div>
                </footer>

Avatars

Format d'affichage des avatars des internautes et membres (exemples : dans la liste des commentaires, sur l'espace membre, sur le forum...). Ce format peut exceptionnellement servir dans d'autres cas où l'affichage d'une petite image est nécessaire.

Avatars - Redimmensionner / Recadrer

Permet de définir si les images avatars doivent être redimmensionnées ou recadrées, 2 valeurs possibles :

"r" pour resize
"c" pour crop

Attribue un suffixe sur la source de l'image en fonction de la valeur choisie et de la taille d'image définie ensuite
(suffixe '?fx=c_200_200' par exemple). Correspond à la variable avatar_format
Exemple d'intégration :

                <img src="{{blogpost.others_news.next.seo_image_url}}?fx={{theme.avatar_format.q}}" width="{{theme.avatar_format.w}}" alt="{{blogpost.others_news.next.title}}">

Avatars - Largeur - Hauteur

Permet de définir la largeur et la hauteur des images avatars. Correspond aux variables avatar_format[w] et avatar_format[h]
Exemple d'intégration :

                <img src="{{blogpost.others_news.next.seo_image_url}}?fx={{theme.avatar_format.q}}" width="{{theme.avatar_format.w}}" alt="{{blogpost.others_news.next.title}}">

Miniatures

Format d'affichage des images en miniature. En général, en cliquant dessus l'image apparaît dans son format original. Ce format est utilisé par exemple sur l'album photos.

Miniatures - Redimmensionner / Recadrer

Permet de définir si les images avatars doivent être redimmensionnées ou recadrées, 2 valeurs possibles :

"r" pour resize
"c" pour crop

                <img src="{{order.memberoffer_logo}}?fx={{theme.thumbnail_format.q}}" alt="{{order.memberoffer_title}}" width="{{theme.thumbnail_format.w}}"/>

Miniatures - Largeur - Hauteur

Permet de définir la largeur et la hauteur des images miniatures. Correspond aux variables thumbnail_format[w] et thumbnail_format[h]
Exemple d'intégration :

                <img src="{{order.memberoffer_logo}}?fx={{theme.thumbnail_format.q}}" alt="{{order.memberoffer_title}}" width="{{theme.thumbnail_format.w}}"/>

Moyennes

Ce format est un format de miniature un peu plus grand que le précédent.

Moyennes - Redimmensionner / Recadrer

Permet de définir si les images moyennes doivent être redimmensionnées ou recadrées, 2 valeurs possibles :

"r" pour resize
"c" pour crop

                <img src="{{picture.url}}?fx={{theme.medium_format.q}}" alt="{{booking.title}}" width="{{theme.medium_format.w}}">

Moyennes - Largeur - Hauteur

Permet de définir la largeur et la hauteur des images avatars. Correspond aux variables medium_format[w] et medium_format[h]
Exemple d'intégration :

                <img src="{{picture.url}}?fx={{theme.medium_format.q}}" alt="{{booking.title}}" width="{{theme.medium_format.w}}">

Grandes

Ce format doit être la largeur maximum du contenu du site (sans les marges et le(s) menu(s) vertical(aux)). Il permet l'affichage d'une image en grand format dans le contenu du site.

Grandes - Redimmensionner / Recadrer

Permet de définir si les grandes images doivent être redimmensionnées ou recadrées, 2 valeurs possibles :

"r" pour resize
"c" pour crop

Attribue un suffixe sur la source de l'image en fonction de la valeur choisie et de la taille d'image définie ensuite
(suffixe '?fx=c_200_200' par exemple). Correspond à la variable maxi_format

Grandes - Largeur - Hauteur

Permet de définir la largeur et la hauteur des grandes images. Correspond aux variables maxi_format[w] et maxi_format[h]

Diaporama

Il s'agit du diaporama contenu dans l'entête. Il se paramètre dans Configuration > Menus.

Position de la légende

Permet de définir la position de la légende des images du diaporama. Correspond à la variable header_caption_position.

                <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>
                    {% if default_header == false %}
                        {% if theme.header_cover %}
                        {{zones.header.widgets[0].content|replace({'data-height="auto"' : 'data-height="manual" ', 'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                        {% else %}
                        {{zones.header.widgets[0].content|replace({'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                    {% endif %}
                </header>

Bordures de la légende

Permet d'ajouter des bordures sur la légende des images. Correspond à la variable header_caption_border.

                <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>
                    {% if default_header == false %}
                        {% if theme.header_cover %}
                        {{zones.header.widgets[0].content|replace({'data-height="auto"' : 'data-height="manual" ', 'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                        {% else %}
                        {{zones.header.widgets[0].content|replace({'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                    {% endif %}
                </header>

Plein écran

Si activé, le diaporama occupera toute la hauteur de l'écran. Correspond à la variable header_cover. Activer cette option permet de définir la couleur de l'icône de scroll.

                <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>
                    {% if default_header == false %}
                        {% if theme.header_cover %}
                        {{zones.header.widgets[0].content|replace({'data-height="auto"' : 'data-height="manual" ', 'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                        {% else %}
                        {{zones.header.widgets[0].content|replace({'class="carousel ' : (theme.header_caption_position == 'center' ? 'class="carousel caption-centered ' ~ (theme.header_caption_border ? 'caption-bordered ' : '') : 'class="carousel ')})|raw}}
                        {% endif %}
                    {% elseif (theme.header_cover == false) and theme.variationcodename != 'basic' %}
                        <img src="//{{site.host}}/medias/static/themes/rebirth/{{theme.variationcodename}}/slider.jpg" class="img-fluid d-block mx-auto" alt="{{site.sitename}}">
                    {% endif %}
                </header>

Couleur de l'icône de scroll (si plein écran activé)

Il s'agit de l'icône centrée en bas de l'entête permettant de faire défiler la page jusqu'à la zone de contenu. Correspond à la variable header_scroller.

                <header id="header"{% if header_classes|length != 0 %} class="{{header_classes|join(' ')}}"{% endif %}{% if theme.header_cover %} data-cover="true"{% if default_header %} style="background-image:url(//static.e-monsitev4.com/themes/rebirth/{{theme.variationcodename}}/slider.jpg)"{% endif %}{% endif %}>
                    {% if theme.header_cover %}
                    <div id="smooth-scroll">
                        <i class="material-icons md-arrow_downward"></i>
                    </div>
                    {% endif %}
                </header>

                #smooth-scroll{
                    border: 1px solid {% if theme.header_scroller %}{{theme.header_scroller}}{% else %}var(--link-color){% endif %};
                    color: {% if theme.header_scroller %}{{theme.header_scroller}}{% else %}var(--link-color){% endif %};
                }

Formulaires

Fond des champs de formulaire

Permet de définir la couleur de fond des champs de formulaire. Correspond à la variable input_bg.

                --input-bg: {{theme.input_bg}};

                .form-control{
                    background-color: var(--input-bg);
                }
            
                select.form-control:focus::-ms-value{
                    background-color: var(--input-bg);
                }
            
                .custom-control-label::before{
                    background-color: var(--input-bg);
                }
            
                .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
                    background-color: var(--input-bg);
                }
            
                .custom-select{
                    background-color: var(--input-bg);
                }
            
                .custom-select:focus::-ms-value{
                    background-color: var(--input-bg);
                }
            
                .custom-file-label {
                    background-color: var(--input-bg);
                }

Fil d'ariane

Le fil d'ariane s'active dans Configuration / Réglages / Plugins. Il s'agit d'une liste ol .breadcrumb.

Couleur de fond

Permet de définir la couleur de fond du fil d'ariane. Correspond à la variable breadcrumb_bg_color.

                {% if theme.breadcrumb_bg_color %}
                    --breadcrumb-bg-color: {{theme.breadcrumb_bg_color}};
                {% endif %}

                .breadcrumb{
                    {% if theme.breadcrumb_bg_color %}
                        background-color: var(--breadcrumb-bg-color);
                    {% endif %} 
                }

Couleur du texte

Permet de définir la couleur du texte du fil d'ariane. Correspond à la variable breadcrumb_color.

                {% if theme.breadcrumb_color %}
                    --breadcrumb-color: {{theme.breadcrumb_color}};
                {% endif %}

                {% if theme.breadcrumb_color %}
                .breadcrumb-item.active{
                    color: var(--breadcrumb-color);    
                }
                {% endif %}

Couleur des liens

Permet de définir la couleur des liens du fil d'ariane. Correspond à la variable breadcrumb_link_color.

                {% if theme.breadcrumb_link_color %}
                    --breadcrumb-link-color: {{theme.breadcrumb_link_color}};
                {% endif %}

                {% if theme.breadcrumb_link_color %}
                    .breadcrumb-item a{
                        color: var(--breadcrumb-link-color);    
                    }
                {% endif %}

Couleur des liens au survol

Permet de définir la couleur des liens au survol du fil d'ariane. Correspond à la variable breadcrumb_link_hover_color.

                {% if theme.breadcrumb_link_hover_color %}
                    --breadcrumb-link-hover-color: {{theme.breadcrumb_link_hover_color}};
                {% endif %}

                {% if theme.breadcrumb_link_hover_color %}
                    .breadcrumb-item a:hover{
                        color: var(--breadcrumb-link-hover-color);    
                    }
                {% endif %}

Couleur des séparateurs

Permet de définir la couleur des séparateurs du fil d'ariane. Correspond à la variable breadcrumb_divider_color.

                {% if theme.breadcrumb_divider_color %}
                    --breadcrumb-divider-color: {{theme.breadcrumb_divider_color}};
                {% endif %}

                {% if theme.breadcrumb_divider_color %}
                    .breadcrumb-item + .breadcrumb-item:before {
                        color: var(--breadcrumb-divider-color);
                    }
                {% endif %}

Marges intérieures horizontales

Permet d'ajouter un padding-left et padding right de 1rem sur l'élément .breadcrumb. Correspond à la variable breadcrumb_padding_horizontal.

                {% if theme.breadcrumb_bg_color %}
                    --breadcrumb-bg-color: {{theme.breadcrumb_bg_color}};
                {% endif %}

                .breadcrumb{
                    {% if theme.breadcrumb_padding_horizontal %}   
                    --breadcrumb-padding-x: 1rem;
                    {% else %}
                    --breadcrumb-padding-x: 0;
                    {% endif %}
                }

Listes

Les options de listes définies ici s'appliqueront sur les listes contenues dans les lignes et colonnes éditables par l'utilisateur. Elles sont ciblées par les class .col-no-widget ol et .col-no-widget ul.

Listes ordonnées
Listes non-ordonnées

Listes ordonnées

Style des listes ordonnées

Permet de choisir l'apparence des listes ol parmi 3 styles. Correspond à la variable ol_style.

                {% if theme.ol_style %}
            
                    {% if theme.ol_style != 'none' %}
                
                    .col-content.col-no-widget ol {
                        padding: 0.25rem 0 0.25rem 2.5rem;
                    }
                
                    .col-content.col-no-widget ol small {
                        opacity: .6;
                    }
                    .col-content.col-no-widget ol ol, 
                    .col-content.col-no-widget ol ul{
                        padding: 0.5rem 0 0 1rem;
                    }
                    .col-content.col-no-widget ol li {
                        margin-bottom: .375rem;
                    }
                    .col-content.col-no-widget ol > li {
                        position: relative;
                        min-height: 2rem;
                        padding-top: .25rem;
                        list-style-type: none;
                    }
                    .col-content.col-no-widget ol > li:before, 
                    .col-content.col-no-widget ol > li:after {
                        position: absolute;
                        display: flex;
                    }
                    .col-content.col-no-widget ol > li:before{
                
                        {% if theme.ol_list_bullets_bg_color %}
                        --ol-bullets-bg-color: {{theme.ol_list_bullets_bg_color}};
                        {% endif %}
                
                        {% if theme.ol_list_bullets_color %}
                        --ol-bullets-color: {{theme.ol_list_bullets_color}};
                        {% endif %}
                
                        {% if theme.ol_list_bullets_border_color %}
                        --ol-bullets-border-color: {{theme.ol_list_bullets_border_color}};
                        {% endif %}
                        
                        align-items: center;
                        justify-content: center;
                        left: -2.75rem;
                    }
                    .col-content.col-no-widget ol > li:after {
                        content: "";
                        bottom: 0;
                        height: calc(100% - 2.5rem);
                        border-left: 1px solid currentcolor;
                        opacity: .5;
                    }
                
                    .col-content.col-no-widget ol ol li, 
                    .col-content.col-no-widget ol ul li,
                    .col-content.col-no-widget ul ol li, 
                    .col-content.col-no-widget ul ul li{
                        position: static;
                        min-height: auto;
                        padding-top: 0;
                        list-style-type: inherit;
                    }
                    .col-content.col-no-widget ol ol li:before, 
                    .col-content.col-no-widget ol ul li:before,
                    .col-content.col-no-widget ol ol li:after, 
                    .col-content.col-no-widget ol ul li:after,
                    .col-content.col-no-widget ul ol li:before, 
                    .col-content.col-no-widget ul ul li:before,
                    .col-content.col-no-widget ul ol li:after, 
                    .col-content.col-no-widget ul ul li:after{
                        content: normal;
                    }
                
                        /* square */
                
                        {% if theme.ol_style == 'square' %}
                
                        .col-content.col-no-widget ol > li {
                        counter-increment: step-counter;
                        
                        }
                        .col-content.col-no-widget ol > li:before {
                            --secondary: {{theme.color_secondary}};
                            --on-secondary: {{theme.color_on_secondary}};
                        content: counter(step-counter);
                        font-size: 80%;
                        background-color: {% if theme.ol_list_bullets_bg_color %}var(--ol-bullets-bg-color){% else %}var(--secondary){% endif %};
                        color: {% if theme.ol_list_bullets_color %}var(--ol-bullets-color){% else %}var(--on-secondary){% endif %};
                        {% if theme.ol_list_bullets_border_color %}
                        border: 1px solid var(--ol-bullets-border-color);
                        {% endif %}
                        font-weight: bold;
                        padding: 3px 8px;
                        border-radius: .25rem;
                        height: 1.5rem;
                        width: 1.5rem;
                        
                        }
                
                        .col-content.col-no-widget ol > li:after {
                        left: -2rem;
                        }
                
                        {% endif %}
                
                        /* rounded */
                
                        {% if theme.ol_style == 'rounded' %}
                
                        .col-content.col-no-widget ol {
                        counter-reset: li;
                        }
                        .col-content.col-no-widget ol > li {
                        counter-increment: li;
                        }
                        .col-content.col-no-widget ol > li:before {
                        content: counter(li);
                        border-radius: 50%;
                        border: 1px solid currentcolor;
                        height: calc(2rem - 2px);
                        width: calc(2rem - 2px);
                        background-color: {% if theme.ol_list_bullets_bg_color %}var(--ol-bullets-bg-color){% else %}transparent{% endif %};
                        color: {% if theme.ol_list_bullets_color %}var(--ol-bullets-color){% else %}currentcolor{% endif %};
                        {% if theme.ol_list_bullets_border_color %}
                        border-color: var(--ol-bullets-border-color);
                        {% endif %}
                        }
                        .col-content.col-no-widget ol > li:after {
                        left: -1.9rem;
                        }
                        
                        {% endif %}
                
                    {% endif %}
                
                {% endif %}

Si un autre style que "par défaut" est sélectionné, l'utilisateur peut paramétrer les options suivantes comme la couleurs des puces et numéros par exemple.

Couleur de fond

Permet de choisir la couleur de fond des puces. Correspond à la variable ol_list_bullets_bg_color.

                {% if theme.ol_list_bullets_bg_color %}
                    --ol-bullets-bg-color:{{theme.ol_list_bullets_bg_color}};
                {% endif %}
            
                {% if theme.ol_style == 'square' %}
                    .col-content.col-no-widget ol > li:before {
                        background-color: {% if theme.ol_list_bullets_bg_color %}var(--ol-bullets-bg-color){% else %}var(--secondary){% endif %};
                    }
                {% endif %}
            
                {% if theme.ol_style == 'rounded' %}
                    .col-content.col-no-widget ol > li:before {
                        background-color: {% if theme.ol_list_bullets_bg_color %}var(--ol-bullets-bg-color){% else %}transparent{% endif %};
                    }
                {% endif %}

Couleur

Permet de choisir la couleur des puces. Correspond à la variable ol_list_bullets_color.

                {% if theme.ol_list_bullets_color %}
                    --ol-bullets-color:{{theme.ol_list_bullets_color}};
                {% endif %}
            
                {% if theme.ol_style == 'square' %}
                    .col-content.col-no-widget ol > li:before {
                        color: {% if theme.ol_list_bullets_color %}var(--ol-bullets-color){% else %}var(--on-secondary){% endif %};
                    }
                {% endif %}
            
                {% if theme.ol_style == 'rounded' %}
                    .col-content.col-no-widget ol > li:before {
                        color: {% if theme.ol_list_bullets_color %}var(--ol-bullets-color){% else %}currentcolor{% endif %};
                    }
                {% endif %}

Couleur de la bordure

Permet de choisir la couleur des bordures des puces. Correspond à la variable ol_list_bullets_border_color.

                {% if theme.ol_list_bullets_border_color %}
                    --ol-bullets-border-color:{{theme.ol_list_bullets_border_color}};
                {% endif %}
            
                {% if theme.ol_style == 'square' %}
                    .col-content.col-no-widget ol > li:before {
                        {% if theme.ol_list_bullets_border_color %}
                            border: 1px solid var(--ol-bullets-border-color);
                        {% endif %}
                    }
                {% endif %}
            
                {% if theme.ol_style == 'rounded' %}
                    .col-content.col-no-widget ol > li:before {
                        {% if theme.ol_list_bullets_border_color %}
                            border-color: var(--ol-bullets-border-color);
                        {% endif %}
                    }
                {% endif %}

Listes non-ordonnées

Style des listes non-ordonnées

Permet de choisir l'apparence des listes ul parmi 3 styles. Correspond à la variable ul_style.

                {% if theme.ul_style %}
            
                    {% if theme.ul_style != 'none' %}
                
                    .col-content.col-no-widget ul, .content ul {
                        padding: 0.25rem 0 0.25rem 2.5rem;
                    }
                
                    .col-content.col-no-widget ul small, .content ul small {
                        opacity: .6;
                    }
                    .col-content.col-no-widget ul ol, 
                    .col-content.col-no-widget ul ul,
                    .content ul ol,
                    .content ul ul,
                    {
                        padding: 0.5rem 0 0 1rem;
                    }
                    .col-content.col-no-widget ul li, .content ul li {
                        margin-bottom: .375rem;
                    }
                    .col-content.col-no-widget ul > li, .content ul > li {
                        position: relative;
                        min-height: 2rem;
                        padding-top: .25rem;
                        list-style-type: none;
                    }
                    .col-content.col-no-widget ul > li:before, 
                    .col-content.col-no-widget ul > li:after,
                    .content ul > li:before, 
                    .content ul > li:after
                    {
                        position: absolute;
                        display: flex;
                    }
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                
                        {% if theme.ul_list_bullets_bg_color %}
                        --ul-bullets-bg-color: {{theme.ul_list_bullets_bg_color}};
                        {% endif %}
                
                        {% if theme.ul_list_bullets_color %}
                        --ul-bullets-color: {{theme.ul_list_bullets_color}};
                        {% endif %}
                
                        {% if theme.ul_list_bullets_border_color %}
                        --ul-bullets-border-color: {{theme.ul_list_bullets_border_color}};
                        {% endif %}
                
                        align-items: center;
                        justify-content: center;
                        left: -2.75rem;
                    }
                    .col-content.col-no-widget ul > li:after, .content ul > li:after {
                        content: "";
                        bottom: 0;
                        height: calc(100% - 2.5rem);
                        border-left: 1px solid currentcolor;
                        opacity: .5;
                    }
                    .col-content.col-no-widget ol ol li, 
                    .col-content.col-no-widget ol ul li,
                    .col-content.col-no-widget ul ol li, 
                    .col-content.col-no-widget ul ul li,
                    .content ol ol li, 
                    .content ol ul li,
                    .content ul ol li, 
                    .content ul ul li {
                        position: static;
                        min-height: auto;
                        padding-top: 0;
                        list-style-type: inherit;
                    }
                    .col-content.col-no-widget ol ol li:before, 
                    .col-content.col-no-widget ol ul li:before,
                    .col-content.col-no-widget ol ol li:after, 
                    .col-content.col-no-widget ol ul li:after,
                    .col-content.col-no-widget ul ol li:before, 
                    .col-content.col-no-widget ul ul li:before,
                    .col-content.col-no-widget ul ol li:after, 
                    .col-content.col-no-widget ul ul li:after,
                    .content ol ol li:before, 
                    .content ol ul li:before,
                    .content ol ol li:after, 
                    .content ol ul li:after,
                    .content ul ol li:before, 
                    .content ul ul li:before,
                    .content ul ol li:after, 
                    .content ul ul li:after{
                        content: normal;
                    }
                
                        /* arrow */
                
                        {% if theme.ul_style == 'arrow' %}
                
                        .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        --secondary: {{theme.color_secondary}};
                        --on-secondary: {{theme.color_on_secondary}};
                
                        content: '\E13F';
                        font-family: "Material icons";
                        background-color: {% if theme.ul_list_bullets_bg_color %}var(--ul-bullets-bg-color){% else %}var(--secondary){% endif %};
                        color: {% if theme.ul_list_bullets_color %}var(--ul-bullets-color){% else %}var(--on-secondary){% endif %};
                        {% if theme.ul_list_bullets_border_color %}
                        border: 1px solid var(--ul-bullets-border-color);
                        {% endif %}
                        border-radius: 50%;
                        height: 1.5rem;
                        width: 1.5rem;
                        }
                        .col-content.col-no-widget ul > li:after, .content ul > li:after {
                        left: -2rem;
                        }
                
                        {% endif %}
                
                        /* checklist */
                
                        {% if theme.ul_style == 'checklist' %}
                
                        .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        content: '\E137';
                        font-family: "Material icons";
                        border-radius: 50%;
                        border: 1px solid currentcolor;
                        height: calc(2rem - 2px);
                        width: calc(2rem - 2px);
                        background-color: {% if theme.ul_list_bullets_bg_color %}var(--ul-bullets-bg-color){% else %}transparent{% endif %};
                        color: {% if theme.ul_list_bullets_color %}var(--ul-bullets-color){% else %}currentcolor{% endif %};
                        {% if theme.ul_list_bullets_border_color %}
                        border-color: var(--ul-bullets-border-color);
                        {% endif %}
                        }
                        .col-content.col-no-widget ul > li:after, .content ul > li:after {
                        left: -1.9rem;
                        }
                        
                        {% endif %}
                
                    {% endif %}
                
                {% endif %}

Si un autre style que "par défaut" est sélectionné, l'utilisateur peut paramétrer les options suivantes comme la couleurs des puces et numéros par exemple.

Couleur de fond

Permet de choisir la couleur de fond des puces. Correspond à la variable ul_list_bullets_bg_color.

                {% if theme.ul_list_bullets_bg_color %}
                    --ul-bullets-bg-color:{{theme.ul_list_bullets_bg_color}};
                {% endif %}
            
                {% if theme.ul_style == 'arrow' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        background-color: {% if theme.ul_list_bullets_bg_color %}var(--ul-bullets-bg-color){% else %}var(--secondary){% endif %};
                    }
                {% endif %}
            
                {% if theme.ul_style == 'checklist' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        background-color: {% if theme.ul_list_bullets_bg_color %}var(--ul-bullets-bg-color){% else %}transparent{% endif %};
                    }
                {% endif %}

Couleur

Permet de choisir la couleur des puces. Correspond à la variable ul_list_bullets_color.

                {% if theme.ul_list_bullets_color %}
                    --ul-bullets-color:{{theme.ul_list_bullets_color}};
                {% endif %}
            
                {% if theme.ul_style == 'arrow' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        color: {% if theme.ul_list_bullets_color %}var(--ul-bullets-color){% else %}var(--on-secondary){% endif %};
                    }
                {% endif %}
            
                {% if theme.ul_style == 'checklist' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        color: {% if theme.ul_list_bullets_color %}var(--ul-bullets-color){% else %}currentcolor{% endif %};
                    }
                {% endif %}

Couleur de la bordure

Permet de choisir la couleur des bordures des puces. Correspond à la variable ul_list_bullets_border_color.

                {% if theme.ul_list_bullets_border_color %}
                    --ul-bullets-border-color:{{theme.ul_list_bullets_border_color}};
                {% endif %}
            
                {% if theme.ul_style == 'arrow' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        {% if theme.ul_list_bullets_border_color %}
                            border: 1px solid var(--ul-bullets-border-color);
                        {% endif %}
                    }
                {% endif %}
            
                {% if theme.ul_style == 'checklist' %}
                    .col-content.col-no-widget ul > li:before, .content ul > li:before {
                        {% if theme.ul_list_bullets_border_color %}
                            border-color: var(--ul-bullets-border-color);
                        {% endif %}
                    }
                {% endif %}

Styles prédéfinis

Lorsque l'utilisateur créé une ligne ou une colonne, il peut la personnaliser grâce au bouton Design. Il a alors le choix parmis plusieurs styles prédéfinis qu'il peut choisir d'appliquer sur la ligne (.row-content) ou sur la colonne (.col-content). L'apparence de ces styles prédéfinis peut-être modifiée ici.

Séparation de colonnes

Applique la class .column-separated sur la ligne (.row-container).

Couleur de fond

Permet de choisir une couleur de fond pour la colonne. Correspond à la variable column_separated_bg.

                {% if theme.column_separated_bg %}
                    --column-separated-bg-color: {{theme.column_separated_bg}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_bg %}background-color: var(--column-separated-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles de la colonne (4 choix possibles). Correspond à la variable column_separated_borderradius.

                {% if theme.column_separated_borderradius %}
                    --column-separated-border-radius:{{theme.column_separated_borderradius}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_borderradius %}border-radius: var(--column-separated-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur le .col-content. Correspond à la variable column_separated_padding_horizontal.

                {% if theme.column_separated_padding_horizontal %}
                    --column-separated-padding-x: {{theme.column_separated_padding_horizontal}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_padding_horizontal %}
                        padding-left: var(--column-separated-padding-x);
                        padding-right: var(--column-separated-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur le .col-content. Correspond à la variable column_separated_padding_vertical.

                {% if theme.column_separated_padding_vertical %}
                    --column-separated-padding-y: {{theme.column_separated_padding_vertical}};
                {% endif %}
                
                .column-separated .col-content{
                    {% if theme.column_separated_padding_vertical %}
                        padding-top: var(--column-separated-padding-y);
                        padding-bottom: var(--column-separated-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure de séparation. Correspond à la variable column_separated_border.

                {% if theme.column_separated_border %}
                    --column-separated-border-color: {{theme.column_separated_border}};
                {% endif %}
            
                {% if theme.column_separated_border %}
                    .column-separated .col:not(:last-child):after{
                        background-color: var(--column-separated-border-color);
                    }
                {% endif %}

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la colonne. Correspond à la variable column_separated_headings_color.

                {% if theme.column_separated_headings_color %}
                    --column-separated-headings-color:{{theme.column_separated_headings_color}};
                {% endif %}
                
                .column-separated .col-content{
                    {% if theme.column_separated_headings_color %}
                        --headings-color: var(--column-separated-headings-color);
                        --h1-color: var(--column-separated-headings-color);
                        --h2-color: var(--column-separated-headings-color);
                        --h3-color: var(--column-separated-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la colonne. Correspond à la variable column_separated_color.

                {% if theme.column_separated_color %}
                    --column-separated-color:{{theme.column_separated_color}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_color %}color: var(--column-separated-color);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la colonne. Correspond à la variable column_separated_link_color.

                {% if theme.column_separated_link_color %}
                    --column-separated-link-color:{{theme.column_separated_link_color}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_link_color %}--link-color: var(--column-separated-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la colonne. Correspond à la variable column_separated_link_hover_color.

                {% if theme.column_separated_link_hover_color %}
                    --column-separated-link-hover-color:{{theme.column_separated_link_hover_color}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_link_hover_color %}--link-hover-color: var(--column-separated-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la colonne. Correspond à la variable column_separated_link_decoration.

                {% if theme.column_separated_link_decoration %}
                    --column-separated-link-decoration:{{theme.column_separated_link_decoration}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.column_separated_link_decoration %}--link-decoration: var(--column-separated-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la colonne. Correspond à la variable colseparated_linkhoverdecoration.

                {% if theme.colseparated_linkhoverdecoration %}
                    --column-separated-linkhover-decoration:{{theme.colseparated_linkhoverdecoration}};
                {% endif %}
            
                .column-separated .col-content{
                    {% if theme.colseparated_linkhoverdecoration %}--link-hover-decoration: var(--column-separated-linkhover-decoration);{% endif %}
                }

Séparation de ligne

Applique la class .row-separated sur la ligne (.row-container).

Couleur de fond

Permet de choisir une couleur de fond pour la ligne. Correspond à la variable row_separated_bg.

                {% if theme.row_separated_bg %}
                    --row-separated-bg-color: {{theme.row_separated_bg}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_bg %}background-color: var(--row-separated-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles de la ligne (4 choix possibles). Correspond à la variable row_separated_borderradius.

                {% if theme.row_separated_borderradius %}
                    --row-separated-border-radius:{{theme.row_separated_borderradius}};
                {% endif %}
            
                .row-separated .row-content.container{
                    {% if theme.row_separated_borderradius %}border-radius: var(--row-separated-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur le .row-content. Correspond à la variable row_separated_padding_horizontal.

                {% if theme.row_separated_padding_horizontal %}
                    --row-separated-padding-x: {{theme.row_separated_padding_horizontal}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_padding_horizontal %}
                        padding-left: var(--row-separated-padding-x);
                        padding-right: var(--row-separated-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur le .row-content. Correspond à la variable row_separated_padding_vertical.

                {% if theme.row_separated_padding_vertical %}
                    --row-separated-padding-y: {{theme.row_separated_padding_vertical}};
                {% endif %}
                
                .row-separated .row-content{
                    {% if theme.row_separated_padding_vertical %}
                        padding-top: var(--row-separated-padding-y);
                        padding-bottom: var(--row-separated-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de définir la couleur de la bordure de séparation. Correspond à la variable row_separated_border.

                {% if theme.row_separated_border %}
                    --row-separated-border-color: {{theme.row_separated_border}};
                {% endif %}
            
                {% if theme.row_separated_border %}
                    .row-separated{
                        border-color: var(--row-separated-border-color);    
                    }
                {% endif %}

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne. Correspond à la variable row_separated_headings_color.

                {% if theme.row_separated_headings_color %}
                    --row-separated-headings-color:{{theme.row_separated_headings_color}};
                {% endif %}
                
                .row-separated .row-content{
                    {% if theme.row_separated_headings_color %}
                        --headings-color: var(--row-separated-headings-color);
                        --h1-color: var(--row-separated-headings-color);
                        --h2-color: var(--row-separated-headings-color);
                        --h3-color: var(--row-separated-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne. Correspond à la variable row_separated_color.

                {% if theme.row_separated_color %}
                    --row-separated-color:{{theme.row_separated_color}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_color %}color: var(--row-separated-color);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la ligne. Correspond à la variable row_separated_link_color.

                {% if theme.row_separated_link_color %}
                    --row-separated-link-color:{{theme.row_separated_link_color}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_link_color %}--link-color: var(--row-separated-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la ligne. Correspond à la variable row_separated_link_hover_color.

                {% if theme.row_separated_link_hover_color %}
                    --row-separated-link-hover-color:{{theme.row_separated_link_hover_color}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_link_hover_color %}--link-hover-color: var(--row-separated-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la ligne. Correspond à la variable row_separated_link_decoration.

                {% if theme.row_separated_link_decoration %}
                    --row-separated-link-decoration:{{theme.row_separated_link_decoration}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.row_separated_link_decoration %}--link-decoration: var(--row-separated-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la ligne. Correspond à la variable rowseparated_linkhoverdecoration.

                {% if theme.rowseparated_linkhoverdecoration %}
                    --row-separated-linkhover-decoration:{{theme.rowseparated_linkhoverdecoration}};
                {% endif %}
            
                .row-separated .row-content{
                    {% if theme.rowseparated_linkhoverdecoration %}--link-hover-decoration: var(--row-separated-linkhover-decoration);{% endif %}
                }

Surbrillance

Applique la class .column-highlighted ou .row-highlighted (selon si le style colonne en surbrillance ou ligne en surbrillance est choisi) sur la ligne (.row-container).

Couleur de fond

Permet de choisir une couleur de fond pour la ligne ou les colonnes de la ligne. Correspond à la variable highlighted_bg.

                {% if theme.highlighted_bg %}
                    --highlighted-bg-color: {{theme.highlighted_bg}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_bg %}background-color: var(--highlighted-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles sur la ligne ou les colonnes de la ligne (4 choix possibles). Correspond à la variable highlighted_borderradius.

                {% if theme.highlighted_borderradius %}
                    --highlighted-border-radius:{{theme.highlighted_borderradius}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_borderradius %}border-radius: var(--highlighted-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur la ligne ou les colonnes de la ligne. Correspond à la variable highlighted_padding_horizontal.

                {% if theme.highlighted_padding_horizontal %}
                    --highlighted-padding-x: {{theme.highlighted_padding_horizontal}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_padding_horizontal %}
                        padding-left: var(--highlighted-padding-x);
                        padding-right: var(--highlighted-padding-x);
                {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur la ligne ou les colonnes de la ligne. Correspond à la variable highlighted_padding_vertical.

                {% if theme.highlighted_padding_vertical %}
                    --highlighted-padding-y: {{theme.highlighted_padding_vertical}};
                {% endif %}
                
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_padding_vertical %}
                        padding-top: var(--highlighted-padding-y);
                        padding-bottom: var(--highlighted-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de d'ajouter une bordure sur la ligne ou les colonnes de la ligne. Correspond à la variable highlighted_border_color.

                {% if theme.highlighted_border_color %}
                    --highlighted-border-color: {{theme.highlighted_border_color}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_border_color %}
                        --border-color: {{theme.highlighted_border_color}};
                    {% endif %} 
                    {% if theme.highlighted_border_color_auto == 'false' %}
                        border-style: none;
                    {% endif %}   
                }

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_headings_color.

                {% if theme.highlighted_headings_color %}
                    --highlighted-headings-color:{{theme.highlighted_headings_color}};
                {% endif %}
                
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_headings_color %}
                        --headings-color: var(--highlighted-headings-color);
                        --h1-color: var(--highlighted-headings-color);
                        --h2-color: var(--highlighted-headings-color);
                        --h3-color: var(--highlighted-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_color.

                {% if theme.highlighted_color %}
                    --highlighted-color:{{theme.highlighted_color}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_color %}color: var(--highlighted-color);{% endif %}
                }

Taille du texte

Permet de définir la taille du texte à l'intérieur de la ligne ou des colonnes de la ligne (parmi 3 choix). Correspond à la variable highlighted_fontsize.

                {% if theme.highlighted_fontsize %}
                    --highlighted-font-size:{{theme.highlighted_fontsize}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_fontsize %}font-size: var(--highlighted-font-size);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_link_color.

                {% if theme.highlighted_link_color %}
                    --highlighted-link-color:{{theme.highlighted_link_color}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_link_color %}--link-color: var(--highlighted-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_link_hover_color.

                {% if theme.highlighted_link_hover_color %}
                    --highlighted-link-hover-color:{{theme.highlighted_link_hover_color}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_link_hover_color %}--link-hover-color: var(--highlighted-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_link_decoration.

                {% if theme.highlighted_link_decoration %}
                    --highlighted-link-decoration:{{theme.highlighted_link_decoration}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_link_decoration %}--link-decoration: var(--highlighted-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable highlighted_linkhover_decoration.

                {% if theme.highlighted_linkhover_decoration %}
                    --highlighted-linkhover-decoration:{{theme.highlighted_linkhover_decoration}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_linkhover_decoration %}--link-hover-decoration: var(--highlighted-linkhover-decoration);{% endif %}
                }

Effet au survol

Applique la class .column-hover ou .row-hover sur la ligne (.row-container) ou sur la colonne (.col).

Couleur de fond

Permet de choisir une couleur de fond pour la ligne ou les colonnes de la ligne. Correspond à la variable hover_bg.

                {% if theme.hover_bg %}
                    --hover-bg-color: {{theme.hover_bg}};
                {% endif %}
            
                .column-hover .col-content:hover,
                .row-hover:not(.container):hover,
                .row-hover.container .row-content:hover{
                    {% if theme.hover_bg %}background-color: var(--hover-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles sur la ligne ou les colonnes de la ligne (4 choix possibles). Correspond à la variable hover_borderradius.

                {% if theme.hover_borderradius %}
                    --hover-border-radius:{{theme.hover_borderradius}};
                {% endif %}
            
                .column-hover .col-content,
                .row-hover.container .row-content{
                    {% if theme.hover_borderradius %}border-radius: var(--hover-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur la ligne ou les colonnes de la ligne. Correspond à la variable hover_padding_horizontal.

                {% if theme.hover_padding_horizontal %}
                    --hover-padding-x: {{theme.hover_padding_horizontal}};
                {% endif %}
            
                .column-hover .col-content,
                .row-hover:not(.container),
                .row-hover.container .row-content{
                    {% if theme.hover_padding_horizontal %}
                        padding-left: var(--hover-padding-x);
                        padding-right: var(--hover-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur la ligne ou les colonnes de la ligne. Correspond à la variable hover_padding_vertical.

                {% if theme.hover_padding_vertical %}
                    --hover-padding-y: {{theme.hover_padding_vertical}};
                {% endif %}
                
                .column-hover .col-content,
                .row-hover:not(.container),
                .row-hover.container .row-content{
                    {% if theme.hover_padding_vertical %}
                        padding-top: var(--hover-padding-y);
                        padding-bottom: var(--hover-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de d'ajouter une bordure sur la ligne ou les colonnes de la ligne. Correspond à la variable hover_border_color.

                {% if theme.hover_border_color %}
                    --hover-border-color: {{theme.hover_border_color}};
                {% endif %}
            
                .column-hover .col-content:hover,
                .row-hover:not(.container):hover,
                .row-hover.container .row-content:hover{
                    {% if theme.hover_border_color %}
                        --border-color: {{theme.hover_border_color}};
                    {% endif %}   
                }

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable hover_headings_color.

                {% if theme.hover_headings_color %}
                    --hover-headings-color:{{theme.hover_headings_color}};
                {% endif %}
                
                .column-hover .col-content:hover,
                .row-hover:not(.container):hover,
                .row-hover.container .row-content:hover{
                    {% if theme.hover_headings_color %}
                        --headings-color: var(--hover-headings-color);
                        --h1-color: var(--hover-headings-color);
                        --h2-color: var(--hover-headings-color);
                        --h3-color: var(--hover-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable hover_color.

                {% if theme.hover_color %}
                    --hover-color:{{theme.hover_color}};
                {% endif %}
            
                .column-hover .col-content:hover,
                .row-hover:not(.container):hover,
                .row-hover.container .row-content:hover{
                    {% if theme.hover_color %}color: var(--hover-color);{% endif %}
                }

Mise en avant

Applique la class .leaderboard sur la ligne (.row-container) ou sur la colonne (.col).

Couleur de fond

Permet de choisir une couleur de fond. Correspond à la variable leaderboard_bg.

                {% if theme.leaderboard_bg %}
                    --leaderboard-bg-color: {{theme.leaderboard_bg}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_bg %}background-color: var(--leaderboard-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles sur la ligne ou les colonnes de la ligne (4 choix possibles). Correspond à la variable leaderboard_borderradius.

                {% if theme.leaderboard_borderradius %}
                    --leaderboard-border-radius:{{theme.leaderboard_borderradius}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.container .row-content {
                    {% if theme.leaderboard_borderradius %}border-radius: var(--leaderboard-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur la ligne ou les colonnes de la ligne. Correspond à la variable leaderboard_padding_horizontal.

                {% if theme.leaderboard_padding_horizontal %}
                    --leaderboard-padding-x:{{theme.leaderboard_padding_horizontal}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_padding_horizontal %}
                        padding-left: var(--leaderboard-padding-x);
                        padding-right: var(--leaderboard-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur la ligne ou les colonnes de la ligne. Correspond à la variable leaderboard_padding_vertical.

                {% if theme.leaderboard_padding_vertical %}
                    --leaderboard-padding-y: {{theme.leaderboard_padding_vertical}};
                {% endif %}
                
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_padding_vertical %}
                        padding-top: var(--leaderboard-padding-y);
                        padding-bottom: var(--leaderboard-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de d'ajouter une bordure sur la ligne ou les colonnes de la ligne. Correspond à la variable leaderboard_border.

                {% if theme.leaderboard_border %}
                    --leaderboard-border-color:{{theme.leaderboard_border}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_border %}border: var(--border-width) solid var(--leaderboard-border-color);{% endif %}   
                }

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_headings_color.

                {% if theme.leaderboard_headings_color %}
                    --leaderboard-headings-color: {{theme.leaderboard_headings_color}};
                {% endif %}
                
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_headings_color %}
                        --headings-color: var(--leaderboard-headings-color);
                        --h1-color: var(--leaderboard-headings-color);
                        --h2-color: var(--leaderboard-headings-color);
                        --h3-color: var(--leaderboard-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_color.

                {% if theme.leaderboard_color %}
                    --leaderboard-color: {{theme.leaderboard_color}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_color %}color: var(--leaderboard-color);{% endif %}
                }

Taille du texte

Permet de définir la taille du texte à l'intérieur de la ligne ou des colonnes de la ligne (parmi 3 choix). Correspond à la variable leaderboard_fontsize.

                {% if theme.leaderboard_fontsize %}
                    --leaderboard-font-size:{{theme.leaderboard_fontsize}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_fontsize %}font-size: var(--leaderboard-font-size);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_link_color.

                {% if theme.leaderboard_link_color %}
                    --leaderboard-link-color: {{theme.leaderboard_link_color}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_link_color %}--link-color: var(--leaderboard-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_link_hover_color.

                {% if theme.leaderboard_link_hover_color %}
                    --leaderboard-link-hover-color: {{theme.leaderboard_link_hover_color}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.leaderboard_link_hover_color %}--link-hover-color: var(--leaderboard-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_link_decoration.

                {% if theme.leaderboard_link_decoration %}
                    --leaderboard-link-decoration: {{theme.leaderboard_link_decoration}};
                {% endif %}
            
                .column-highlighted .col-content,
                .row-highlighted:not(.container),
                .row-highlighted.container .row-content{
                    {% if theme.highlighted_link_decoration %}--link-decoration: var(--highlighted-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable leaderboard_linkhover_decoration.

                {% if theme.highlighted_linkhover_decoration %}
                    --highlighted-linkhover-decoration:{{theme.highlighted_linkhover_decoration}};
                {% endif %}
            
                .col.leaderboard .col-content,
                .leaderboard.row-container:not(.container),
                .leaderboard.container .row-content{
                    {% if theme.highlighted_linkhover_decoration %}--link-hover-decoration: var(--highlighted-linkhover-decoration);{% endif %}
                }

Mise en arrière

Applique la class .muted sur la ligne (.row-container) ou sur la colonne (.col).

Couleur de fond

Permet de choisir une couleur de fond. Correspond à la variable muted_bg.

                {% if theme.muted_bg %}
                    --muted-bg-color:{{theme.muted_bg}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_bg %}background-color: var(--muted-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles sur la ligne ou les colonnes de la ligne (4 choix possibles). Correspond à la variable muted_borderradius.

                {% if theme.muted_borderradius %}
                    --muted-border-radius:{{theme.muted_borderradius}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.container .row-content {
                    {% if theme.muted_borderradius %}border-radius: var(--muted-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur la ligne ou les colonnes de la ligne. Correspond à la variable muted_padding_horizontal.

                {% if theme.muted_padding_horizontal %}
                    --muted-padding-x:{{theme.muted_padding_horizontal}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_padding_horizontal %}
                        padding-left: var(--muted-padding-x);
                        padding-right: var(--muted-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur la ligne ou les colonnes de la ligne. Correspond à la variable muted_padding_vertical.

                {% if theme.muted_padding_vertical %}
                    --muted-padding-y: {{theme.muted_padding_vertical}};
                {% endif %}
                
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_padding_vertical %}
                        padding-top: var(--muted-padding-y);
                        padding-bottom: var(--muted-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de d'ajouter une bordure sur la ligne ou les colonnes de la ligne. Correspond à la variable muted_border.

                {% if theme.muted_border %}
                    --muted-border-color:{{theme.muted_border}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_border %}border: var(--border-width) solid var(--muted-border-color);{% endif %}   
                }

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_headings_color.

                {% if theme.muted_headings_color %}
                    --muted-headings-color: {{theme.muted_headings_color}};
                {% endif %}
                
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_headings_color %}
                        --headings-color: var(--muted-headings-color);
                        --h1-color: var(--muted-headings-color);
                        --h2-color: var(--muted-headings-color);
                        --h3-color: var(--muted-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_color.

                {% if theme.muted_color %}
                    --muted-color: {{theme.muted_color}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_color %}color: var(--muted-color);{% endif %}
                }

Taille du texte

Permet de définir la taille du texte à l'intérieur de la ligne ou des colonnes de la ligne (parmi 3 choix). Correspond à la variable muted_fontsize.

                {% if theme.muted_fontsize %}
                    --muted-font-size:{{theme.muted_fontsize}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_fontsize %}font-size: var(--muted-font-size);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_link_color.

                {% if theme.muted_link_color %}
                    --muted-link-color: {{theme.muted_link_color}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_link_color %}--link-color: var(--muted-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_link_hover_color.

                {% if theme.muted_link_hover_color %}
                    --muted-link-hover-color: {{theme.muted_link_hover_color}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_link_hover_color %}--link-hover-color: var(--muted-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_link_decoration.

                {% if theme.muted_link_decoration %}
                    --muted-link-decoration: {{theme.muted_link_decoration}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_link_decoration %}--link-decoration: var(--muted-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable muted_linkhover_decoration.

                {% if theme.muted_linkhover_decoration %}
                    --muted-linkhover-decoration: {{theme.muted_linkhover_decoration}};
                {% endif %}
            
                .col.muted .col-content,
                .muted.row-container:not(.container),
                .muted.container .row-content{
                    {% if theme.muted_linkhover_decoration %}--link-hover-decoration: var(--muted-linkhover-decoration);{% endif %}
                }

Bordé

Applique la class .bordered sur la colonne (.col).

Couleur de fond

Permet de choisir une couleur de fond. Correspond à la variable bordered_bg.

                {% if theme.bordered_bg %}
                    --bordered-bg-color:{{theme.bordered_bg}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_bg %}background-color: var(--bordered-bg-color);{% endif %}
                }

Bords arrondis

Permet d'arrondir les angles sur la ligne ou les colonnes de la ligne (4 choix possibles). Correspond à la variable bordered_borderradius.

                {% if theme.bordered_borderradius %}
                    --bordered-border-radius:{{theme.bordered_borderradius}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_borderradius %}border-radius: var(--bordered-border-radius);{% endif %}
                }

Marges intérieures horizontales

Permet de régler la taille du padding-left et du padding-right sur la ligne ou les colonnes de la ligne. Correspond à la variable bordered_padding_horizontal.

                {% if theme.bordered_padding_horizontal %}
                    --bordered-padding-x: {{theme.bordered_padding_horizontal}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_padding_horizontal %}
                        padding-left: var(--bordered-padding-x);
                        padding-right: var(--bordered-padding-x);
                    {% endif %}
                }

Marges intérieures verticales

Permet de régler la taille du padding-top et du padding-bottom sur la ligne ou les colonnes de la ligne. Correspond à la variable bordered_padding_vertical.

                {% if theme.bordered_padding_vertical %}
                    --bordered-padding-y: {{theme.bordered_padding_vertical}};
                {% endif %}
                
                .bordered .col-content{
                    {% if theme.bordered_padding_vertical %}
                        padding-top: var(--bordered-padding-y);
                        padding-bottom: var(--bordered-padding-y);
                    {% endif %}
                }

Couleur de la bordure

Permet de d'ajouter une bordure sur la ligne ou les colonnes de la ligne. Correspond à la variable bordered_border.

                {% if theme.bordered_border %}
                    --bordered-border-color: {{theme.bordered_border}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_border %}border-color: var(--bordered-border-color);{% endif %}  
                }

Couleur des titres

Permet de redéfinir les variables --headings-color, --h1-color, --h2-color, --h3-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_headings_color.

                {% if theme.bordered_headings_color %}
                    --bordered-headings-color:{{theme.bordered_headings_color}};
                {% endif %}
                
                .bordered .col-content{
                    {% if theme.bordered_headings_color %}
                        --headings-color: var(--bordered-headings-color);
                        --h1-color: var(--bordered-headings-color);
                        --h2-color: var(--bordered-headings-color);
                        --h3-color: var(--bordered-headings-color);
                    {% endif %}
                }

Couleur du texte

Permet de redéfinir la couleur du texte à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_color.

                {% if theme.bordered_color %}
                    --bordered-color:{{theme.bordered_color}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_color %}color: var(--bordered-color);{% endif %}
                }

Taille du texte

Permet de définir la taille du texte à l'intérieur de la ligne ou des colonnes de la ligne (parmi 3 choix). Correspond à la variable bordered_fontsize.

                {% if theme.bordered_fontsize %}
                    --bordered-font-size:{{theme.bordered_fontsize}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_fontsize %}font-size: var(--bordered-font-size);{% endif %}
                }

Couleur des liens

Permet de redéfinir la variable --link-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_link_color.

                {% if theme.bordered_link_color %}
                    --bordered-link-color: {{theme.bordered_link_color}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_link_color %}--link-color: var(--bordered-link-color);{% endif %}
                }

Couleur des liens au survol

Permet de redéfinir la variable --link-hover-color à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_link_hover_color.

                {% if theme.bordered_link_hover_color %}
                    --bordered-link-hover-color: {{theme.bordered_link_hover_color}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_link_hover_color %}--link-hover-color: var(--bordered-link-hover-color);{% endif %}
                }

Apparence des liens

Permet de redéfinir la variable --link-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_link_decoration.

                {% if theme.bordered_link_decoration %}
                    --bordered-link-decoration: {{theme.bordered_link_decoration}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_link_decoration %}--link-decoration: var(--bordered-link-decoration);{% endif %}
                }

Apparence des liens au survol

Permet de redéfinir la variable --link-hover-decoration à l'intérieur de la ligne ou des colonnes de la ligne. Correspond à la variable bordered_linkhover_decoration.

                {% if theme.bordered_linkhover_decoration %}
                    --bordered-linkhover-decoration: {{theme.bordered_linkhover_decoration}};
                {% endif %}
            
                .bordered .col-content{
                    {% if theme.bordered_linkhover_decoration %}--link-hover-decoration: var(--bordered-linkhover-decoration);{% endif %}
                }

Modules

Blog

Affichage des articles du blog

Propose une sélection de 2 types d'affichages différents pour la liste d'articles de blog.

La 1ère option permet d'afficher les articles alignés horizontalement.
La 2ème option permet d'afficher les articles en décalé, disposés comme des briques (style masonry). Attention, masonry n'est pas compatible avec certaines nouvelles options d'affichage.

Boutique

Modèle de la page produit

Permet de choisir entre 2 structures pour la page produit.

La 1ère option permet d'afficher le titre, la notation et la description courte au dessus de la photo du produit.
La 2ème option permet d'afficher le titre, la notation et la description courte du produit à côté de la photo du produit (recommandé).

Mode d'affichage

Permet de choisir entre 2 affichages pour la liste de produit.

La 1ère option affiche les produits sous forme de vignettes, les uns à côté des autres (recommandé).
La 2ème option affiche les produits sous forme de liste les uns en dessous des autres.

Experts

Modifier / Ajouter du CSS au thème

Pour les utilisateurs qui maîtrisent le langage CSS, permet d'ajouter du code CSS supplémentaire qui viendra surcharger le CSS du thème.

Modifier / Ajouter du code Javascript au thème

Pour les utilisateurs qui maîtrisent le langage Javascript, permet d'ajouter du code JS.

Personnaliser un thème - Apparence

Apparence globale

Site

Largeur du site

Fixer la largeur du site à 1320px

Couleur de fond

Motif d'arrière-plan

Bords arrondis

Bouton haut de page

Couleur des bordures

Conteneur #wrapper

Couleur de fond

Bordure extérieure

Marge au dessus du conteneur

Zone de contenu #main

Couleur de fond

Bordure extérieure

Vignette .card

Couleur de fond

Bordures

Ombre portée

Couleur de fond de l'entête

Couleur de fond du bas

Bords arrondis

Couleur des éléments

Couleur principale - primary

Couleur principale

Couleur du texte sur la couleur principale

Couleur secondaire - secondary

Couleur secondaire

Couleur du texte sur la couleur secondaire

Composants

Couleur de fond des composants

Typographie

Textes

Police

Couleur du texte

Taille du texte

Graisse du texte

Titre

Police

Couleur des titres

Taille des titres

Graisse des titres

Menu

Police du menu

Taille des liens

Graisse des liens

Casse

Titre H1

Police des titres H1

Couleur des titres H1

Graisse des titres H1

Casse

Titre H2

Police des titres H2

Couleur des titres H2

Graisse des titres H2

Casse

Titre H3

Police des titres H3

Couleur des titres H3

Graisse des titres H3

Casse

Logo et titre du site

Logo

Importer un logo

Affichage du logo

Taille du logo

Titre du site

Affichage du titre

Graisse du titre

Couleur du titre

Couleur de fond du titre

Couleur au survol

Couleur de fond au survol

Position

Sous-titre du site

Affichage du sous-titre

Navigation et menu