• Tuto Code #02

    A la demande de Tsu' (Huki) voici un tuto sur le menubar d'ekla. Donc le menubar c'est tout simplement la jolie barre qui se trouve en haut de tout les blogs de la plateforme d'ekla et qui malheureusement fais souvent tache. Mais comme vous devez tous le savoir elle est facilement customisable (couleur, image, forme, position, ect...) grâce au CSS.

    I/ Mettre un fond (image ou couleur).

    #menubar {background: #COULEUR;}
    .menubar_separation, #menubar_logo {background: #COULEUR;}
    .menubar_section > div, .menubar_section:hover div, .menubar_section:hover > a {background: #COULEUR;}
    .menubar_separation, #menubar_logo {background: #COULEUR;}


    #menubar_section_content{background-image: none;}
    #menubar_section_appearance{background-image: none;}
    #menubar_section_interactions{background-image: none;}
    #menubar_section_manage{background-image: none;}
    #menubar_section_account{background-image: none;}
    #menubar_notifications{background-image: none;}
    #menubar_signin {background-image: none;}
    #menubar_favorites {background-image: none;}
    .menubar_button {background-image: none;}

    La deuxième partir du code sert à supprimer les "traits" blanc. Mettez à la place de "#COULEUR" le nom de la couleur que vous voulez ou bien une image sous cette forme:" url(URL DE l'IMAGE)"

    II/ Couleur des "sections" au passage de la souris:

    Avant de modifier le menubar ces "sections" devenaient bleu au passage de la souris, après modification elle devrait rester de la couleur choisis. Si vous voulez les modifier il faudra utiliser le code ci-dessous (pour cela, il suffit juste de rajouter ":hover" après le nom du sélecteur):

    .menubar_section > div:hover {background: #COULEUR;}
    .menubar_section > a:hover  {background: #COULEUR;}

    III/ Modification des "section li"

    Donc les "sections li" ce sont les sections à l'intérieur des sections (oui je bat des reccords au niveau explication) en gros par exemple: "nouvel article" est une section li se trouvant dans la section contenu. Comme pour les sections on peux modifier la couleur de base et la couleur au passage de la souris (donc deuxième partit du code ci-dessous).

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

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

    IV/ Notification

    On fais la même chose que pour les "sections li"

    #notifications_panel a {background: #COULEUR;}

    #notifications_panel a:hover {background: #COULEUR;}

    V/ Enlever la flèche

    Comme vous avez pu le remarquer, il y a une flèche à gauche du menubar servant à la "ranger". Je sais pas pour vous, mais personnellement elle ne me sert à rien donc je la supprime tout simplement avec ce code:

    #menubar_hide{ width: 0px;}

    VI/ Les astuces

    Personnellement quand j'ai la flemme de tout changer et que mon thème est dans les tons gris je met tout simplement un code permettant de le rendre en noir et blanc (avec du gris aussi, bien sur):

    #menubar {-webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);}

    Quand le menubar n'est pas modifié vous avez peut être remarqué que la dernière "section li" à les bords arrondis, si vous voulez faire de même mettez ceci (en modifiant les X par des chiffre plus ou moins grand suivant le bord arrondis que vous voulez).

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

     Donc comme expliquer avant quand vous passé sur une section par exemple et qu'elle change de couleur elle le fais d'un coup, si vous voulez que ça se fasse petit à petit mettez ce code (en mettant le sélecteur ou vous voulez que la transition se fasse):

    #NOM DU SELECTEUR  {-webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;}

    #NOM DU SELECTEUR:hover { -webkit-transition:all 1s ease;
        -moz-transition:all 1s ease;
        -o-transition:all 1s ease;}

    On peut aussi voir souvent des menubar dont l'opacité à été diminué, pour cela on utilise ce code (plus le nombre se rapproche de 0 plus il est transparent et plus il se rapproche de 1 plus il est opaque):

    #menubar {opacity: 1;}

    Vous voulez modifié d'autres choses? N’hésitez pas à me demandé, je rajouterais le code dans l'article.

     

     


  • Commentaires

    1
    Mercredi 16 Avril 2014 à 18:59

    ENFIN *__* Merci Ake, je t'adores ;;

    2
    Mercredi 16 Avril 2014 à 19:03

    De rien, c'est un honneur d'être utile envers mon dieu xD

    3
    Samedi 19 Avril 2014 à 09:49

    Merci pour le code ! :)

    4
    Samedi 19 Avril 2014 à 11:15

    Mais de rien :)

    5
    Dimanche 20 Avril 2014 à 21:50

    je te prends les truc pour section j'adore *^* Merci pour tout tes Code j'ai pus faire un thème top!

    6
    Dimanche 20 Avril 2014 à 23:11

    Contente que ça te soit utile x)

    7
    Lundi 28 Avril 2014 à 16:05

    merci pour ce code, j'y vais essayer

    8
    Vendredi 30 Mai 2014 à 21:13

    Merci pour le code ^^

    9
    Vendredi 30 Mai 2014 à 21:17

    De rien :3

    10
    Mercredi 25 Juin 2014 à 13:44

    Je voudrais te demander si tu sais comment mettre le menubar dans le header. Vu que je suis nulle version explication je te fait un petit schéma :

    Voilà voilà et merci merci :3

    11
    Mardi 1er Juillet 2014 à 00:45

    OUi je sais comment faire c'est très simple :)

    12
    Samedi 23 Août 2014 à 19:34

    Je te remercie pour ces codes ! :D

    13
    Dimanche 4 Janvier 2015 à 16:01

    Comment fait on pour modifier la couleur du texte ? :o

    Sinon merci pour tout les codes ♥

    14
    Dimanche 4 Janvier 2015 à 18:02

    Faut que tu fasse:

    color: NOM DE LA COULEUR;

    Soit tu utilise les nom en anglais (genre white, black, ect...) soi tu vas dans un générateur de couleur pour avoir les couleurs exactes que tu veux comme #d1d1d1



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :