[RÉGLÉ] couleur en tête et couleur du template

[patdal03]

Bonsoir.
J'ai migré sous joomla 4 et je voudrais modifier la couleur du bandeau du haut du template, le corps et l'intitulé accueil en haut du bandeau à gauche.
Sous joomla c'était le background-color du template qu'il fallait modifier.(Background color Ligne +ou - 7196 du fichier css/template css)
Je séche.
Merci de vos réponses.
@+

[lomart]

Bonjour,

Sous joomla c'était le background-color du template qu'il fallait modifier.(Background color Ligne +ou - 7196 du fichier css/template css)

C'est une mauvaise idée de modifier le template. Il faut créer un fichier custom.css dans le dossier ccs du template qui contiendra toutes les personnalisations

En ce qui concerne l'intitulé accueil, ce doit être le titre du menu qu'il faut changer.

Pour modifier la couleur du bandeau et le corps, il faut identifier les classes à modifier puis écrire les règles correspondantes dans le fichier custom.css
Voici un exemple

/*couleur bandeau*/
.container-header {
background: darkred;
}
/*taille de la police du menu*/
.navbar a,
.navbar button {
font-size: 2rem;
}

[woluweb]

NB : user.css et pas custom.css dans le cas de ce template

[lomart]

NB : user.css et pas custom.css dans le cas de ce template

C'est aussi custom.css avec cassopeia. testé ce matin car j'avais un doute. les 2 noms sont admis

CORRECTION
C'est uniquement user.css. Hier pour répondre à un post sur mon plugin customcss, je l'avais installé. Il charge par défaut le custom.css du template
Désolé

[Helloo]

C'est aussi custom.css avec cassopeia. testé ce matin car j'avais un doute. les 2 noms sont admis

Bonjour,

Avec certain template, comme Cassiopeia par exemple, uniquement un fichier user.css est accepté. Un fichier custom.css n'est pas reconnu.

[woluweb]

Pour info, on peut voir le nom du fichier dans le fichier joomla.asset.json :

https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/joomla.asset.json#L46

On voit ainsi p ex dans ce fichier qu'on peut aussi créer son propre user.js si on veut ajouter du javascript

[patdal03]

Bonjour,
j'ai le navigateur chrome et avec un clic droit j'ai l'option inspecter.
Vous me conseillez "il faut identifier les classes à modifier puis écrire les règles correspondantes dans le fichier custom.css"
Comment je fais pour trouver les classes ?
D'avance merci de votre aide.
@+

[lomart]

Comment je fais pour trouver les classes ?

Pour comprendre l'inspecteur de code : https://www.youtube.com/watch?v=aRk_OkUqDbY

[patdal03]

Bonsoir,
J'ai créé un fichier user.css.
Les couleurs des bandeaux sont modifiés.
Comment faire pour modifier la couleur du bandeau ?

J'ai vu que je pouvais modifier le css/global/colors_alternative.min.css en modifiant la valeur color primary à : "eeb9c4".
La couleur des bandeaux haut et bas sont modifiés.
Est ce la bonne solution pour les bandeaux du template ?
Si oui comment j'ecris cela dans le user.css
D'avance merci pour les réponses.

[woluweb]

si c'est une couleur définie par le template cassiopeia, vous pouvez simplement changer la couleur comme suit (en adaptant le cas échéant le nom de la couleur)... et ça adaptera TOUS les endroits où elle intervient

:root {
--cassiopeia-color-primary: #ff0000;
}

[pjuignet]

Pour des changement localisés :

/* Change couleur des fonds*/
body {
background-color : #xxxxxx;
}

.container-component {
background-color : #xxxxxx;
}

/* change couleur fond fil d'ariane*/
.breadcrumb {
background-color: #xxxxxx;
}

/*change couleur de fond des cartes */
.card {
background-color: #xxxxxx;

}

[lomart]

Bonsoir,

Pour que le changement de couleur s'applique je dois modifier les valeurs directement dans le fichier css/global/colors_alternative.min.css

Ce n'est pas normal. Ce fichier est chargé avant user.css qui devient prioritaire

Enfin qui serait chargé s'il se trouvait dans le sous-dossier css. Actuellement, il est ignoré.

[patdal03]

Bonsoir,

"Enfin qui serait chargé s'il se trouvait dans le sous-dossier css. Actuellement, il est ignoré."

Ah là là ...j'ai eu un doute.
Si j'avais mis le fichier user.css dans le dossier css cela aura fonctionné.

Par contre j'aimerai supprimer le dégradé du bandeau du haut : quel paramètre dois je modifier ?

Merci pour les informations.

[lomart]

Si j'avais mis le fichier user.css dans le dossier css cela aura fonctionné.

Oui, c'est même obligatoire

Par contre j'aimerai supprimer le dégradé du bandeau du haut : quel paramètre dois je modifier ?

Utiliser le code que j'ai fourni dans mon premier post

Redéfinir les variables CSS, c'est bien pour changer la couleur de tous les éléments du site : fond, texte, lien, ...
Par contre cela ne fait que changer les couleurs utilisées par le dégradé (sans le supprimer ou l'écraser)

le code de templates/cassiopeia/css/user.css doit être

:root{
  --cassiopeia-color-primary : #eeb9c4;
  --cassiopeia-color-link: #30638d;
  --cassiopeia-color-hover: #954b56;
}
/*couleur bandeau*/
  .container-header {
  background: var(--cassiopeia-color-primary);
}
/*taille de la police du menu (a ajuster)*/
.navbar a,
.navbar button {
  font-size: 2rem;
}

[patdal03]

Bonjour,
Après modificatidon du user.css j'ai bien mes bandeaux haut et bas de la bonne couleur ainsi que le fond du body.
Je vous remercie de votre aide.
@+