[Astuce] SOLUTION : cassiopeia colonne avec background 100% en bottom-b

[altacrea]

Bonjour, je partage cette solution qui m'aura pris du temps à trouver.
C'est un peu bricolage mais ça marche. Si vous avez mieux...

Joomla 4
Cassiopeia en mode colonne

Image 1 :
les 2 modules "Articles les plus anciens" et "tags populaires" sont en position bottom-b.




Image 2 : rien a changé sauf le background 100% rouge.C'est ce que je voulais depuis des jours!!!!!! ouf



La règle à rajouter au user.css

.grid-child.container-bottom-b {
background: red;
box-shadow: 0 0 0 100vmax red;
clip-path: inset(0 -100vmax);
display: inline-flex
}

Voilà

[tataye]

comme dit sur un autre support : cette solution est correcte si tu dois mettre une couleur
pour un dégradé ou une image ce ne sera pas bon, et tu devras sortir ta div de la div parente dans index.php

[altacrea]

comme dit sur un autre support : cette solution est correcte si tu dois mettre une couleur
pour un dégradé ou une image ce ne sera pas bon, et tu devras sortir ta div de la div parente dans index.php

Ma solution est sans toucher à l'index.php

Si tu as mieux....

[daneel]

Si tu as mieux....

Je ne sais pas si c'est mieux, mais voici une alternative...

.container-bottom-b::before {
   content: '';
   position: absolute;
   top: 0;
   right: 50%;
   background: red;
   width: 100vw;
   transform: translateX( 50%);
   height: 100%;
}

L'avantage avec cette solution, je peux créer des dégradés, insérer une image en fond....
Testé avec chrome et firefox avec le contenu d'exemple sous Joomla.

On peut écrire cette css dans le fichier user.css

[altacrea]

cool l'astuce du before. Bien joué, merci