[Problème] Joomla 4.5.2 -- Cassiopeia -- Modification Module Menu principal

[mjnet-2013]

Bonjour,
Je suis en train de créer un site sur la base du template Cassiopeia de joomla 4.5.2
Je cherche à agir sur le style du module menu principal
J'ai copié la template Cassiopeia en "cassiopeia-dbv"
Je lui ai glissé un user.css
Cependant, je ne sais pas où et sur quel classes je dois travailler pour modifier le design du menu principal (par ex. retirer la couleur de fond du module pour le rendre transparent et lui imposer un emplacement de mon choix).
Vous serait-il possible de m'aider s'il-vous-plaît ?
Respectueusement,

[RobertG]

Bonjour,

C'est .container-header que tu dois personnaliser (couleur et image) dans ton user.css

[mjnet-2013]

Bonsoir Robert G,

Merci pour cette indication.
J'ai copié ces lignes, tirées du templates-rtl.css, dans mon user.css pour modification. Après essaie, rien n'y fait.
Il semblerai que la ligne de code, ci-dessous, dans index.php soit un élément perturbateur. Du moins c'est ce que je pense. Rien n'est moins sûr.

// Enable assets
$wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->useScript('template.user')
->addInlineStyle(":root {
--hue: 214;
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--template-special-color: #001B4C;
$fontStyles
}");

// Override 'template.active' asset to set correct ltr/rtl dependency
$wa->registerStyle('template.active', '', [], [], ['template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr')]); 

Je travail sur ma copie de template cassiopeia (cassiopeia_dbv). Toutefois, ces lignes de codes référencent encore le template initial. J'ai essayé de remplacer template.cassiopeia. par : template.cassiopeia_dbv. Ce changement à provoquer un message d'erreur sur la page d'accueil du site. Du coup, je me suis encore retrouvé coincé sur l'objectif recherché.

Toutefois, après quelques recherches, j'ai trouvé la class ":root" qui m'a aidé à réaliser et à atteindre mon but :

:root{
--cassiopeia-color-primary:none;
--cassiopeia-color-link:#224faa;
--cassiopeia-color-hover:#424077;
}

Voici donc le récapitulatif sur mon user.css

.container-header .mod-menu {

justify-content: center;
color: #ffffff;
padding: 0;
margin-top:100px;

}
.container-header {

position: relative;
z-index: 10;
background-color: var(--cassiopeia-color-primary);
/* background-image: -o-linear-gradient(225deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);*/
background-image: linear-gradient(-135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
/* -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset;*/
box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.03) inset;

}
:root{

--cassiopeia-color-primary: none;
--cassiopeia-color-link: #224faa;
--cassiopeia-color-hover: #424077;

}
.navbar-collapse{

margin-left:750px;

}

SUPER MERCI à vous Robert G
Travail d'équipe !!!