Titre du sujet : Re: Modifier l'apparence de mon site
par alain01 sur 21/04/2020 23:48:42
Oui navbar est un élément plus complexe car il y beaucoup d'héritage css avec navbar,
une simple surcharge pourrait fonctionner mais ne serait pas suffisante si tu veux utiliser tout le potentiel de navbar...
humm,
pas évident à t'expliquer...
Ok, je te donne quelques bribes...
Ces infos sont pour Boostrap v4.x
je ne sais pas si c'est opérationnel en totalité en v3, la version que tu utilises.
navbar est défini ici
Et toi, selon le thème que tu utilises, c'est une variante,
défini ici pour la version light
et ici pour la version dark
(Je vais bientôt vous proposer 21 variantes  )
Dans les 3 cas, tu vois que tu peux utiliser les couleurs par défaut de BT :
un exemple ici
les couleurs par défaut, tu les vois sur les liens que j'ai donné pour dark et light,
mais les noms restent les même :
primary
secondary
success
info
warning
danger
dark
light
Selon l'élément css à utiliser ça pourra être
bg-primary, btn-primary, text-primary, nav-primary...
Mais libre à toi de définir par exemple une couleur
.bg-xoopscore {
background-color: #139EE8 ;
}
et de l'utiliser dans ton navbar
donc tu obtiens :
<nav class="navbar navbar-expand-sm bg-xoopscore justify-content-center">
et voila, tu viens de changer de fonds,
mais comme je l'ai indiqué plus haut, tu vas vite t'apercevoir que si tu veux des sous-menu (dropdown), ils ne seront pas dans la couleur attendu car le navbar a beaucoup d'héritages.
Il existe des outils pour modifier en ligne un fichier bootstrap mais c'est pareil, il te faut modifier tout les héritages, c'est long.
Il existe encore une autre solution, mais qui est d'un niveau plus élevé,
c'est d'utiliser le sass pour css...
Je sais, je sais...
Et oui, le css est un domaine très très large, mais tellement puissant.
Donc en gros, soit tu utilises une des variantes de couleur proposés et dans ce cas les héritages de tous les éléments sont définis,
soit tu utilises ta propre couleur mais pour le navbar, il te manquera des héritages de couleurs et tu retomberas, pour des sous-éléments, avec la couleur par défaut, qui est primary ou tu peux utiliser les autres, ou encore comme dans monxoops.fr; utiliser tes propres couleurs lorsque tu utilises des sous-éléments. (Regarde le menu du haut sur monxoops.fr, nous avons laissé le fond mais nous avons coloré les bordures de XOOPS / Modules / Thèmes à notre sauce, sympa, non ? )
Ok,
une grosse réponse qui m'a pris un certain temps,
mais je ne doute pas qu'il t'en faudra plus encore pour lire, relire et rerelire cette réponse pour en comprendre le sens et son étendu.
Et crois-moi, j'ai essayé de synthétiser lol.
J'espère avoir été clair.
Allez, bon travail et bon courage !
|
