lui-meme, l'etoile restait donc en ligne devant le texte. En Divi la classe est sur le MODULE, qui est un conteneur flex en colonne : le pseudo-element devient un enfant de plein droit et l'etoile part sur sa propre ligne, au-dessus du titre. On la deplace sur le titre reel, a l'interieur du module. / .gi-section-head__title.et_pb_module::before { content: none; } .gi-section-head__title.et_pb_module :is(h1, h2, h3, h4)::before { content: ""; display: inline-block; width: 0.58em; height: 0.58em; margin-right: 0.44em; vertical-align: 0.04em; background-color: var(--gi-gold-400); -webkit-mask: var(--gi-star) center / contain no-repeat; mask: var(--gi-star) center / contain no-repeat; filter: drop-shadow(0 0 7px rgba(198, 165, 93, 0.6)); } / -------------------------------------------------------------------------- B4. Cartes cliquables Divi n'enveloppe pas un groupe dans un et n'expose aucun reglage de lien de module. La carte entiere cliquable passe donc par un module Lien en surcouche absolue. Le texte du lien reste lu par les lecteurs d'ecran. -------------------------------------------------------------------------- / .gi-db, .gi-post, .gi-guide, .gi-tool { position: relative; } .gi-dblink, .gi-postlink, .gi-guidelink, .gi-toollink { position: absolute; inset: 0; z-index: 3; margin: 0; } / Attention : le module Lien N'EST PAS une enveloppe autour d'un , il EST le . Le selecteur .gi-dblink a ne designe donc rien. Le texte du lien se cache sur son enveloppe interne, en masquage accessible : il reste lu par les lecteurs d'ecran et sert de nom accessible a la carte. / .gi-dblink .et_pb_link_text, .gi-post__link .et_pb_link_text, .gi-guide__link .et_pb_link_text, .gi-tool__link .et_pb_link_text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } / Divi pose position: relative sur ses lignes et colonnes. Sans ce retour a static, la surcouche ci-dessus se calerait sur la ligne, pas sur la carte. / .gi-section .et_pb_row, .gi-section .et_pb_column { position: static; } / -------------------------------------------------------------------------- B5. Section Database La grille et les tuiles ne sont plus des li/a. Le nombre de colonnes est desormais un reglage natif (Design > Layout), il n'est donc PAS redeclare ici : le redeclarer empecherait de le changer depuis le Builder. -------------------------------------------------------------------------- / .gi-db__grid > .gi-db { position: relative; } / La grille appartient au Builder, pas a cette feuille. Mais gi-accueil.css pose encore un grid-template-columns en dur, herite de la maquette, et il gagne sur la regle de base de Divi puisqu'il est charge apres elle. On redonne donc la main a Divi avec une specificite d'un cran superieure, en consommant ses propres variables : le nombre de colonnes et les gouttieres se reglent depuis Design > Layout, y compris par point de rupture. / .et_pb_group.gi-db__grid { grid-template-columns: repeat(var(--column-count, 3), minmax(0, 1fr)); gap: var(--vertical-gap, 20px) var(--horizontal-gap, 20px); } / Le module SVG rend puis le
qui aligne le tout, le module etant un conteneur flex. / / .et_pb_text_inner porterait sa propre ligne de texte, plus haute que le
en inline-flex qu'elle contient : le bloc gagnerait 4 px de vide sous l'intitule. display: contents la sort du flux sans toucher au DOM. / .gi-hero__eyebrow .et_pb_text_inner { display: contents; } .gi-heroeyebrow p { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.55rem; line-height: 1.65; } .gi-heroeyebrow svg { width: 15px; height: 15px; flex: none; } / Les boutons vivent dans un groupe qui gere son propre ecart : la marge que la partie 2 pose sur chaque enveloppe ferait double emploi. / .gi-hero .gi-hero__actions .et_pb_button_module_wrapper, .gi-cta .gi-cta__actions .et_pb_button_module_wrapper { margin: 0 !important; } / -------------------------------------------------------------------------- B6. Visual Builder Les apparitions au scroll et les effets doivent etre neutralises pendant l'edition, sinon la moitie de la page est invisible dans le Builder. -------------------------------------------------------------------------- / .et-fb .gi-reveal { opacity: 1 !important; transform: none !important; } .et-fb .gi-fx { display: none !important; } / -------------------------------------------------------------------------- B8. Particules du hero La maquette ecrivait le canvas a la main dans le decor :
. Un module de vignette rend donc .et_pb_text > .et_pb_text_inner > p > img et effacer la seule .et_pb_text_inner laissait le
faire ecran. C'est ce
qui gardait « Lire la suite » et son chevron sur deux lignes, et qui collait le titre d'un outil a sa description. Les titres, eux, ne sont pas enveloppes : wpautop laisse les blocs tranquilles. Le selecteur est en DESCENDANCE et non en enfant direct, et il vise large, `[class="_inner"]` : rien ne coute a etre robuste a une couche de plus. / .gi-passthrough [class="_inner"], .gi-passthrough [class="_inner"] > p { display: contents; } .gi-ghost.gi-ghost { display: contents; } /* --- Les separateurs de la liste d'outils --------------------------------- Ils etaient poses en `li + li`. Il n'y a plus de
: chaque outil est un groupe, enfant direct de la liste. / .gi-toolslist > + * { border-top: 1px solid var(--gi-line-soft); } /* --- Les titres et les paragraphes ont perdu leur classe ------------------ Dans la maquette, `class` est sur le
ou sur le
; en Divi elle est sur le MODULE, et l'element ecrit a la main a l'interieur n'en porte aucune. Il retombe donc sur la typographie de Divi et du navigateur, marges comprises. Il herite desormais de son module. / .gi-posttitle :is(h1, h2, h3, h4, h5, h6), .gi-paneltitle :is(h1, h2, h3, h4, h5, h6), .gi-arch-emptytitle :is(h1, h2, h3, h4, h5, h6), .gi-section-headtitle :is(h1, h2, h3, h4, h5, h6) { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: inherit; margin: 0; padding: 0; } .gi-postdate p, .gi-postexcerpt p, .gi-bannerphase p, .gi-count__label p { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; } / --- L'intitule de section ------------------------------------------------ Meme piege que l'etoile du titre, partie B3. Dans la maquette .gi-eyebrow est sur le
: le filet dore de 26 px pose en ::before reste en ligne, devant le texte. En Divi la classe est sur le MODULE, conteneur flex en colonne : le pseudo-element devient un enfant de plein droit et le filet part sur sa propre ligne. La taille de police reste celle du texte courant sur le module : c'est elle qui fixe la hauteur de la ligne ou le
en inline-flex se pose, et donc les sept pixels qui separent l'intitule du titre dans la maquette. La typographie de l'intitule descend d'un cran, sur le
, exactement comme dans la maquette ou la classe est sur le
et non sur le
parent. / .gi-eyebrow.gi-eyebrow::before { content: none; } .gi-eyebrow.gi-eyebrow { font-size: inherit; letter-spacing: normal; } .gi-eyebrow p { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--sp-3); margin: 0; padding: 0; font-size: var(--fs-xs); letter-spacing: var(--ls-widest); } .gi-eyebrow:not(:has(svg)) p::before { content: ""; width: 26px; height: 1px; flex: none; background: linear-gradient(90deg, transparent, var(--gi-gold-500)); } / --- Le module SVG -------------------------------------------------------- Meme piege qu'en B5 : Divi le dimensionne avec .et_pb_svg .et_pb_svg_inner svg { width: 100%; height: auto }, plus specifique que nos regles de taille. On dimensionne l'enveloppe. / .gi-tool__arrow [class="_inner"] { width: 15px; height: 15px; } .gi-panel__spark [class="_inner"] { width: 17px; height: 17px; } .gi-tool__arrow [class="_inner"] svg, .gi-panel__spark [class="_inner"] svg { display: block; width: 100%; height: 100%; } / Le chevron de la liste d'outils est pousse a droite. / .gi-toolarrow.gi-toolarrow { margin-left: auto; } / Le filet du titre en ligne occupe l'espace restant. Il n'est plus utilise par les sections portees : l'entete des actualites a rejoint le dessin des guides, un titre a gauche et un lien a droite. La regle reste pour la maquette et pour un usage futur. / .gi-titleline.gi-titleline { flex: 1; } / gi-tokens.css pose une marge haute sur le titre de section, pour l'ecarter de l'intitule qui le precede. Quand le titre est seul, directement dans l'entete et sans intitule au-dessus, cette marge n'a plus d'objet et desaligne le titre de son bouton. / .gi-section-head > .gi-section-headtitle { margin-top: 0; } / La grille n'a plus de
. Chaque enfant direct est soit la carte elle-meme, soit l'enveloppe d'iteration que Divi pourrait ajouter : dans les deux cas il doit s'etirer sur toute la hauteur de sa cellule et pouvoir retrecir sous la largeur de son contenu. / .gi-newsgrid > , .gi-guidesgrid > * { min-width: 0; } .gi-newsgrid > :not(.gi-card), .gi-guides__grid > :not(.gi-card) { display: flex; } /* -------------------------------------------------------------------------- B11. La teinte de vignette vient de la POSITION Arbitrage du 28/07 au soir, qui remplace le precedent. Le champ personnalise gifr_teinte est abandonne : les vignettes portent l'image a la une, le degrade generatif de .gi-thumb n'apparait que sur un article qui n'en a pas. Faire saisir un champ a chaque publication pour un fond que l'image recouvre ne se justifiait plus. Le rang est pris avec :nth-child et non avec l'attribut data-loop-item que Divi pose sur chaque iteration : le selecteur reste juste si Divi enveloppe l'iteration dans un div de plus, et il boucle tout seul au-dela du nombre de colonnes. Trois colonnes pour les actualites, quatre pour les guides : le cycle suit le nombre de colonnes pour qu'aucune ligne ne repete deux fois la meme teinte cote a cote. -------------------------------------------------------------------------- / .gi-newsgrid > :nth-child(3n + 1) .gi-postthumb { --thumb-a: var(--el-electro); --thumb-b: var(--el-hydro); } .gi-newsgrid > :nth-child(3n + 2) .gi-postthumb { --thumb-a: var(--el-dendro); --thumb-b: var(--el-anemo); } .gi-newsgrid > :nth-child(3n + 3) .gi-postthumb { --thumb-a: var(--el-cryo); --thumb-b: var(--el-electro); } .gi-guidesgrid > :nth-child(4n + 1) .gi-postthumb { --thumb-a: var(--el-cryo); --thumb-b: var(--el-electro); } .gi-guidesgrid > :nth-child(4n + 2) .gi-postthumb { --thumb-a: var(--el-hydro); --thumb-b: var(--el-cryo); } .gi-guidesgrid > :nth-child(4n + 3) .gi-postthumb { --thumb-a: var(--el-geo); --thumb-b: var(--el-pyro); } .gi-guidesgrid > :nth-child(4n + 4) .gi-postthumb { --thumb-a: var(--el-pyro); --thumb-b: var(--el-geo); } / -------------------------------------------------------------------------- B12. L'etiquette tire sa couleur du SLUG de la categorie Plutot que d'un second champ personnalise. Les trois variantes existent deja dans gi-tokens.css sous les noms de la maquette ; on leur ajoute ici les alias correspondant aux slugs probables du site. Ajouter une categorie revient a ajouter une ligne. Un slug inconnu retombe sur .gi-tag nu, le dore neutre : pas de carte cassee. -------------------------------------------------------------------------- / .gi-tag--mise-a-jour, .gi-tag--maj-de-jeu, .gi-tag--actualite, .gi-tag--actualites, .gi-tag--news { background: rgba(79, 166, 227, 0.16); color: #A7D5F2; box-shadow: inset 0 0 0 1px rgba(79, 166, 227, 0.38); } .gi-tag--evenement, .gi-tag--evenements, .gi-tag--events { background: rgba(143, 201, 58, 0.15); color: #C4E58A; box-shadow: inset 0 0 0 1px rgba(143, 201, 58, 0.36); } .gi-tag--guides, .gi-tag--astuces, .gi-tag--personnage, .gi-tag--tier-list, .gi-tag--debutant { background: rgba(177, 137, 221, 0.16); color: #D8C2F0; box-shadow: inset 0 0 0 1px rgba(177, 137, 221, 0.38); } / -------------------------------------------------------------------------- B13. Guides : le champ de particules Le canvas est injecte par gi-particles.js, en tete de section, avec les reglages ecrits a la main dans la maquette. Meme parti pris qu'en B8 pour le hero : hors flux, sans clic, sous le contenu, et rien dans le Builder. -------------------------------------------------------------------------- / .gi-guides .gi-particles--auto { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: -1; pointer-events: none; } / -------------------------------------------------------------------------- B14. Le bouton qui grossissait au survol La partie 3 reprend deja le remplissage au niveau de Divi : body #page-container .et_pb_section .et_pb_button.gi-btn Divi ecrit exactement le meme, avec .et_pb_button_0:hover. Specificite IDENTIQUE, et son CSS de page vit en fin de : il gagne. Au repos nos deux declarations donnaient la meme valeur, on ne voyait rien ; au survol Divi elargit le remplissage droit pour loger sa fleche, et le bouton grandissait sous la souris. Un cran de plus suffit, et il ne coute rien : la classe doublee. -------------------------------------------------------------------------- / body #page-container .et_pb_section .et_pb_button.gi-btn.gi-btn, body #page-container .et_pb_section .et_pb_button.gi-btn.gi-btn:hover { padding: var(--gi-btn-pad) !important; } / Meme cause pour la chasse et la graisse : Divi ne les touche pas au survol, mais le Personnaliseur peut. On fige la boite du bouton, seule la couleur et le balayage bougent. / .et_pb_button.gi-btn.gi-btn:hover { letter-spacing: 0.085em !important; font-size: var(--fs-sm) !important; line-height: 1.65 !important; border: 0 !important; } / -------------------------------------------------------------------------- B15. Section Discord COMPOSANT NEUF, SANS EQUIVALENT DANS LA MAQUETTE. Il remplace la section « Communaute » du 28/07, et il n'existe qu'en Divi : tout son style vit donc ici, et non dans gi-accueil.css, pour n'avoir qu'un seul endroit a lire. Le widget est un iframe servi par discord.com. On ne peut rien y changer : ni la police, ni les couleurs, ni sa largeur maximale. Le parti pris est de l'assumer comme une piece rapportee, posee dans une carte GIFR avec liseré et equerres. Le cadre fait la couture entre les deux univers graphiques. -------------------------------------------------------------------------- / .gi-discord { --gi-discord: #5865F2; --gi-discord-dark: #4752C4; / Violet de marque Twitch. Sert au survol du bouton de la barre, partie B16.6 ter, ou il est recopie en rgba() : voir le commentaire la-bas. / --gi-twitch: #9146FF; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(58% 62% at 18% 24%, rgba(88, 101, 242, 0.16), transparent 68%), radial-gradient(46% 54% at 86% 78%, rgba(235, 69, 158, 0.10), transparent 70%), linear-gradient(180deg, var(--gi-ink-950), var(--gi-ink-900) 100%); } / Le canvas est injecte par gi-particles.js, palette « discord ». Meme parti pris qu'en B8 et B13 : hors flux, sans clic, sous le contenu. / .gi-discord .gi-particles--auto { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: -1; pointer-events: none; } / Le partage. La colonne de droite est fixe : le widget Discord ne depasse jamais 420 px de large, l'etirer ne ferait qu'ajouter du vide a l'interieur de l'iframe. Le nombre de colonnes reste dans cette feuille et non dans le Builder, meme motif que les grilles bouclees : les paliers ne tombent pas sur les points de rupture de Divi. / .gi-discordinner.gi-discordinner { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-7); align-items: center; / Le conteneur large fait 1760 px. Un appel a l'action n'en a pas besoin : au-dela, la colonne de texte s'etire sans que le texte suive, et le vide entre les deux colonnes devient un trou. PAS de `margin-inline: auto` ici, et c'est important. Divi met chaque colonne en flex : une marge automatique sur l'axe transversal d'un conteneur flex DESACTIVE l'etirement de l'element, qui retombe alors sur la largeur de son contenu. Ca ne se voyait pas tant que le contenu etait large, et ca s'est effondre a 440 px le jour ou un descendant a recu `container-type`, qui lui retire justement sa largeur intrinseque. `align-self: center` centre sans toucher au dimensionnement. / width: 100%; max-width: 1180px; align-self: center; } .gi-discordtext.gi-discordtext { display: flex; flex-direction: column; gap: 0; } .gi-discordtitle.gi-discordtitle { font-family: var(--gi-font-display); / Un cran sous le titre du CTA de la maquette : celui-la etait centre sur toute la largeur, celui-ci vit dans une colonne de 700 px. / font-size: var(--fs-t-xl); font-weight: 700; line-height: 1.16; letter-spacing: var(--ls-caps-lg); color: var(--gi-text-strong); text-wrap: balance; margin-block: var(--sp-4) var(--sp-4); } .gi-discordtitle :is(h1, h2, h3) { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: inherit; margin: 0; padding: 0; } .gi-discordlead.gi-discordlead { max-width: 46ch; font-size: var(--fs-lg); line-height: 1.6; color: var(--gi-sand-300); text-wrap: pretty; } .gi-discordlead p { margin: 0; padding: 0; font: inherit; color: inherit; line-height: inherit; } / --- Les chiffres --------------------------------------------------------- Statiques et editables au clic, arrondis vers le bas pour vieillir dans le bon sens. Les rendre vivants demanderait une requete a l'API Discord depuis l'extension, mise en cache une heure. / .gi-discordstats.gi-discordstats { flex-direction: row; flex-wrap: wrap; gap: var(--sp-6); } .gi-discordstats > { --flex-direction: column; } .gi-stat.gi-stat { display: flex; flex-direction: column; gap: 0.1rem; } .gi-stat strong { font-family: var(--gi-font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--gi-sand-50); font-variant-numeric: tabular-nums; } .gi-stat span { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gi-text-faint); } /* Chiffres et bouton sur la meme rangee : la preuve et l'action se lisent d'un coup, et la colonne de texte se rapproche de la hauteur du widget. Le filet vertical separe les deux sans peser, et disparait quand la rangee se replie. / .gi-discordcta.gi-discordcta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-top: var(--sp-6); } .gi-discordcta > { --flex-direction: column; } .gi-discordcta > .gi-discordactions { padding-left: var(--sp-6); border-left: 1px solid var(--gi-line); } /* Le filet ne vaut que tant que la rangee tient sur une ligne. Une fois repliee, il se retrouve a gauche d'un bouton seul, sous les chiffres, et ne separe plus rien. Le repli depend de la largeur de la COLONNE DE TEXTE, pas de celle de la fenetre : entre 980 et 1300 px la colonne est etroite alors que la fenetre est large. Une requete de media se tromperait donc de cible, et c'est ce qu'elle faisait. On interroge le conteneur. `container-type: inline-size` est sans risque ici : la colonne est un element de grille en minmax(0, 1fr), sa largeur ne depend deja pas de son contenu. / .gi-discordtext.gi-discordtext { container-type: inline-size; } @container (max-width: 660px) { .gi-discordcta > .gi-discordactions { padding-left: 0; border-left: 0; } } / Variante empilee, quand BOUTON_EN_LIGNE vaut False. / .gi-discordpile.gi-discordpile { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-6); } .gi-discordpile > .gi-discordactions { margin-top: var(--sp-7); } .gi-discordstats.gi-discordstats { margin-top: 0; } .gi-discordactions.gi-discordactions { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); } .gi-discordactions > { --flex-direction: column; } .gi-discordactions .et_pb_button_module_wrapper { margin: 0 !important; } /* --- Le bouton Discord ---------------------------------------------------- Une variante de plus, ecrite comme les autres. Le Personnaliseur de theme peint TOUS les .et_pb_button : fond et couleur doivent etre repris avec !important, cf. piege 5. Le picto passe par le masque .gi-btn--ico-discord, qui existe deja en partie 3 ter. / .et_pb_button.gi-btn--discord, .et_pb_button.gi-btn--discord:hover { background: var(--gi-discord) !important; color: #FFFFFF !important; } .et_pb_button.gi-btn--discord:hover { background: var(--gi-discord-dark) !important; box-shadow: 0 0 24px rgba(88, 101, 242, 0.45); } / --- La carte du widget --------------------------------------------------- L'iframe fait 500 px de haut et refuse de s'etirer au-dela de sa largeur maximale. La carte se contente donc de l'encadrer, sans padding lateral : le widget a deja le sien. / .gi-discordwidget.gi-discordwidget { position: relative; display: flex; flex-direction: column; padding: var(--sp-4); border-radius: var(--r-md); background: linear-gradient(168deg, var(--gi-ink-800) 0%, var(--gi-ink-900) 100%); box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.28), var(--sh-2); } .gi-discordframe.gi-discordframe { display: block; width: 100%; } .gi-discordframe iframe { display: block; width: 100%; height: 500px; border: 0; border-radius: var(--r-sm); / L'iframe est le seul element de la page qu'on ne peut pas habiller : un leger retrait de saturation le rapproche de notre palette sans le denaturer. / filter: saturate(0.92); } / Sous 980 px la colonne fixe n'a plus la place : le widget passe dessous et se centre. Il ne s'elargit pas pour autant, sa largeur est celle de Discord. / @media (max-width: 980px) { .gi-discordinner.gi-discordinner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .gi-discordwidget.gi-discord__widget { width: 100%; max-width: 420px; margin-inline: auto; } } / -------------------------------------------------------------------------- B16. EN-TETE DU THEME BUILDER : barre, mega-menus et tiroir mobile Trois choses a savoir avant de toucher a cette partie. 1. LE MODULE LIEN EST LE , pas une enveloppe autour. Son DOM est a.et_pb_link > span.et_pb_link_inner > span.et_pb_link_text > p. Les onglets et les liens de mega-menu ont donc besoin que ces trois couches sortent du flux, sinon la mise en ligne du ne s'applique qu'a une enveloppe. Les liens EN SURCOUCHE, eux, veulent l'inverse : leur texte reste en masquage accessible. D'ou deux listes explicites plus bas, et non une regle attrape-tout. 2. LE PANNEAU DE MEGA-MENU EST LE MODULE DROPDOWN LUI-MEME. Il porte la grille : .gi-megamenu et .gi-megamenu__inner de la maquette ont fusionne. Un niveau de DOM en moins que dans la maquette. 3. LE CRAN DE SPECIFICITE VIENT DU DOUBLAGE DE NOTRE PROPRE CLASSE. A specificite egale le CSS de page de Divi gagne, il vit en fin de . .gi-x.gi-x vaut (0,2,0) et designe le meme element quel que soit le DOM que Divi produit. -------------------------------------------------------------------------- / / --- B16.1 Le squelette de la barre --------------------------------------- / / Le decor de l'en-tete, les quatre equerres, se cale sur la SECTION. Divi pose position: relative sur ses lignes et ses colonnes : sans ce retour a static il se calerait sur la ligne. Ne jamais ajouter .et_pb_module a cette liste, les onglets comptent sur leur position: relative pour ancrer leur panneau. / .gi-header .et_pb_row, .gi-header .et_pb_column { position: static; } / La section d'en-tete n'a pas de respiration verticale : c'est une barre. Sans cela, les 56 px de --section-padding de Divi la font passer de 74 a 198 px. / .gi-header.gi-header { padding: 0; } / ET IL FAUT ALLER CHERCHER LE PERSONNALISATEUR DE DIVI. Mesure du 03/08/2026 : l'en-tete faisait 184 px au lieu de 76. La feuille `et-divi-customizer-` emet `.et-db #et-boc .et-l .et_pb_section { padding: 54px 0 }`, et son IDENTIFIANT `#et-boc` bat `.gi-header.gi-header`, qui n'a que deux classes. La regle du dessus ne servait donc a rien depuis le debut : elle ne battait que le defaut de Divi, pas le reglage d'espacement de section du theme. Ne pas la remplacer par `!important` : il faut simplement se hisser au meme niveau, une classe de plus que la regle a battre. / .et-db #et-boc .et-l .et_pb_section.gi-header { padding: 0; } /* -------------------------------------------------------------------------- LE VIGNETTAGE DE SECTION PASSAIT DEVANT LE CONTENU. Dans la maquette, `.gi-vignette::after` est en `z-index: 3` et le contenu passe au dessus par `.gi-section > .gi-container { z-index: 4 }`. Sous Divi il n'y a pas de `.gi-container` : c'est une `.et_pb_row`, en `z-index: auto`. Le voile se retrouvait donc DEVANT, et il assombrissait ce qui touchait le haut et le bas de la section — d'ou des portraits ternes en tete et en pied de grille, et eux seuls. Mesure du 03/08/2026. La ligne reprend ici le rang que la maquette donne au conteneur. Elle doit etre positionnee pour que le rang s'applique. -------------------------------------------------------------------------- / .et-db #et-boc .et-l .gi-vignette > .et_pb_row, .et-db #et-boc .et-l .gi-vignette--soft > .et_pb_row, .et-db #et-boc .et-l .gi-vignette--deep > .et_pb_row, .gi-vignette > .et_pb_row, .gi-vignette--soft > .et_pb_row, .gi-vignette--deep > .et_pb_row { position: relative; z-index: 4; } /* La ligne garde sa largeur, calculee par la partie B2 qui alimente les variables de Divi. NE PAS la forcer a 100 % : ce serait annuler le conteneur large et coller le logo au bord. Elle ne doit en revanche ajouter ni gouttiere verticale ni marge basse. / .gi-header .et_pb_row.et_pb_row { padding-block: 0; margin-block: 0; row-gap: 0; } / La ligne doit se comporter comme .gi-container--wide de la maquette : pleine largeur jusqu'a la largeur maximale, avec une gouttiere INTERIEURE. La partie B2 donne 92 % de large, ce qui centre la barre au lieu de la border : le logo se retrouvait 29 px trop a droite a 1760 px. / .gi-header .et_pb_row.gi-container--wide { --content-width: 100%; --content-max-width: var(--gi-container-wide); padding-inline: var(--gi-gutter); } .gi-header .et_pb_column.et_pb_column { width: 100%; max-width: none; padding: 0; margin: 0; row-gap: 0; } .gi-header .et_pb_module { margin-bottom: 0; } / La barre elle-meme. gi-accueil.css lui donne deja min-height, alignement et justification ; il ne manque que la direction, que Divi force en colonne, et la gouttiere, qu'il calcule avec ses propres variables. / .gi-headerinner.gi-headerinner { --flex-direction: row; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-6); width: 100%; } / Les trois couches d'enveloppe du module Lien, effacees UNIQUEMENT sur les liens qui doivent se comporter comme le de la maquette. Les liens en surcouche en sont exclus : eux gardent leur texte, masque plus bas. / .gi-nav__link .et_pb_link_inner, .gi-nav__link .et_pb_link_text, .gi-nav__link .et_pb_link_text > p, .gi-megamenu__link .et_pb_link_inner, .gi-megamenu__link .et_pb_link_text, .gi-megamenu__link .et_pb_link_text > p, .gi-drawer__lien .et_pb_link_inner, .gi-drawer__lien .et_pb_link_text, .gi-drawer__lien .et_pb_link_text > p, .gi-drawer__sub-lien .et_pb_link_inner, .gi-drawer__sub-lien .et_pb_link_text, .gi-drawer__sub-lien .et_pb_link_text > p { display: contents; } / LE PIEGE DE L'ENVELOPPE EFFACEE, mesure sur la repro. Un module Texte est un conteneur flex EN COLONNE, avec un row-gap de 30 px herite de --module-gutter. Tant que son contenu tient dans .et_pb_text_inner cela ne se voit pas : il n'y a qu'un enfant. Mais .gi-passthrough efface .et_pb_text_inner ET le
de wpautop : les morceaux de texte deviennent alors des elements de flex de plein droit, et les 30 px se glissent ENTRE EUX. Le nom du site et son suffixe « FR » se retrouvaient separes de 30 px, et le logo mesurait 88 px de haut au lieu de 34. Tout module Texte qui porte du contenu inline redevient donc un bloc. / .gi-logotext.gi-logotext, .gi-megamenulabel.gi-megamenulabel, .gi-megamenufeature-title.gi-megamenufeature-title, .gi-megamenufeature-desc.gi-megamenufeature-desc, .gi-megamenufeature-body .gi-tag, .gi-burger.gi-burger, .gi-drawertoggle.gi-drawertoggle, .gi-logomark.gi-logomark, .gi-corners.gi-corners { row-gap: 0; column-gap: 0; } / --- B16.2 Le logo -------------------------------------------------------- / / Divi n'enveloppe pas un groupe dans un : le logo est un groupe plus un module Lien en surcouche, motif deja valide sur les cartes d'article. / .gi-logo.gi-logo { --flex-direction: row; flex-direction: row; align-items: center; gap: var(--sp-3); position: relative; flex: none; width: auto; } / La marque est un module Texte en passthrough : la classe est sur le MODULE, le . Un cran de plus suffit a trancher. / .gi-megamenu > .gi-corners.gi-corners { position: absolute; inset: 0; margin: 0; } .gi-headercorners.gi-headercorners { position: absolute; inset: 7px 12px; margin: 0; } / --- B16.5 Colonnes et liens boucles -------------------------------------- / .gi-megamenucol.gi-megamenucol { --flex-direction: column; display: flex; flex-direction: column; row-gap: 0; margin: 0; min-width: 0; } / L'intitule de colonne : la classe est sur le module, le
est dedans et n'herite de rien. Meme correction que pour les titres de cartes en B10. / .gi-megamenulabel.gi-megamenulabel { display: block; margin-bottom: var(--sp-4); } .gi-megamenulabel > .et_pb_text_inner > p { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } .gi-megamenulinks.gi-megamenulinks { --flex-direction: column; display: flex; flex-direction: column; gap: 0; margin: 0; min-width: 0; } / Le lien boucle EST le : gi-accueil.css l'atteint deja par `.gi-megamenulinks a`. Il ne manque que la marge basse que Divi pose sur chaque module. / .gi-megamenulink.gi-megamenulink { margin: 0; width: auto; } / --- B16.6 La vignette : LA MEME CARTE QUE LA PAGE D'ACCUEIL -------------- Demande du 28/07, et c'est le bon reflexe : un seul gabarit de carte pour tout le site. `.gi-post--mega` n'est donc qu'un habillage, il ne redefinit aucun comportement. Tout ce que la carte d'article gagnera plus tard, la vignette le gagnera aussi, a commencer par le lien quand le jeton du permalien sera trouve. Ce que la variante change : une vignette plus haute que large, un titre plus petit, un chapo plus court et des espacements resserres. Le panneau fait 200 px de large, la carte de l'accueil en fait 380. / .gi-megamenufeature.gi-megamenufeature { margin: 0; min-height: 190px; } / La carte n'a pas .gi-card--paper : elle reste sur le fond d'encre de .gi-card. Le creme du parchemin, juste sous un panneau sombre, faisait tache et volait l'oeil aux deux colonnes de liens. / .gi-post--mega .gi-postthumb { aspect-ratio: 4 / 3; } .gi-post--mega .gi-postbody { padding: var(--sp-3); gap: 0.3rem; } .gi-post--mega .gi-posttitle { font-size: var(--fs-t-sm, 1rem); line-height: 1.25; / Le titre et le chapo sont ecrits pour du parchemin, en encre sombre. Sur le fond d'encre de la variante ils disparaissaient. / color: var(--gi-sand-50); } .gi-post--mega .gi-postexcerpt { font-size: var(--fs-xs); color: var(--gi-sand-300); } .gi-post--mega:hover .gi-posttitle { color: var(--gi-gold-200); } / La carte de l'accueil apparait au defilement. Dans un panneau qui n'est visible qu'au survol, l'observateur ne se declenche jamais et la carte resterait invisible. / .gi-post--mega.gi-reveal { opacity: 1; transform: none; } / --- B16.6 bis Une boucle vide ne doit pas parler ------------------------ Quand une boucle ne renvoie rien, Divi ecrit a la place `
Aucun resultat trouve.
` suivi d'un paragraphe d'explication. Dans une colonne de mega-menu c'est une faute d'affichage : le visiteur voit un message d'erreur de moteur de recherche a la place d'une liste de liens. Cas de figure ou ca arrive : identifiant de menu absent ou faux, ou menu WordPress vide. La colonne se tait, et le trou se voit assez pour qu'on aille corriger. / .gi-megamenulinks .entry, .gi-megamenulinks .not-found-title, .gi-drawersub .entry, .gi-drawersub .not-found-title { display: none; } / --- B16.6 ter Les trois liens d'icone en bout de barre ------------------ Discord, Twitch et Tipeee. Modules Texte et non modules Lien : le module Lien n'accepte que du texte et ne saurait pas porter le , nos feuilles sont dans le . .gi-x.gi-x vaut (0,2,0) et designe le meme element quel que soit le DOM que Divi produit. 2. LE MODULE LIEN EST LE , pas une enveloppe autour. Ses trois couches internes doivent sortir du flux pour les liens de colonne ; le lien du logo, lui, est en SURCOUCHE et garde son texte en masquage accessible. D'ou deux traitements explicites et non une regle attrape-tout. 3. UN MODULE TEXTE EST UN FLEX EN COLONNE avec 30 px de row-gap. Tout module qui porte du contenu inline remet ses gouttieres a zero et redevient un bloc, sinon les 30 px se glissent dans son contenu. 4. NE JAMAIS POSER DE PSEUDO-ELEMENT sur un element qui porte .gi-grain ou .gi-vignette--soft : leur effet entier y vit. La section du pied de page porte LES DEUX, ::before et ::after sont pris, il n'en reste aucun. CE QUE LA MESURE COUVRE, ET CE QU'ELLE NE COUVRE PAS. Chaque regle de cette partie a ete cassee volontairement, une par une, pour verifier que mesure_pied.js la voit tomber. Trois enseignements, a garder si la partie evolue : - Trois regles se sont revelees INERTES et ont ete retirees plutot que gardees « au cas ou » : elles auraient fait croire a un piege qui ne se produit pas ici. - Le trait de separation du bas et le z-index des lignes ne deplacent aucune boite. Ils ne sont couverts que parce que mesure_pied.js lit explicitement border-top et z-index. Toute regle du meme genre ajoutee ici sort du champ de la verification tant qu'on ne lit pas sa propriete. - Les reprises de DIRECTION et de GOUTTIERE sont des filets, pas des correctifs : dans la repro, gi-accueil.css gagne deja. Elles tiennent le jour ou la feuille de Divi passe apres la notre, ou ou quelqu'un touche au reglage depuis le Builder. Les retirer ne fait rien bouger ici, et ce n'est pas une raison de le faire. ========================================================================== / / --- B17.1 Le squelette --------------------------------------------------- / / La section n'a aucune respiration propre : ce sont ses deux lignes qui la donnent, comme les deux conteneurs de la maquette. Sans ce zero, les 56 px de --section-padding de Divi s'ajoutent en haut et en bas. / .gi-footer.gi-footer { padding: 0; } / Le grain est en ::before au z-index 2, le vignetage en ::after au 3. La maquette fait repasser le contenu au-dessus avec « .gi-vignette--soft > .gi-container » ; en Divi le conteneur est la LIGNE, qui ne porte pas cette classe. Sans cette reprise, le texte du pied de page se salit sous le vignetage. / .gi-footer > .et_pb_row { position: relative; z-index: 4; } / Les deux lignes se comportent comme .gi-container--wide de la maquette : pleine largeur jusqu'a la largeur maximale, avec une gouttiere INTERIEURE. La partie B2 donne 92 % de large, ce qui centrerait le bloc au lieu de le border, et decalerait le logo vers la droite sur grand ecran. / .gi-footer .et_pb_row.et_pb_row { padding-block: 0; margin-block: 0; row-gap: 0; } .gi-footer .et_pb_row.gi-container--wide { --content-width: 100%; --content-max-width: var(--gi-container-wide); padding-inline: var(--gi-gutter); } .gi-footer .et_pb_column.et_pb_column { width: 100%; max-width: none; padding: 0; margin: 0; row-gap: 0; } / Les ecarts viennent des gouttieres de groupe, jamais de la marge basse que Divi pose sur chaque module. L'intitule de colonne reprend la sienne plus bas, avec le cran de specificite qu'il faut. / .gi-footer .et_pb_module { margin-bottom: 0; } / --- B17.2 Le bloc haut --------------------------------------------------- / / LA MARQUE A GAUCHE, LES DEUX COLONNES CALEES A DROITE. La seconde piste est en `auto` : elle se dimensionne sur son contenu, et tout l'espace restant va a la premiere. Divi ne sait poser que des colonnes egales, le NOMBRE reste donc un reglage du Builder et les PROPORTIONS sont ecrites ici. gi-accueil.css les pose deja, mais en (0,1,0), et le CSS de page de Divi gagne a specificite egale. Cout en editabilite, annonce : passer le bloc haut sur une seule colonne se fait toujours depuis le Builder, changer les proportions se fait ici. / .et_pb_group.gi-footer__top { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); align-items: start; padding-block: var(--sp-8) var(--sp-6); } @media (max-width: 900px) { .et_pb_group.gi-footertop { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); } } .gi-footerbrand.gi-footer__brand { --flex-direction: column; flex-direction: column; align-items: flex-start; gap: var(--sp-5); min-width: 0; } / Le logo du pied de page. Les regles de fond sont en B16.2 et ne dependent pas de l'emplacement ; il ne manque ici que la remise a zero de la marge basse, que la partie B17.1 donne deja, et le rappel que son degrade porte un id SUFFIXE. Deux fois le meme id dans la page et le second logo perd son degrade : voir gifr_entete.logo(). / .gi-footersocial.gi-footersocial { --flex-direction: row; flex-direction: row; gap: var(--sp-2); width: auto; margin: 0; } / Chaque icone est un module Texte en passthrough : la classe est sur le MODULE, le est dedans. Meme traitement qu'en B16 pour .gi-navico. / .gi-footerico.gi-footerico { display: flex; align-items: center; flex: none; margin: 0; row-gap: 0; column-gap: 0; } / Correction optique reprise de B16 : la marque Discord est large et basse, le coeur presque carre. A boite egale le coeur pese plus lourd a l'oeil. / .gi-icon-btn.gi-footerico--tipeee svg { width: 17px; height: 17px; } .gi-icon-btn.gi-footer__ico--discord:hover { color: #fff; background: rgba(88, 101, 242, 0.22); box-shadow: inset 0 0 0 1px rgba(88, 101, 242, 0.85), 0 0 22px -6px rgba(88, 101, 242, 0.7); } / --- B17.3 Les deux colonnes de liens ------------------------------------- / / Meme raison qu'en B17.2 : gi-accueil.css replie ces colonnes a 620 px, une largeur qui n'est PAS un point de rupture de Divi. Une media query n'ajoute rien a la specificite : ses regles pesent (0,1,0) et perdent contre le CSS de page. Au-dessus de 620 px le nombre reste un reglage du Builder, lu dans --column-count. En dessous, il est ecrit ici. La largeur maximale de 220 px n'est pas un caprice : sans elle, les deux colonnes se partageraient toute la moitie droite du pied de page et les libelles se perdraient dans le vide. / .et_pb_group.gi-footer__cols { grid-template-columns: repeat(var(--column-count, 2), minmax(0, 220px)); gap: var(--sp-8); min-width: 0; } / 620 px et non 860 : c'est le palier de gi-accueil.css, verifie ligne a ligne dans la feuille et non deduit du bloc voisin. Se tromper de bloc de media query donne un repli qui a l'air juste a toutes les largeurs sauf une, et la premiere version de cette partie s'y est laissee prendre. / @media (max-width: 620px) { .et_pb_group.gi-footercols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } } / Ne PAS aligner les enfants sur flex-start ici, contrairement au bloc de marque et a la liste de liens : l'intitule se retrecirait a la largeur de son texte au lieu de tenir toute la colonne, et sa lettre espacee cesserait de servir de reglure. L'etirement par defaut est le bon, il n'y a donc rien a ecrire : le redire explicitement s'est revele sans effet a la mutation. / .gi-footercol.gi-footer__col { --flex-direction: column; flex-direction: column; row-gap: 0; min-width: 0; } / L'intitule n'est PAS un module en passthrough : il garde son .et_pb_text_inner, donc un seul enfant, donc rien entre quoi les 30 px de gouttiere pourraient se glisser. Le piege du contenu inline ne s'applique pas ici, et le verifier a evite trois lignes qui auraient laisse croire le contraire. Il ne manque que sa marge basse, qui doit repasser devant le margin-bottom: 0 de la partie B17.1, de meme poids. / .gi-footerlabel.gi-footerlabel { margin-bottom: var(--sp-4); } / LES
N'EXISTENT PLUS. L'ecart de 0,55 rem que gi-accueil.css donne par « li + li » n'a plus rien a cibler : il devient une gouttiere de groupe. / .gi-footerlinks.gi-footerlinks { --flex-direction: column; flex-direction: column; row-gap: 0.55rem; column-gap: 0; align-items: flex-start; min-width: 0; } / Le module Lien EST le . Ses trois couches internes sortent du flux, sans quoi la mise en forme du ne s'appliquerait qu'a une enveloppe. Le lien du logo est exclu de cette liste : lui est en surcouche et garde son texte, masque en B16.2. / .gi-footer__lien .et_pb_link_inner, .gi-footer__lien .et_pb_link_text, .gi-footer__lien .et_pb_link_text > p { display: contents; } / Dans la maquette le lien est un EN LIGNE dans un
: sa boite fait la largeur du texte, et le padding-left du survol le decale de 0,3 rem sans elargir la colonne. Divi pose display: block sur .et_pb_link, ce qui l'etirerait sur toute la colonne et donnerait une zone de clic qui deborde loin a droite du libelle. Le align-items: flex-start du groupe ci-dessus suffirait ; width tient aussi si quelqu'un change l'alignement depuis le Builder. / .gi-footerlien.gi-footerlien { display: block; width: fit-content; max-width: 100%; margin: 0; } / --- B17.4 La barre du bas ------------------------------------------------ / / LE TRAIT DE SEPARATION APPARTIENT A LA LIGNE, PAS AU GROUPE. Dans la maquette c'est .gi-footerbottom qui EST le conteneur : sa bordure haute court donc sur toute la largeur, gouttieres comprises. En Divi le conteneur est la ligne et .gi-footerbottom est le groupe a l'interieur : laisser la bordure sur le groupe la raccourcirait d'une gouttiere a chaque bout. Doublage de classe pour repasser devant le padding-block: 0 de la partie B17.1, qui cible « .gi-footer .et_pb_row.et_pb_row » et pese le meme poids. / .gi-footer .et_pb_row.gi-footerbottom-row.gi-footerbottom-row { border-top: 1px solid var(--gi-line-soft); padding-block: var(--sp-5); } .gi-footerbottom.gi-footerbottom { --flex-direction: row; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); width: 100%; / gi-accueil.css les pose sur ce bloc ; ils vivent desormais sur la ligne. / border-top: 0; padding-block: 0; } / Meme palier que la grille des colonnes, 620 px, et pour la meme raison. / @media (max-width: 620px) { .gi-footerbottom.gi-footerbottom { --flex-direction: column; flex-direction: column; align-items: flex-start; } } / ========================================================================== B18. LES GABARITS D'ARCHIVE Deux gabarits de corps du Theme Builder, `gifr-archive.json` et `gifr-archive-auteur.json`, generes par `divi/generateur/gen_archive.py`. Le dessin de reference est `archive.html`, sa feuille est `gi-archive.css` et elle se charge sur tout le site, comme `gi-accueil.css`. CETTE PARTIE NE REDESSINE RIEN. Elle ne fait que trois choses, dans cet ordre : rendre a la grille et aux conteneurs le `display` que Divi leur a pris, redonner aux titres et aux paragraphes la typographie de leur module, et replier proprement les jetons qui ne resolvent pas. Ce qu'elle NE reprend PAS, volontairement : les `grid-template-columns` et tout ce que `gi-archive.css` fait varier par palier. Les figer ici les figerait a toutes les largeurs, c'est le piege 7. NOTE SUR LES SELECTEURS. `gi-archive.css` est deja ecrite pour les deux DOM : elle vise `.gi-arch-grid > :first-child` et non `> li:first-child`, parce que la boucle duplique la carte elle-meme et qu'il n'y a pas de
sous Divi. Rien a redire ici sur la vedette : elle marche telle quelle. -------------------------------------------------------------------------- / / --- Conteneurs ---------------------------------------------------------- Meme doctrine qu'en B10 : le cran de specificite vient du doublage de notre propre classe, jamais d'une classe de Divi. LES TROIS PREMIERES REGLES SE DONNENT POUR INERTES A LA CASSE, ET ELLES RESTENT. C'est le seul endroit de cette partie ou la mesure ne fait pas autorite, et il faut savoir pourquoi : - `display: grid` est couvert, dans la repro, par gi-archive.css qui se charge apres gi-divi.css et gagne a specificite egale sur `.et_flex_group { display: flex }`. SUR LE SITE REEL le CSS que Divi genere pour la page vit en FIN DE BODY : a specificite egale, c'est lui qui gagne. Le doublage de classe est exactement ce qui remet nos regles devant, et la repro ne sait pas le montrer. B10 dit la meme chose pour `.gi-news__grid`, contre le rendu reel. - les deux regles de direction sont couvertes, dans la repro, par le reglage de direction que `gen_archive.py` pose dans le Builder. C'est la voie propre, celle qui reste editable, et c'est bien elle qui fait le travail au repos. Ces deux regles sont le filet decrit en B1 : elles tiennent le jour ou quelqu'un rouvre le groupe et change sa direction a la souris. Une mesure ne verra jamais ca tomber, par construction. Le reste de la partie, lui, a ete casse une par une et vu tomber. / / SEULEMENT `display`. Le gap est dans gi-archive.css, qui le fait passer de --sp-4 a --sp-5 sous 760 px. L'ecrire ici le figerait a toutes les largeurs : c'est le piege 7, et la mesure l'a effectivement attrape. / .gi-arch-grid.gi-arch-grid { display: grid; } .gi-arch-headinner.gi-arch-headinner, .gi-arch-bar.gi-arch-bar, .gi-author.gi-author { flex-direction: row; } .gi-arch-headinner > , .gi-arch-bar > , .gi-author > { --flex-direction: column; } .gi-arch-headtext.gi-arch-headtext, .gi-authorbody.gi-authorbody { display: flex; flex-direction: column; gap: 0; } /* Le partage de l'en-tete, la largeur du bloc de titre, l'alignement et l'ecart entre les deux vivent tous dans gi-archive.css, en flex, et valent pour les deux DOM. B18 ne reprend donc que la DIRECTION, ci-dessus : c'est la seule chose que Divi impose. On avait aussi repose `align-items`, la casse l'a montre inerte, il est parti. / / Divi pose une marge basse sur chaque module. Elle n'existe pas dans la maquette : on l'annule sur les deux sections, puis on repose les seuls ecarts qui y sont vraiment. Annulation d'abord, ecarts ensuite. / .gi-arch-head, .gi-arch-head , .gi-arch-body, .gi-arch-body * { margin-bottom: 0; } /* PAS DE MARGE REPOSEE ICI, ET C'EST UNE DIFFERENCE AVEC B10. La partie B10 annule les marges de module puis repose les cinq que la maquette avait vraiment. Ici, les deux qu'on avait reposees, `.gi-arch-bar` en bas et `.gi-arch-headornament` en haut, se sont averees INERTES a la casse : gi-archive.css les declare deja et se charge APRES gi-divi.css, elle gagne donc a specificite egale. Elles sont retirees. / / --- L'ornement du titre -------------------------------------------------- `.gi-arch-headornament` est un conteneur en ligne qui porte deux pseudo-elements de filet et une etoile. Sous Divi c'est un module Texte, donc un flex en COLONNE : les deux filets partiraient chacun sur sa ligne. Meme correction qu'en B3 pour l'etoile de section. / .gi-arch-headornament.gi-arch-headornament { --flex-direction: row; flex-direction: row; align-items: center; gap: 0.7rem; } / --- Les titres et les paragraphes ont perdu leur classe ------------------ Meme piege qu'en B10 : la classe est sur le MODULE, l'element ecrit a la main a l'interieur n'en porte aucune. / .gi-arch-headtitle :is(h1, h2, h3), .gi-authorname :is(h1, h2, h3) { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: inherit; margin: 0; padding: 0; } / GARDEE SANS PREUVE, et c'est dit. La casse la donne pour inerte : un
n'a pas de taille propre a annuler, contrairement a un
, et gi-tokens lui a deja retire sa marge. Mais c'est la jumelle exacte de la regle de B10, qui, elle, a ete ecrite contre le rendu reel du site, et la repro ne voit pas la typographie que Divi pose sur ses propres
. On la garde jusqu'au premier controle sous Firefox, ou elle se tranchera pour de bon. / .gi-arch-barlabel p, .gi-authorrole p, .gi-authorname p, .gi-authorbio p { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; } / --- Le ruban « A la une » ------------------------------------------------ C'est un module Texte marque `.gi-passthrough` : son enveloppe interne disparait et le module lui-meme porte l'etiquette. Il est en position absolue dans la vignette, comme l'etiquette de categorie en B10. / / UNE SEULE LIGNE, ET IL A FALLU DEUX PASSES POUR LE SAVOIR. On en avait ecrit deux : celle-ci, et un `display: inline-flex; flex-direction: row; width: auto` sur la vedette. Cassees UNE A UNE, les deux se donnaient pour inertes, chacune etant couverte par l'autre. Cassees ENSEMBLE, le ruban tombe en colonne et perd seize pixels de large. Lecon, et elle vaut pour tout le projet : casser une regle a la fois ne suffit pas quand deux regles se recouvrent, elles se rassurent l'une l'autre. Ici on garde la plus generale, qui vaut pour toutes les cartes, et la seconde est partie. / .gi-postfeat.gi-postfeat { --flex-direction: row; } / --- Le repli des jetons qui ne resolvent pas ----------------------------- Trois jetons de ce gabarit ne sont pas constates : la categorie par article, l'avatar du redacteur et sa biographie. Un jeton mal nomme rend une chaine vide, il ne casse rien, mais une etiquette vide est un rectangle pose sur la vignette et un avatar sans source est un carre casse. L'etiquette est deja traitee en B10, la regle vaut ici sans rien ajouter. Restent l'avatar et la bio, qui se replient de la meme facon. Ces regles ne sont pas des rustines a retirer une fois les bons jetons trouves : un redacteur sans photo ni biographie n'en aura pas non plus, et c'est le comportement voulu. / / NON MESUREES. La chaine de verification compare `gifr-archive.json`, le gabarit de categorie, qui n'a pas de bloc redacteur. Ces deux regles ne sont donc ni prouvees ni infirmees : elles se controleront a l'oeil sur une archive d'auteur reelle, apres import. / / `src="/"` ET NON `src^="http"`, ET LA NUANCE COMPTE. Une URL d'avatar peut commencer par `https://`, par `/wp-content/`, ou par `//` pour Gravatar : trois debuts differents pour la meme chose. Chercher une barre oblique QUELQUE PART couvre les trois, et ne couvre pas le cas qu'on veut exclure, un jeton qui n'a pas resolu et qui rend une chaine vide ou son propre nom. La version precedente, en `^=`, etait plus etroite que necessaire : elle pouvait masquer un avatar parfaitement valide, ce qui donne exactement le meme symptome qu'un jeton faux et rend le diagnostic impossible. / .gi-authoravatar:not(:has(img[src="/"])) { display: none; } .gi-author__bio:has(p:empty) { display: none; } / --- La pagination -------------------------------------------------------- `wp:divi/post-nav`, constate dans un export reel le 29/07. Il vise sa boucle par `targetLoop` et se pose HORS du conteneur boucle. SON BALISAGE INTERNE N'A PAS ENCORE ETE LU SUR UNE PAGE PUBLIEE. Les deux regles ci-dessous sont ecrites pour n'en rien supposer : - la premiere rend au module lui-meme la mise en page que `.gi-pagination` porte dans la maquette. Sans elle, le groupe n'aurait qu'UN enfant, le module, et son `justify-content: space-between` ne separerait rien ; - la seconde DISSOUT ce que le module met entre lui et ses liens, quel que soit ce quelque chose. `display: contents` fait disparaitre une enveloppe du flux sans toucher a son contenu : les liens deviennent enfants de flex de plein droit, que Divi les enveloppe dans des , des
ou rien du tout. C'est la meme mecanique que `.gi-passthrough` en B1, appliquee a un balisage qu'on ne connait pas encore plutot qu'a un qu'on connait. A resserrer quand le DOM aura ete lu. / .gi-pagination > .et_pb_post_nav { display: flex; flex: 1; flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-4); margin: 0; } .gi-pagination > .et_pb_post_nav > :not(a) { display: contents; } /* Le module doit suivre le palier que gi-archive.css pose sur le conteneur : sous 620 px les deux liens passent l'un sous l'autre. Sans ce rappel, la regle ci-dessus figerait la ligne a toutes les largeurs, et c'est le piege 7. La mesure l'a attrape a 620 px. / @media (max-width: 620px) { .gi-pagination > .et_pb_post_nav { flex-direction: column; align-items: stretch; } } / --- CE QUI MANQUE ENCORE, ET QUI N'EST PAS UN OUBLI ---------------------- 1. LE BALISAGE INTERNE DE `post-nav`. Le module est en place, ses liens sont habilles, sa mise en page est rendue au groupe. Reste a LIRE son DOM sur une archive publiee et a resserrer les deux regles ci-dessus, qui sont volontairement larges. 2. L'ARCHIVE VIDE. Divi ecrit lui-meme « Aucun resultat trouve » a la place d'une boucle vide. Notre bloc `.gi-arch-empty` ne peut pas vivre dans le gabarit : il s'afficherait aussi sur les archives pleines. La bonne reponse est d'HABILLER le message de Divi, ce qui demande de connaitre sa balise et sa classe. A relever sur une archive vide reelle. Les deux se lisent sur une archive publiee, a l'oeil, en trente secondes. / / -------------------------------------------------------------------------- B19. PAGE DES LIVES Deux sections, un bandeau de titre et la scene, et deux pieces rapportees dans des iframes tierces : le lecteur Twitch et le chat WidgetBot. Ce que cette partie fait, et pourquoi elle existe malgre gi-live.css : la maquette pose ses regles sur des elements qui, en Divi, sont des MODULES. Un module est un conteneur flex en colonne par defaut, il porte les gouttieres de Divi, et le CSS de page de Divi vit en fin de body, donc gagne toute egalite de specificite. Les reprises ci-dessous sont ecrites en classe doublee quand il faut gagner ce duel. -------------------------------------------------------------------------- / / --- B19.0 L'enveloppe des raccourcis ------------------------------------ Trois modules de cette page ne contiennent qu'un raccourci `[gifr_live]`, enveloppe dans un `
`. L'enveloppe existe pour wpautop, qui s'execute AVANT les raccourcis et met dans un
tout contenu qui ne commence pas par une balise de bloc : un raccourci nu se retrouvait dans un
que le navigateur cassait ensuite en rencontrant le
rendu, et le DOM final ne ressemblait plus a ce qu'on croyait avoir ecrit. `display: contents` la fait disparaitre a l'affichage, sans quoi elle s'interposerait entre le module et son contenu -- ce qui, sur cette page, casserait la grille du panneau d'horaire et la pile du lecteur. ATTENTION, ELLE RESTE VISIBLE DES SELECTEURS. `display: contents` ne change rien au parcours du DOM : un `>` ne la traverse pas. C'est pour ca que gi-live.css a du passer ses regles d'iframe en descendant. / .gi-dyn { display: contents; } / --- B19.1 La largeur de la scene ---------------------------------------- La scene va jusqu'aux bords, la maquette le fait avec `max-width: none` sur son conteneur. En Divi la largeur de la ligne vient de DEUX variables, et `--content-width` valait encore 92 % : sans cette reprise, la scene perdait 8 % de large sans qu'aucune regle a nous ait ete perdue. Le mode normal, pose par `data-etroit` sur , rend la laisse de 1760 px. Les gouttieres sont celles de Divi dans ce mode : la ligne se centre avec ses 92 %, exactement comme les autres pages du site. / .gi-live > .et_pb_row.gi-container--wide { --content-width: 100%; --content-max-width: none; padding-inline: clamp(0.75rem, 0.4rem + 0.6vw, 1.25rem); } body[data-etroit] .gi-live > .et_pb_row.gi-container--wide { --content-width: 92%; --content-max-width: 1760px; padding-inline: 0; } / --- B19.2 La grille de la scene ----------------------------------------- ELLE NE PEUT PAS ETRE NATIVE. La grille de Divi fait N colonnes egales ; celle-ci fait `minmax(0, 1fr)` puis une colonne fixe. Elle reste donc en CSS, et en CLASSE DOUBLEE pour passer devant le CSS de page de Divi, qui mettrait le groupe en flex. LA MEDIA QUERY DOIT ETRE REPRISE ICI AUSSI, et c'est le piege : la regle a deux classes gagnerait sur la regle a une classe de gi-live.css, y compris sous 1080 px, et le chat resterait en deuxieme colonne sur mobile. Meme piege que le pied de page. / .gi-live-stage.gi-live-stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--gi-live-chat-w); align-items: stretch; / PAS DE `margin-inline: auto` ICI, et c'est le meme piege qu'en B15 pour la section Discord. Divi met chaque colonne en flex : une marge automatique sur l'axe transversal d'un conteneur flex DESACTIVE l'etirement de l'element, qui retombe alors sur la largeur de son CONTENU. Mesure : la scene tombait de 1726 a 933 px, soit la largeur intrinseque du lecteur plus celle du chat, et se retrouvait centree dans un vide. La maquette, elle, a besoin de cette marge : son conteneur est un bloc, pas un flex. On l'annule donc ici, et on centre avec `align-self`, qui centre sans toucher au dimensionnement. / margin-inline: 0; align-self: center; width: 100%; } @media (max-width: 1080px) { .gi-live-stage.gi-live-stage { grid-template-columns: minmax(0, 1fr); } } / --- B19.3 Les composants en ligne --------------------------------------- Filet de securite du piege numero un : Divi ecrit --flex-direction: column sur chaque module et chaque groupe. Ces quatre-la sont en ligne par nature et ne doivent jamais basculer, quelle que soit la main qui edite la page. Le generateur pose deja la direction en natif sur les groupes ; on alimente ici la variable de Divi, ce qui laisse le reglage du Builder prioritaire. / .et_pb_module.gi-live-bar, .et_pb_module.gi-live-bar__tools { --flex-direction: row; } / --- B19.4 Les gouttieres et les marges de Divi -------------------------- AUCUNE REGLE DE GAP ICI, ET C'EST DELIBERE. Le premier jet mettait `row-gap: 0; column-gap: 0` sur tous les modules des deux sections : ca effacait aussi les quatre `gap` que gi-live.css declare vraiment, et l'interieur du bandeau perdait ses 48 px de gouttiere. Les gaps sont desormais decides module par module par le generateur, et la feuille ne s'en mele plus. Restent les MARGES. Divi pose `margin-bottom: --module-gutter` sur chaque module ; la partie B1 l'annule pour les enfants d'un groupe, mais pas pour le groupe de tete, celui qui est enfant direct de la colonne. Sans cette reprise, la scene finissait 30 px plus bas que la maquette. / .gi-live .et_pb_column > .et_pb_module { margin-bottom: 0; } / --- B19.5 Le titre de la page, dans la barre du lecteur ------------------ LE
DE LA PAGE EST DANS UN COMPOSANT depuis le 30/07 : le bandeau d'en-tete a ete retire, et le titre de la barre du lecteur a pris le relais. Une page sans titre de niveau 1 est un trou pour le referencement. La remise a plat est faite dans gi-live.css, sur `.gi-live-bartitle` lui-meme, et non ici : la classe est portee par le
, pas par un ancetre, donc une seule classe suffit a battre le `h1 { padding-bottom: 10px }` du theme. Mesure : sans elle, la barre passait de 44 a 54 px de haut et poussait le lecteur de 10 px. CE QUI RESTE ICI est ce que gi-live.css ne peut pas dire, parce que ca depend du DOM de Divi : le pied de panneau du chat, et le padding de paragraphe du theme. / .gi-live-chatfoot p { margin: 0; padding: 0; font: inherit; color: inherit; line-height: inherit; } / LE PADDING DE PARAGRAPHE DU THEME, ET IL FAUT LE DIRE POUR TOUTE LA SECTION. Divi pose `p { padding-bottom: 1em }` et ne l'annule que sur le dernier
de son type. Chaque module qui rend plusieurs paragraphes gagnait donc 16 px sous chacun sauf le dernier : le titre du chat decolle de son sous-titre, le cadre d'attente de son explication, la barre du lecteur de sa ligne de meta. Mesure : la barre passait de 54 a 67 px de haut et la scene de 814 a 827. `:last-of-type` SE COMPTE PAR RAPPORT AU PARENT, et c'est ce qui rendait le symptome irregulier : deux
dans une enveloppe en `display: contents` ont cette enveloppe pour parent, pas le module. LES TITRES SONT INCLUS depuis que le
de la page vit dans la barre du lecteur : le theme leur pose le meme padding. Reprise en bloc pour toute la section plutot que composant par composant : la maquette ne pose AUCUN padding de paragraphe, et cette section ne contient que nos composants. Un paragraphe ajoute demain sera juste tout seul. Les espacements voulus viennent des `gap` et des `margin-top` de gi-live.css, jamais d'un padding herite. / .gi-live p, .gi-live :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; } / LES DEUX PIEDS DE PANNEAU SONT DE VRAIS PARAGRAPHES, et la partie B1 les efface : elle met en `display: contents` tout
enfant direct d'une enveloppe de module a `gi-passthrough`, ce qui est fait pour le
ajoute par wpautop autour d'un contenu inline. Ici ce sont des paragraphes ecrits, et le chat a besoin qu'ils restent des elements de flex pour se poser sous le cadre. On leur rend leur boite, avec un cran de specificite de plus. / .gi-live-chat [class="_inner"] > p.gi-live-chatfoot { display: block; } /* --- B19.6 Le lecteur ---------------------------------------------------- Le module porte `.gi-live-player`, donc le format 16:9 et le rognage. Divi met tous ses modules en flex : les deux substituts qu'il contient sont en position absolue, la direction n'a donc aucune importance, mais un `min-height` implicite de flex pourrait etirer la boite. On la fige. / .gi-live-player.gi-live-player { display: block; } / --- B19.7 Le chat ------------------------------------------------------- Le panneau est un module, et c'est lui qui doit remplir la colonne : sans `flex: 1 1 auto` il s'arreterait a la hauteur de son texte et laisserait un trou de 250 px sous les messages. gi-live.css le dit deja, en une classe ; le CSS de page de Divi pose un `flex` sur les modules et gagnerait. / .gi-live-chat.gi-live-chat { flex: 1 1 auto; min-height: 0; } / Le cadre de chat ne mesure jamais son contenu : c'est la condition pour que le lecteur garde son format. Rappele ici en classe doublee pour la meme raison que ci-dessus. / .gi-live-chatframe.gi-live-chatframe { flex: 1 1 0; min-height: 16rem; } / ========================================================================== B20. PAGE D'ATTENTE « EN RECONSTRUCTION » La maquette de cette page n'a demande AUCUNE regle neuve : elle est montee sur `.gi-cta` (section, fond, particules) et `.gi-arch-empty` (le panneau, ecrit a l'origine pour l'archive vide). Ce bloc-ci n'est pas du dessin, c'est de la RECONCILIATION : il dit ce que le DOM de Divi ajoute et que la maquette n'a pas. Meme role que B19.5 pour la page des lives. La section porte `gi-recons`, un crochet sans style ailleurs : c'est aussi la clef de la table `FONDS` de gi-ui.js, qui lui pose son canevas de poussieres. ========================================================================== / / B20.1 LA LARGEUR DE LIGNE. La partie 4 impose `max-width: 46em !important` a toute ligne dans une `.gi-cta` : c'est la mesure de l'appel communaute de l'accueil, qui n'a pas de panneau. Ici la maquette borne `.gi-ctainner` a 720 px. Un cran de specificite de plus, et les deux pages tombent au meme pixel. / .gi-recons .et_pb_row { max-width: 720px !important; } / B20.2 LA MARGE DU GROUPE DE TETE. Divi pose `margin-bottom: 30px` sur chaque module ; la partie B1 l'annule pour les enfants d'un groupe, mais pas pour le groupe qui est enfant direct de la colonne. Exactement le meme oubli que B19.4 sur la page des lives, ou la scene finissait 30 px trop bas. / .gi-recons .et_pb_column > .et_pb_module { margin-bottom: 0; } / B20.3 LE BOUTON NE SUIT PAS UN PARAGRAPHE, IL SUIT UN PANNEAU. La partie 2 pose `margin-top: var(--sp-7)` sur tout bouton qui suit un module Texte dans une `.gi-cta`, faute de pouvoir grouper les modules la-bas. Ici le panneau gere ses ecarts au `gap`, et `.gi-arch-empty .gi-btn` a son propre `margin-top`. Les 40 px de trop tombent. / .gi-recons .et_pb_text + .et_pb_button_module_wrapper { margin-top: 0 !important; } / B20.4 LE PADDING DE TITRE ET DE PARAGRAPHE DU THEME, en bloc pour toute la section. Meme raisonnement qu'en B19.5 : la maquette n'en pose aucun, cette section ne contient que nos composants, et les ecarts voulus viennent du `gap` de `.gi-arch-empty`. Sans cette ligne le titre gagne 10 px et chaque paragraphe sauf le dernier en gagne 16. / .gi-recons p, .gi-recons :is(h1, h2, h3, h4, h5, h6) { padding-bottom: 0; } / B20.5 L'INTERLIGNE DU TITRE, ET C'EST LE SEUL ECART QU'ON N'AVAIT PAS PREVU. Dans la maquette, `.gi-arch-emptytitle` EST le titre : il recoit donc le `line-height: var(--lh-snug)` que gi-tokens.css donne a tout
a
. En Divi la classe est sur le MODULE, et le
a l'interieur prend `line-height: inherit` -- donc celui du corps de page, 1,65 au lieu de 1,28. Mesure : le titre passait de 25,6 a 33 px de haut, et le panneau entier de 396 a 405. Pose sur `.gi-recons` et non sur `.gi-arch-emptytitle` seul : la meme classe sert a l'archive vide, ou le titre est un
et doit garder l'interligne du corps. On ne corrige que la page qui en a besoin. */ .gi-recons .gi-arch-empty__title { line-height: var(--lh-snug); }