• Modifier la menubar

    Voici tous mes codes pour modifier la barre d'outils blanche en haut de votre blog.

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

              O N G L E T S  E T  L I S T E S          
    Ce premier code est pour modifier le fond et la couleur du texte de la barre d'outils en apparence.
    #menubar{background-color:COULEUR DE FOND;color:COULEUR DE TEXTE;}
    Mais en mettant ce code, vous pourrez remarquer que des bandes blanches pas très jolies sont sur votre barre. Et bien pour arranger ça, mettez ce code :
    .menubar_section,
    #menubar_logo,
    .menubar_separation,  
    #menubar_favorites,
    .menubar_button,
    #menubar_signin
    {background : none ;  
    }
    Et puis un dernier code pour changer la couleur du fond et du texte au survol :
    .menubar_section:hover div{background-color: COULEUR DE FOND;color:COULEUR DU TEXTE;}

     
    Maintenant, passons aux listes qui s'affichent quand on survole un onglets. Voici le code pour les modifier à l'apparence :
    .menubar_section li {
               background:COULEUR DE FOND; color:COULEUR DE TEXTE; }
    Et le code pour le survol :
    .menubar_section li:hover {background:COULEUR DE FOND;
            color:COULEUR DE TEXTE;}
    Enfin, il faut également modifier le dernier élément de la liste, qui est à part, mais nous n'avons besoin de ne changer que le fond.
    Le code pour l'apparence :
    .menubar_section li:last-child {
               background:COULEUR DE FOND; }
    Le code pour le survol :
    .
    menubar_section li:last-child:hover{background:#f9f9f9;}
    Et grâce à ce dernier élément, on peut faire des arrondis à la fin des listes :
    .menubar_section li:last-child
    {border-bottom-right-radius:NOMBRE D'ARRONDIpx;
    border-top-left-radius:0px;
    border-bottom-left-radius:NOMBRE D'ARRONDIpx;
    border-top-right-radius:0px;}

              L I E N S  E T  N O T I F S           
    Voici les codes pour les liens, donc pour les notifications dans la petit icône message, et le profil.
    Le code pour l'apparence :
    #menubar a {background:COULEUR DE FOND;
    font-family:POLICE DE VOTRE CHOIX ;color:COULEUR DE TEXTE;}
    Le code pour le survol :
    #menubar a:hover{background:COULEUR DE FOND;color:COULEUR DE TEXTE;}

    Puis la liste des notifications qui apparaît en cliquant sur la petit icône. La même chose.
    Code pour l'apparence :
    #notifications_panel a,#notifications_panel div{ background:COULEUR DE FOND;color:COULEUR DE TEXTE}
     Code pour le survol :
    #notifications_panel a:hover,#notifications_panel div:hover{ background:COULEUR DE FOND;color:COULEUR DE TEXTE;}

              F L E C H E S  E T  C O E U R          
    Pour modifier la flèche qui est tout à gauche de la "menubar", il faut comment par modifier les flèches comme vous voulez sur un logiciel. Je vous conseille de recolorer cette image d'origine :

    Modifier la menubar
    Ensuite, vous enregistrez vos nouvelles flèches, les importez sur Contenu > Gérer les Fichiers, puis tapez ce code :
    #menubar_hide,
    #menubar_show {background-image:url("URL DE VOS FLECHES"); }
    Ou si vous voulez simplement les supprimer, vous mettez ce code
    #menubar_hide,
    #menubar_show {display:none;}

    Pour le coeur des favoris, il va vous falloir deux images (une pour remplacer le coeur gris, et une pour remplacer le coeur rouge) de 20pxX20px, ça serait l'idéal. Vous les uploadez comme vous l'avez fait pour les flèches.
    Puis vous tapez ces deux codes. Le premier est pour le gris et le second est pour le rouge :
    #menubar_favorites_btn,
     #menubar_nofavorites_btn:hover {
          background: url("URL DU COEUR GRIS")no-repeat 50% 50%;
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn {
          background: url("URL DU COEUR ROUGE")no-repeat 50% 50%;
    }

    Voilà, c'est tout pour cette menubar. Si vous voulez modifier l'opacité ou la changer de position, c'est en cliquant ici.

     

    « Toutes les propriétés de policesPositions et opacités de la menubar »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :