• 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

             A P P A R E N C E         

    Premièrement, voici le code pour modifier la menubar telle qu'on la voit :

    #menubar
    {background:#COULEUR;
    color:#COULEUR;
    propriété:valeur;}

    Sauf que comme vous pouvez l constater si vous venez de mettre ce code, ça fait ensuite des barre blanches par très jolies entre les élements... Mais j'ai la solution si vous ne les souhaitez pas ! Il suffit de mettre ce code qui va enlever l'image qu'il y a entre chaque élément :

    .menubar_section, #menubar_logo, .menubar_separation#menubar_favorites, .menubar_button, #menubar_signin
    {background: none;}


    Et pour finir l'apparence, voici le code pour modifier la menubar au survol :

    .menubar_section:hover div 
    {background:#COULEUR;
    color:#COULEUR;
    propriété:valeur;}

    Voir la légende


            L I S T E S        

    Passons maintenant aux listes qui s'affichent lorsque vous survolez un élément. Pour les modifier à l'apparence, voici le code :

    .menubar_section:hover div 
    {background:#COULEUR;
    color:#COULEUR;
    propriété:valeur;}

     Et pour les modifier au survol :

    .menubar_section:hover div 
    {background:#COULEUR;
    color:#COULEUR;
    propriété:valeur;}

     


    Mais vous allez vous rendre compte qu'avec uniquement ces codes, vous ne pouvez pas changer la dernier élément de la liste. Pour le faire, il faut utiliser ces codes-ci. Il n'est nécessaire de changer que le fond.

    Apparence

    .menubar_section li:last-child 
    {background:#COULEUR;}

     

    Au survol

    .menubar_section li:last-child:hover 
    {background:#COULEUR;}

     Et ce dernier élément séparé nous permet de mettre des arrondis si on le souhaite :

    .menubar_section li:last-child 
    {border-radius:0px 0px 50px 50px ;}

    Voir la légende


         F L E C H E S     

    Pour modifier les flèches au bout de la menubar, il faut d'abord recréer de nouvelle flèches. Le mieux est d'aller sur votre logiciel graphique et de les refaire sur ce modèle :
    Modifier la menubar

    Ensuite, vous uploadez votre image dans Contenu > Gérer les fichiers dans la menubar.

    Puis maintenant que vous avez l'URL, vous pouvez le mettre le code :

    #menubar_hide, #menubar_show {background:url('URL DE VOTRE IMAGE');}

     
    Et si vous voulez simplement les supprimer :

    #menubar_hide, #menubar_show {display:none;} 

             C O E U R         

    C'est le petit coeur pour ajouter aux favoris.
    Pour le modifier, il faut recréer deux cœurs. Celui pour remplacer le gris, et celui pour remplacer le rouge. Avec votre logiciel graphique, je vous conseille de faire des images 20x20.

    Ensuite, vous les uploadez dans Contenu > Gérer les fichiers, dans la menubar.

    Et maintenant que vous avez les URL, vous les mettez dans ce code : 

     #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%; }

     


             N O T I F I C A T I O N S         

    Pour finir, voici les codes pour la liste de notifications.

    À l'apparence, voici le code :

      #notifications_panel a,
     #notifications_panel div
    {background: #COULEUR;
    propriété:valeur;
    }
     


    Quand un élément est est survolé :

      #notifications_panel a:hover,
    #notifications_panel div:hover 
    {background: #COULEUR;
    propriété:valeur;
    }
     

     
    Et les nouvelles notifications :

      #notifications_panel
    .new_notification

    {background: #COULEUR;
    propriété:valeur;
    }
     

    Voir la légende


    Légende :
    champs rouges
    : à remplir en fonction de ce qui est demandé.

    propriété:valeur; : à remplacer par les propriétés que vous voulez.

    background : la couleur du fond. À remplir avec un code hexadécimal (#cc0000 par exemple). Vous pouvez vous servir du Color Picker Pro dans le menu pour ça.

    color : la couleur du texte : À remplir comme le background.

    border-radius : les arrondis. En l’occurrence, les arrondis de la liste. il faut uniquement modifier les deux dernières valeurs par le nombre (compris entre 0 et 50) que vous voulez.

    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 :