Lien actif changement de couleur (Créer un compte)

  • Statut : non résolu
10 sujets de 1 à 10 (sur un total de 10)
  • Auteur
    Messages
  • #521937
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : dernière
    – Version de PHP/MySQL :
    – Thème utilisé : rachelbaker-bootstrapwp-Twitter-Bootstrap-for-WordPress-9bc2021 :
    – Extensions en place : rien
    – Nom de l’hebergeur :
    – Adresse du site : local

    Problème(s) rencontré(s) :

    Je suis partie sur cette base pour créer un menu avec le cms de Wp:
    http://twitter.github.com/bootstrap/examples/justified-nav.html#

    J’aimerai juste que background de l’onglet actif du menu soit d’une autre couleur. Il me semble que dans le css il faut mettre l’ID du menu. Mais en vain! je n’y arrive pas.

    Merci d’avance à ceux qui vont m’éclairer à ce sujet.

    #884093
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Bon ben j’ai trouvé ceci dans le codex.
    http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items

    Je vais essayer de me dépatouiller durant ce week-end :D

    #884094
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    J’ai essayé ceci-ci, mais non ce n’est pas encore la solution

    .navbar .nav > .active > a > .current_page_item,
    .navbar .nav > .active > a:hover >.current_page_item,
    .navbar .nav > .active > a:focus >.current_page_item,{
      color: #555555;
      text-decoration: none;
      background-color: #e5e5e5;
      -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
         -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    }

    Le menu est composé avec des pages et des catégories

    Dans le code généré par WP je vois bien, qu’il ajoute des ID et des class ” menu-item-…

      
       <div class="row-fluid-top">
         <h3>
            <a class="muted" href="http://localhost:8888/www/" title="TEST" rel="home">TEST</a>
            </h3>
              <div class="navbar">
               <div class="navbar-inner">
                <div class="container">
                  <ul class="nav">
                    <div class="nav-collapse">
    <ul id="main-menu" class="nav">
      <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost:8888/www/?page_id=20">photos</a></li>
       <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-51"><a href="http://localhost:8888/www/?page_id=24">Articles</a>
         <ul class="dropdown-menu">
    	<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://localhost:8888/www/">Page d’exemple</a></li></ul></li>
    <li id="menu-item-108" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-108"><a href="http://localhost:8888/www/?cat=1">Non classé</a></li>
    <li id="menu-item-109" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-109"><a href="http://localhost:8888/www/?cat=3">mnbuih</a></li>
    </ul></div>             
               </ul>
            </div>
          </div>
        </div>
       </div>

    Est-ce que quelqu’un a une toute petite idée ou une piste??

    Merci

    #884095
    Guy
    Participant
    Maître WordPress
    14828 contributions

    tu dois aussi ajouter le traitement de la classe “current-menu-item” et “current-menu-parent”

    #884096
    Flobogo
    Modérateur
    Maître WordPress
    16256 contributions

    Salut Ouistiti,

    Je suis incapable de t’aider, mais si tu veux, regarde sur mon site, je pense que le thème graphène que j’utilise fait ce que tu demandes : background de l’onglet actif du menu est d’une autre couleur.
    Du coup, en examinant avec Firebug, tu arriverais peut-être à déterminer comment s’appelle l’élément CSS que tu veux modifier.

    Enfin, c’est une simple suggestion, je ne peux pas faire mieux …

    #884097
    Guy
    Participant
    Maître WordPress
    14828 contributions

    et le lien vers le codex indispensable 🙂 : http://codex.wordpress.org/Function_Reference/wp_nav_menu#All_Menu_Items

    Tu verras tous les current possibles/

    #884098
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    J’ai réussi de cette manière là

    .navbar .nav  > li > a:hover  {
    
    color: #555555;
    text-decoration: none;
    background-color:  #E5E5E5;
      -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
         -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
    
    }
    
    
    
     .navbar .nav  > li .current-menu-item > a  {
    
    color: #555555;
    text-decoration: none;
    background-color:  #E5E5E5;
      -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
         -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     }

    J’ai tourné en rond car au début j’ai eu de la peine à comprendre dans quel ordre mettre les éléments et j’ai toujours pas capté ( .navbar .nav > li > .current-menu-item > a = faux) :D idem j’ai essayé avec .menu-item-object-category vu que le menu est aussi composé de catégories, ben!! ça marche mais pas dans le sens que je désirais.

    Il me reste plus qu’ à tester le petit dernier “current-menu-parent“

    Merci pour le lien ci-dessus!!

    #884099
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Edit:
    .navbar .nav > li > a> .current-menu-item (= faux)

    #884100
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Voici le code final:

    .navbar .nav  > li .current-menu-parent > a,
     .navbar .nav  > li .current-menu-item > a,
     .navbar .nav  > li .current_page_item > a {
    
    color: #555555;
    text-decoration: none;
    background-color:  #E5E5E5;
      -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
         -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
              box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     }

    Il n’ y pas besoin de mettre .current_page_item, c’est tout aussi fonctionnel sans.

    Pour ceux à qui ça intéresse :

    .current_page_item fonctionne seulement sur les pages statiques non les pages contenant des catégories
    .current-menu-parent fonctionne si on est sur une page enfant ou une catégorie enfant.
    .current-menu-item fonctionne sur les pages et catégories (parent)

    #884101
    ouistiti.net
    Participant
    Maître WordPress
    1879 contributions

    Merci à tous les deux!! 🙂

10 sujets de 1 à 10 (sur un total de 10)
  • Vous devez être connecté pour répondre à ce sujet.