Template hydrogen 5 comportements

[Flyman30]

J'ai un site sous joomla 3 http://www.gaule-barrabande.com/regl...n/les-reserves qui affiche en grid les blocs avec un user.css :

/*table*/
.ma-table tr.vert {background-color: #3c7216;color: #fff; font-weight: bold;}
tr.vertclair {background-color: #cdef9f;}

/*grid*/
#g-grid {
.ma-table {border: 1px solid #3c7216; min-height: 17em;}
.ma-table-titre {background-color: #3c7216; color: #fff; font-weight: bold; padding-left: 0.5em;}
.ma-table-item .table-portable .table-fixe{color: #666; padding-left: 0.3em;}
.ma-table-li {list-style: none; margin: 0.3em;}
.g-grid>.g-block>.g-content{margin:0;padding:0;}
.g-grid>display:block;flex-wrap:inherit;
.g-block{flex-grow:0;flex-basis:100%;}
.g-block{display:block;flex:inherit;}
}

le résultat est sympa

Avec joomla 4 et le même custom.css https://aappma-margeride-aubrac.org/...tions/reserves le résultat n'est pas le même et je ne comprend pas !

Une idée ?

[chris67]

Bonjour,
Lorsqu'on compare les deux sites avec l'outil développeur, on constate que la classe rt-table-titre n'est pas chargée dans le site Joomla 4 et il y a des 404 dans vos CSS compilés. A mon avis, il faudrait contrôler la présence et le contenu du dossier custom du template de votre Joomla 4, notamment le sous-dossier scss et ne pas oublier de recompiler les fichiers SCSS dans Gantry.

[Flyman30]

J'ai des doutes sur le nom user.css ou custom.css quel est le bon dans Joomla4 ?
Et sur l'emplacement je ne suis pas certain ou mettre le css perso quel est le bon dossier du template g5_hydrogen, css ou scss ?
Comment compiler ? et avec quoi ...

[chris67]

Dans un template Gantry, la convention est de créer un fichier g5_hydrogen/custom/scss/custom.scss et de le compiler en pressant un bouton dans l'administration du template (voir ce lien: https://docs.gantry.org/gantry5/tuto...om-style-sheet). Il ne faut pas toucher au dossier css. C'est probablement ce qui a été fait dans votre version 3.
Il est aussi possible d'ajouter des codes CSS inline dans les différents styles du template.

[Flyman30]

J'ai suivi vos explications j'ai supprimé les user.css et custom.css en trop, j'ai navigué jusqu'a g5_hydrogen/custom/scss/ et là j'ai collé le fichier custom.css suivant :

@import "dependencies";
$top-background: #ffffff !default;
$top-text-color: #666666 !default;
$bottom-background: #ffffff !default;
$bottom-text-color: #666666 !default;

#g-top { background: $top-background; color: $top-text-color; }
#g-bottom { background: $bottom-background; color: $bottom-text-color; }
g-showcase {padding: 0rem 0;}

.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {font-size:0.85em;}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {height: 2.5em; padding-top: 0.3em; padding-bottom: 0.3em;}
#g-navigation .g-main-nav .g-sublevel > li > .g-menu-item-container {font-size:.8em; padding-top: 0.3em; padding-bottom: 0.3em;}
#g-navigation {height: 2.5em; position: relative; z-index: 100;}



/*table*/
.ma-table tr.vert {background-color: #3c7216;color: #fff; font-weight: bold;}
tr.vertclair {background-color: #cdef9f;}

/*grid*/
#g-grid {
.ma-table {border: 1px solid #3c7216; min-height: 17em;}
.ma-table-titre {background-color: #3c7216; color: #fff; font-weight: bold; padding-left: 0.5em;}
.ma-table-item .table-portable .table-fixe{color: #666; padding-left: 0.3em;}
.ma-table-li {list-style: none; margin: 0.3em;}
.g-grid>.g-block>.g-content{margin:0;padding:0;}
.g-grid>display:block;flex-wrap:inherit;
.g-block{flex-grow:0;flex-basis:100%;}
.g-block{display:block;flex:inherit;}
}

Compilé les css comme indiqué dans le lien fourni, malheureusement rien ne change...
Le menu est toujours trop gros et le grid perso n'est pas pris en compte .

[chris67]

Vous n'avez qu'une partie du code, car la classe rt-table-titre dont je parlais - clairement une classe perso - n'est pas présente dans l'extrait que vous montrez. Faites une recherche dans le dossier custom de la version 3 pour voir où elle se trouve. En effet, il peut avoir d'autres fichiers scss que le fichier custom.scss (scss et pas css) dans le dossier scss. Il faut aussi transférer ces fichiers, puis recompiler si vous êtes en mode production.

[Flyman30]

J'ai modifié le custom.css :

@import "dependencies";
$top-background: #ffffff !default;
$top-text-color: #666666 !default;
$bottom-background: #ffffff !default;
$bottom-text-color: #666666 !default;


.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {font-size:0.85rem;}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {font-size:.85rem; height: 2.5em; margin-top: -0.7em; margin-bottom: 0.8em;}
#g-navigation .g-main-nav .g-sublevel > li > .g-menu-item-container {font-size:.8rem; height:4em;}
#g-navigation {height: 2.4em;position: relative; z-index: 100;}
.g-content {margin: 0.625rem; padding: 0.92em;}
.g-container {width: 78rem;}


/*table*/
.ma-table tr.vert {background-color: #3c7216;color: #fff; font-weight: bold;}
tr.vertclair {background-color: #cdef9f;}

/*grid*/
#g-grid {
.ma-table {border: 1px solid #3c7216; min-height: 17em;}
.ma-table-titre {background-color: #3c7216; color: #fff; font-weight: bold; padding-left: 0.5em;}
.ma-table-item .table-portable .table-fixe{color: #666; padding-left: 0.3em;}
.ma-table-li {list-style: none; margin: 0.3em;}
.g-grid>.g-block>.g-content{margin:0;padding:0;}
.g-grid>display:block;flex-wrap:inherit;
.g-block{flex-grow:0;flex-basis:100%;}
.g-block{display:block;flex:inherit;}
}​

Rien ne change dans l'affichage pourtant le custom.css est bien dans : /templates/g5_hydrogen/custom/scss/custom.css
Quand je compile les css rien ne change...

[chris67]

Avez-vous trouvé la classe .rt-table-titre { … } dans le code scss de votre template Joomla 3 ou 4 ?
De plus, le fichier dans le dossier custom/scss doit s'appeler custom.scss et non pas custom.css. Un fichier scss peut contenir du code SASS contrairement à un fichier css compilé.

[Flyman30]

Non je n'ai pas trouvé de référence à rt-table c'est la raison pour laquelle j'ai déclaré ma_table dans le custom.scss (j'ai corrigé l'extention)

[chris67]

Le problème c'est que dans le code HTML la classe s'appelle rt-table-titre et vous la renommez .ma-table-titre dans le fichier scss, donc elle ne fonctionnera pas.

[Flyman30]

C'est tout bon, j'ai récupéré le fichier custom.scss de l'ancien site je l'ai mis au même endroit et tout est rentré dans l'ordre...