[RÉGLÉ] Cassiopeia : largeur des sidebars

[PhMi]

En local pour l'instant, j'ai réussi à reconstituer, presque à l'identique, la présentation de mon site en passant de Gantry 4 à Cassiopleia.

Je voudrais maintenant, avec le template Cassiopleia en option "fluide", réduire la largeur relative des sidebars et augmenter d'autant la partie centrale : est-ce possible … relativement facilement ?

Merci d'avance.

[JBNCRAV]

Bonjour,
avez vous pu regler votre problème de modification de la largeur des sidebar sur cassiopéia?
si oui comment avez vous fait?
Merci d'avance pour votre réponse.
Bonne journée.
JBNCRAV

[PhMi]

Bonjour JBNCRAV,

Non, je n'ai pas trouvé comment faire … hélas.

Bonne année … quand même !

[woluweb]

Logiquement, cela devrait se faire assez facilement juste avec un peu de css vu que cassiopeia est basé CSS Grid.
Je vais essayer de regarder ça et de l ajouter à la presentation Cassiopeia que je vais faire jeudi soir de la semaine d après pour le Joomla User Group New Jersey...

[JBNCRAV]

Super merci, je suis a votre disposition pour tester.
Bon dimanche.
JBNCRAV

[woluweb]

Voilà, je pense avoir trouvé :

Scénario 1 : quand le template Cassiopeia est en mode fluide

Ce qui détermine les colonnes est

body.wrapper-fluid .site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,25%)) [main-end] 100px [full-end]
}

Du coup, mettre dans le fichier user.css (dans le dossier /css/ du template Cassipeia) le même bloc, mais en remplaçant

repeat(4,minmax(0,25%))

qui est équivalent à

minmax(0,25%) minmax(0,25%) minmax(0,25%) minmax(0,25%)

par ce qu'on veut. On a 4 colonnes: "left" est la 1e, "right" la 4e... et les parties 2+3 correspondent à la colonne pour le composant (l'article, ...).
Exemple concret: si je veux réduire "left" et "right" de 5%, cette partie donnera

minmax(0,20%) minmax(0,30%) minmax(0,30%) minmax(0,20%)

Scénario 2 : quand le template Cassiopeia n'est pas en mode fluide

Là pour un écran large, le code par défaut est

@supports (display: grid) {
@media (min-width: 992px) {
.site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,19.875rem)) [main-end] minmax(0,1fr) [full-end]
}
}
}

et donc on va jouer sur la partie suivante pour personnaliser la largeur

repeat(4,minmax(0,19.875rem))

Exemple concret testé : j'enlève 0.1REM pour "left" et "right", que je remets dans la partie "centrale" ("component"), tout en gardant la même largeur totale donc :

@supports (display: grid) {
@media (min-width: 992px) {
.site-grid {
grid-template-columns: [full-start] minmax(0,1fr) [main-start] minmax(0,09.875rem) minmax(0,29.875rem) minmax(0,29.875rem) minmax(0,09.875rem) [main-end] minmax(0,1fr) [full-end]
}
}
}

[PhMi]

Merci Woluweb je vais tester et rendrait compte, mais vu l'heure ce ne sera pas tout de suite !

[PhMi]

Re-merci, woluweb : cela fonctionne !

En outre j'ai supprimé "[main-end] 100px" pour que l'ensemble des 4 zones occupe toute la largeur.

[woluweb]

Ne rien supprimer mais mettre 0px au lieu de 100px

[PhMi]

Voilà qui est fait : bonne journée !

[JBNCRAV]

Bonjour, j'ai tenté de faire ce qui est dit plus haut, faire la modif de code dans template.css et de mettre ce fichier dans un repertoire "user" dans le repertoire "css". Mais ça ne fonctionne pas. J'ai du louper quelque chose? Si quelqu'un peut m'éclairer ça serait sympa.
Merci d'avance.
JBNCRAV

[JBNCRAV]

Voila ce que j'ai mis:

body.wrapper-fluid .site-grid {
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 20%) minmax(0, 30%) minmax(0, 30%) minmax(0, 20%) [main-end] minmax(0, 1fr) [full-end];
grid-gap: 0 2em;

[lesoutier]

Je cite woluweb :

Du coup, mettre dans le fichier user.css (dans le dossier /css/ du template Cassipeia)

Ce n'est pas exactement ce que tu as fait

[JBNCRAV]

Ca y est j'ai compris et ça marche.
J'ai donc créé un fichier user.css avec les éléments décrits ci dessus et j'ai placé ce fichier dans le répertoire css du template.
Merci à, tous.
JBNCRAV