Couleur du menu et sous menu

7 posts in this topic

Posted · Report post

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.

Share this post


: post
Share on other sites

Posted · Report post

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 

Share this post


: post
Share on other sites

Posted (edited) · Report post

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-spacenormal;
  2. background-color#FFF;
  3. font-weight600;
  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

Edited by Souloumiac
Après des essais complémentaires

Share this post


: post
Share on other sites

Posted · Report post

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.

Share this post


: post
Share on other sites

Posted · Report post

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

Share this post


: post
Share on other sites

Posted · Report post

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:;

Share this post


: post
Share on other sites

Posted · Report post

Bonjour,

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

Bonne journée.

Patrick

Share this post


: post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

Twitter Advisto ecommerce

Facebook PEEL Shopping