Couleur du menu et sous menu

[Souloumiac 0]

Bonjour,

Je viens de paramétrer les couleurs quasi à 80% de mon site et cela en intervenant dans le fichier screen.css (merci à peel.fr pour l'open source de leur application).

Les modifications qui me restent sont suite au choix de ma couleur de fond de mon menu et de la partie haute du site, ces modifications sont donc nécessaires pour augmenter la visibilité des informations du menu.

Il me me reste 3 points pour lesquels cela fait des heures que je plante (Grummm!) :

- je n'arrive pas à modifier la couleur du petit triangle à coté d'un choix du menu (Version ordi et nomade (smartphone,tablette...))

- je n'arrive pas à modifier la couleur des choix des sous menus (impact surtout en version nomade)

- je n'arrive pas à modifier la couleur des barres dans le petit carré permettant d'accéder au menu en mode nomade bien évidemment

J'ai essayé en utilisant le code couleur décodé à l'écran mais mes actions dans le css sont soit sans effet ou soit je ne retrouve pas le code couleur décodé dans le css pour intervenir dessus.

Merci par avance de votre aide.

Bonne journée.

[Simon développeur PEEL 0]

Bonjour,

- je n'arrive pas à modifier la couleur du petit triangle à coté d'un choix du menu (Version ordi et nomade (smartphone,tablette...))

Vous devez redéfinir dans screen.css la classe CSS

.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #votre_code_couleur;
}

qui est initialement défini dans le fichier bootstrap.css.

- je n'arrive pas à modifier la couleur des choix des sous menus (impact surtout en version nomade) 

 Pour ajouter une couleur de fond dans les sous-menus, vous pouvez défini la classe

.sousMenu.dropdown-menu {
    background-color: #votre_code_couleur;
}

Pour changer la typo, c'est la classe .dropdown-menu > li > a

 - je n'arrive pas à modifier la couleur des barres dans le petit carré permettant d'accéder au menu en mode nomade bien évidemment

Il faut ajouter une classe 

.navbar-default .navbar-toggle .icon-bar {
    background-color: #votre_code_couleur;
}

dans screen.css.

Pour trouver quelle classe CSS est appliquée sur un élément HTML, vous pouvez vous aider d'un outil comme firebug sur firefox, ou F12 sur Chrome. Avec ces outils, vous pouvez examiner un élément dans le code, et la liste des classes CSS qui s'appliquent sur l'élément examiné s'affichera.

 

[Souloumiac 0]

Bonjour Simon,

Tout d'abord merci pour ces informations et félicitations pour votre réactivité.

Par contre, j'ai bien un fonctionnement correct et attendu sur l'ordinateur et le nomade pour la coloration des petits triangles, la couleur de fond des choix des sous-menus (Merci à vous), mais par contre, pour la couleur de la typo des sous-menus, cela fonctionne que sur l'ordinateur en plein écran, aucune incidence du code de couleur du texte des sous-menus souhaité sur l'appareil nomade ou sur l'ordinateur en réduisant la fenêtre !

Étrange et bizarre !!!

J'ai utilisé l'inspecteur de Chrome, très utile, merci pour l'astuce, le style appliqué aux choix des sous-menus semble le bon mais n'est pas mis en application au niveau de la couleur en mode nomade ou sur l'ordinateur avec une fenêtre réduite.

Voici ce que donne l'inspecteur :

.dropdown-menu > li > a {

1. white-space: normal;
2. background-color: #FFF;
3. font-weight: 600;
4. color: #00F;

}

 et voici le code correspondant dans le screen.css :

.dropdown-menu > li > a {
    white-space: normal;
    background-color :#FFFFFF;   /* Org inexistant  Couleur du fond des choix des sous-menus */
    font-weight: 600; /* Org inexistant valeur du Gras (bold =700) du menu au repos */
    color:#0000FF;  /* Org inexistant  Couleur du texte des choix des sous-menus ATTENTION : fonctionne que sous ordi!!! */
}

Apparemment l'ordre de la couleur souhaitée semble perturbé par le menu déroulant en mode nomade ou en mode ordinateur mais avec une fenêtre réduite. Peut être un ordre issu du bootstrap.css!!!

Encore merci par avance pour votre aide.

Patrick

Modifié (le) 22 août 2016 par Souloumiac
Après des essais complémentaires

[Simon développeur PEEL 0]

Bonjour,

Pour appliquer un style CSS pour une taille d'écran, vous pouvez utiliser les media queries dans le fichier CSS. A différents endroit dans le fichier screen.css, il y a des tests
@media (max-width: 991px) ou @media (min-width: 420px) par exemple qui permettent d'appliquer du code CSS pour une taille d'écran donnée. Vous pouvez faire une recherche de @media dans le fichier pour voir les différentes tailles d'écran déjà disponible, et placer votre code CSS dans la taille d'écran que vous souhaitez.

[Souloumiac 0]

Bonjour,

Ok pour vos réponses, cela m'a permis de comprendre, probablement qu'en partie, le fonctionnement du mode responsive.

Je cherche depuis un moment (actions sur les paramètres dans screen.css) en s'aidant de l'inspecteur' (F12 de Chrome suivant vos conseils) pour blanchir le fond du bouton d'accès au menu (actuellement transparent), le bouton avec 3 barres horizontales. Vous m'aviez donné l'astuce pour modifier la couleur des barres (confirmer par l'inspecteur) mais là je souhaite mettre à FFFFF le fond du bouton comme le panier ou l'accès au compte. Et là je suis dans une impasse :-(

Merci par avance de vos précieux conseils.

Patrick

[Simon développeur PEEL 0]

Bonjour,

Le fond du bouton menu pour les petits écrans est modifiable via la classe .navbar-toggle défini dans screen.css à la ligne 416. Dans cette classe vous pouvez mettre la règle background-color:;

[Souloumiac 0]

Bonjour,

Super, merci pour votre réactivité et votre aide.

Bonne journée.

Patrick