/* Theme Name: Divi : Surcouche Créazam Theme URI: https://creazam.fr/divi-surcouche Description: Afin de faciliter la personnalisation de votre site web, Créazam fournit ce thème surcouche (également appelé thème enfant). Il s’appuie sur le thème Divi (thème principal), dont il reprend les styles et fonctionnalités, tout en y ajoutant des améliorations et des fonctionnalités supplémentaires pour Divi, WordPress, WooCommerce... Grâce au thème surcouche Créazam, toutes les personnalisations réalisées lors de la création de votre site sont conservées lors des mises à jour du thème Divi et de Wordpress, que nous vous recommandons d’effectuer régulièrement. Pour garantir le bon fonctionnement de votre site, le thème surcouche doit rester activé. Il fonctionne en complément du thème Divi, qui doit rester installé. Author: créazam Author URI: https://creazam.fr Tags: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection. Template: Divi Version: 5.0 */ /** * ============================================================================ * ==== EDITEUR DIVI 5 : CLASSES UTILISABLES POUR MODIFIER LE COMPORTEMENT ==== * ============================================================================ */ /** * DIVI 5 : RENDS PLUS ERGONOMIQUES LES ACCORDEONS */ /* En plaçant le bouton (+) à gauche plutot qu'à droite ou il est peu visible en plein écran. */ .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title{ padding: 0 0px 0 30px; } .et_pb_accordion_item.et_pb_toggle .et_pb_toggle_title:before { right: auto; left: 0; } /* Et, une fois ouvert, en ajoutant un bouton (-) qui permet de les refermer */ .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before{ display: inline !important; content: "\e04f"; } /** * DIVI 5 : POUR RECADRER UNE IMAGE (CROP) * Avec un ratio variable au choix (16/9, 4/3, 3/2, 1/1 ...) * Permet d'uniformiser les formats d'images diverses dans une page nottament lorsqu'elles sont côte à côte. * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Une "Valeur par défaut" est appliquée. Pour la modifier, aller ensuite dans la section "Avancé - CSS - Élement principal" du module et definir la variable en suivant l'exmple de "CSS Personnalisé" ci-dessous. (le correcteur indique ce type de style en erreur, ne pas en tenir compte il est fonctionnel) * Module à paramétrer : Image * Classe CSS à utiliser : recadre-image-ratio-var * CSS Personnalisé (exemple) : --ratio:16/9; * Valeur par défaut : 4/3 */ .recadre-image-ratio-var .et_pb_image_wrap{ position: relative; overflow: hidden; width: 100%; } .recadre-image-ratio-var .et_pb_image_wrap::before { padding-top: calc((1 / (var(--ratio,4/3))) * 100%); display: block; content: ""; width: 100%; } .recadre-image-ratio-var .et_pb_image_wrap img { position: absolute; height: 100%!important; width: 100%!important; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover; } /** * DIVI 5 : POUR REPOSITIONNER UNE IMAGE RECADRÉE ou UNE IMAGE DE FOND (AVEC OU SANS EFFET PARALLAXE) * Par défaut une image recadrée ou une image de fond est centrée, mais on peut vouloir ajuster cette position. * La position variable se règlera avec 2 pourcentages. Le premier concerne l'axe horizontal et le second l'axe vertical. * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Une "Valeur par défaut" est appliquée. Pour la modifier, aller ensuite dans la section "Avancé - CSS - Élement principal" du module et definir la variable en suivant l'exmple de "CSS Personnalisé" ci-dessous. * Module à paramétrer : Image (pour une image recadrée) * ou : Section, Ligne, Colonne voire Module (pour les images de fond) * Classe CSS à utiliser : position-image-var * CSS Personnalisé (exemple) : --position:Center Top; * ou : --position:50% 0%; * Valeur par défaut : 50% 0% */ .position-image-var .et_pb_image_wrap img{ object-position: var(--position,50% 0%); } .position-image-var, .position-image-var .et-pb-parallax-background { background-position: var(--position,50% 0%); } /** * ============================================================================ * ==== EDITEUR DIVI 4 : CLASSES UTILISABLES POUR MODIFIER LE COMPORTEMENT ==== * ============================================================================ */ /* LES CLASSES SUIVANTES SONT CONSERVÉES POUR LA RETROCOMPATIBILITE MAIS À NE PLUS RÉUTILISER SOUS DIVI 5 AU PROFIT DES FONCTIONS NATIVES : - [X] inverse-colonnes : inversion des colonnes sur mobile -> à remplacer dans Divi 5 par Design > Layout > layout direction - [X] deux-colonnes-fixes : Colonnes fixes -> à remplacer dans Divi 5 par Design > Layout > no-wrap - [X] alignement_vertical_centre : Alignement vertical -> à remplacer dans Divi 5 par Design > Layout > justify content - [X] filtre-couleur-image-parallaxe-var : Filtre sur arriere plan parallaxe -> à remplacer dans Divi 5 par Background gradient > Place Gradient Above Background Image (marche bien maintenant sur les 2 types de parallaxe) - [X] position-image-parallaxe-var : Repositionnement des images de fond a effet parallaxe : à remplacer dans Divi 5 par la classe perso générique .position-image-fond-var */ /** * DIVI 4 : POUR INVERSER L'ORDRE DES COLONNES SUR MOBILE * (approche "mobile-first" par pavenum.com) * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Puis, si l'option des tailles de gouttières personalisées a été utilisée dans cette ligne, y ajouter également la classe gouttiere1, 2, 3 ou 4 * Module à paramétrer : Ligne * Classe CSS à utiliser : inverse-colonnes * ou : inverse-colonnes gouttiere1 * ou : inverse-colonnes gouttiere2 * ou : inverse-colonnes gouttiere3 * ou : inverse-colonnes gouttiere4 */ @media only screen and (min-width: 981px) { .inverse-colonnes { display: flex; flex-direction: row-reverse; } .inverse-colonnes .et_pb_column:first-child { margin-right: 0 !important; } .inverse-colonnes .et_pb_column:last-child { margin-right: 5.5% !important; } .inverse-colonnes .gouttiere1 .et_pb_column:last-child { margin-right: 0 !important; } .inverse-colonnes .gouttiere2 .et_pb_column:last-child { margin-right: 3% !important; } .inverse-colonnes .gouttiere3 .et_pb_column:last-child { margin-right: 5.5% !important; } .inverse-colonnes .gouttiere4 .et_pb_column:last-child { margin-right: 8% !important; } } /** * DIVI 4 : POUR CONSERVER DES COLONNES CÔTE À CÔTE MÊME EN AFFICHAGE MOBILE * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Puis dans les propriétés de la ligne, onglet Style, activer l'option des tailles de gouttières personnalisées et les réduire au minimum (1). * Module à paramétrer : Ligne * Classe CSS à utiliser : deux-colonnes-fixes * ou : trois-colonnes-fixes * ou : quatre-colonnes-fixes * ou : cinq-colonnes-fixes * ou : six-colonnes-fixes */ @media only screen and (max-width : 980px) { .deux-colonnes-fixes .et_pb_column { width: 50% !important ; } .trois-colonnes-fixes .et_pb_column { width: 33.33% !important ; } .quatre-colonnes-fixes .et_pb_column { width: 25% !important ; } .cinq-colonnes-fixes .et_pb_column { width: 20% !important ; } .six-colonnes-fixes .et_pb_column { width: 16.66% !important ; } } /** * DIVI 4 : POUR REGLER L'ALIGNEMENT VERTICAL DANS UNE COLONNE * (par Jason Champagne dans Divi Resources) * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Puis égaliser les hauteurs de colonne s'il y en a plusieurs dans la même ligne : Dans les propriétés de la ligne, onglet Style, activer l'option "égaliser les hauteurs de colonne". * Module à paramétrer : Colonne * Classe CSS à utiliser : alignement_vertical_centre * ou : alignement_vertical_bas */ .alignement_vertical_centre { display: flex; flex-direction: column; justify-content: center; } .alignement_vertical_bas { display: flex; flex-direction: column; justify-content: flex-end; } /** * DIVI 4 : POUR AJOUTER UN FILTRE COLORISÉ SUR LES IMAGES À EFFET PARALLAXE * Divi ne propose pas cette fonction qui est disponible pour les images classiques. * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Une "Valeur par défaut" est appliquée. Pour la modifier, aller ensuite dans la section "Personnaliser CSS" du module et definir la variable en suivant l'exmple de "CSS Personnalisé" ci-dessous. (le correcteur indique ce type de style en erreur, ne pas en tenir compte il est fonctionnel) * Module à paramétrer : Section, Ligne ou Colonne (contenant l'image avec effet parallaxe) * Classe CSS à utiliser : filtre-couleur-image-parallaxe-var * CSS Personnalisé (exemple) : --couleur:rgba(90,155,135,0.6); * Valeur par défaut : rgba(0,0,0,0.5) */ .filtre-couleur-image-parallaxe-var .et_parallax_bg::before { background-color: var(--couleur,rgba(0,0,0,0.5)); content: ""; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } /** * DIVI 4 : POUR REPOSITIONNER LES IMAGES À EFFET PARALLAXE. RECONDUIT POUR DIVI 5 MAIS CODE DIFFERENT CI-DESSUS * Divi centre par défaut les images à effet parallaxe mais on souhaite pouvoir modifier ce comportement quand nécessaire. * Les différentes positions variables sont les suivantes : Center, Left Top, Top Center, Top Right, Center Left, Bottom Left, Bottom Center, Bottom Right * Utilisation: Dans les paramètres du "Module à paramétrer", déclarer la "Classe CSS à utiliser" ci-dessous. * Une "Valeur par défaut" est appliquée. Pour la modifier, aller ensuite dans la section "Personnaliser CSS" du module et definir la variable en suivant l'exmple de "CSS Personnalisé" ci-dessous. (le correcteur indique ce type de style en erreur, ne pas en tenir compte il est fonctionnel) * Module à paramétrer : Section, Ligne ou Colonne (contenant l'image avec effet parallaxe) * Classe CSS à utiliser : position-image-parallaxe-var * CSS Personnalisé (exemple) : --position:Bottom Left; * Valeur par défaut : Top Center */ .position-image-parallaxe-var .et_parallax_bg { background-position: var(--position,Top Center); } /** * ========================================================================================== * ==== EDITEUR WORDPRESS PAR DEFAUT : CLASSES UTILISABLES POUR MODIFIER LE COMPORTEMENT ==== * ========================================================================================== */ /** * WP-DEFAUT : POUR JUSTIFIER DU TEXTE * Permet de combler un manque de l'éditeur par défaut pour pouvoir justifier du texte * Utilisation: Dans les règlages du "Bloc à paramétrer" puis 'Avancé', déclarer la "Classe CSS à utiliser" ci-dessous. * Bloc à paramétrer : Texte * Classe CSS à utiliser : justifier */ .justifier { text-align: justify; } /** * WP-DEFAUT : POUR MODIFIER LES MARGES DES COLONNES * Par défaut chaque colonne (autre que la première) à une marge gauche de 2em * Utilisation: Dans les règlages du "Bloc à paramétrer" puis 'Avancé', déclarer la "Classe CSS à utiliser" ci-dessous. * Bloc à paramétrer : Colonnes (le bloc principal pas chaque colonne) * Classe CSS à utiliser : colonnes-sans-marge * ou : colonnes-marge-moins * ou : colonnes-marge-plus */ .colonnes-sans-marge.wp-block-columns.is-layout-flex{ gap: 0em; } .colonnes-marge-moins.wp-block-columns.is-layout-flex{ gap: 1em; } .colonnes-marge-plus.wp-block-columns.is-layout-flex{ gap: 3em; } /** * ============================================================= * ==== EDITEUR DIVI 4 & 5 : AJUSTEMENTS ==== * ============================================================= */ /** * DIVI : AJUSTE L'APPARENCE DU MENU POUR MOBILES * (par divi community) */ /* Une fois le menu ouvert l'icone "hamburger" se transforme en "croix" pour fermer */ .mobile_nav.opened .mobile_menu_bar:before { content: "\4d"; } /** * DIVI : DIMINUE LA TAILLE DES EXPOSANTS ET INDICES * (par divi community) * Ils sont par défaut à la même taille que le reste du texte * Diminuer le pourcentage si c'est encore trop grand pour vous */ sup, sub { font-size: 70%; } /** * ============================================================= * ==== EDITEUR WORDPRESS PAR DEFAUT : AJUSTEMENTS ==== * ============================================================= */ /** * WP-DEFAUT : EVITE LA CÉSURE D'UN MOT DANS LES GRANDS TITRES QUITTE À DEPASSER UN PEU */ h1, h2, h3 { overflow-wrap: normal; } /** * WP-DEFAUT : RETABLIT LA BALISE SMALL A UNE TAILLE INFERIEURE */ small { font-size: 70%!important; } /** * WOOCOMMERCE : RETABLIT LA BALISE SMALL A SON POIDS D'ORIGINE */ .woocommerce table.shop_table td small { font-weight: inherit!important; } /** * WP-DEFAUT : METS EN FORME L'OPTION DE BLOC EN PLEINE LARGEUR * Style mettant en forme les blocs avec option pleine largeur pour qu'ils occupent parfaitement toute la largeur de l'écran * (adapté de capitainewp.io) */ .alignwide { margin-left: -50px; margin-right: -50px; } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .wp-block-cover, .alignfull { /* Pour les blocs de type "Bannière" */ width : auto; } #page-container { /* Empeche l'ascenceur horizontal de s'afficher sous Windows */ overflow-x: hidden; } /** * WP-DEFAUT : PERMET L'AFFICHAGE D'UN LOGO EN FOOTER */ .crzm_logo_footer_blanc, .crzm_logo_footer_noir{ font-size: 0; } .crzm_logo_footer_blanc::before, .crzm_logo_footer_noir::before{ content: ""; display: inline-block; margin-bottom: -0.63rem; width: 4.7rem; height: 1.5rem; background-size: 4.5rem; background-repeat: no-repeat; } .crzm_logo_footer_blanc::before{ background-image: url("https://creazam.fr/wp-content/crzm-uploads/crzm_logo/creazam_logo_footer_blanc.png"); } .crzm_logo_footer_noir::before{ background-image: url("https://creazam.fr/wp-content/crzm-uploads/crzm_logo/creazam_logo_footer_noir.png"); } /** * WP-DEFAUT : MASQUE LE LOGO RECAPTCHA SUR MOBILE * Si recaptcha a été installé */ @media only screen and ( max-width: 479px ) { .grecaptcha-badge { visibility: hidden !important; } } /** * ===================================================================== * ========== COMMENT AJOUTER VOS STYLES CSS PERSONNALISÉS ? =========== * ===================================================================== */ /* NE PAS MODIFIER CE FICHIER , TOUTE MODIFICATION EFFECTUEE ICI SERA PERDUE A LA PROCHAINE MAJ DU SOUS THEME */ /* AJOUTEZ PLUTOT VOS STYLES CSS PERSONNALISÉS DIRECTEMENT DANS DIVI > Theme Options > General > Custom CSS */