• Barre de gestion (menubar)

    Pour réaliser ce tuto, il faut d'abord avoir:

    ☻De la patience (pour éviter de balancer votre pc contre un arbre! ^^)

    Voici un tuto classique, mais tellement important! Ils sert à changer la barre de gestion, qui s'appelle en vrai "menubar", c'est la barre du haut avec contenu, apparence, interactions, configuration, mon compte et les notifications.

    Par exemple, si vous voulez changer le fond par une image, il faut mettre ceci:

    #menubar {
    background-image: url("URL DE L'IMAGE");
    }

    Si c'est la couleur que vous voulez changer, il faut mettre ce code:

    #menubar {
    background-color: COULEUR;
    }

    Quelque explications: "background" veut dire "fond" en anglais, donc, logiquement, "background-image" veut dire "image de fond", et "background-color" veut dire "couleur de fond". ^^

    Maintenant, on va utiliser "#menubar ul", dans le sens logique, il faut mettre les même images ou les même couleur que dans le code au dessus, ce qui donne:

    #menubar ul{
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #menubar ul {
    background-color: COULEUR;
    }

    Maintenant que la barre est changé, il faut changer l'intérieur, c'est à dire quand on survol un des boutons de gestions, un menu apparaît proposant plein d'autres menu. ^^. Donc, nous allons utiliser cette fois-ci "#menubar li", ce qui donne:

    #menubar li{
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #menubar li {
    background-color: COULEUR;
    }

    Je suis bête, j'allais oublier, vous pouvez aussi changer la couleur du texte avec ceci

    color: COULEUR DU TEXTE;

    Maintenant, il faut modifier les lignes qui apparaissent quand vous survolez un menu dans les lignes internes. Pour ça, on va utiliser le même code qu'avant, mais en rajoutant "hover", ce qui donne:

    #menubar li:hover {
    background-image: url("URL DE L'IMAGE");;
    }

    ou

    #menubar li:hover {
    background-color: COULEUR;
    }

    Maintenant, il faut s'occuper des notification, voila le code et vous vous débrouillez avec... mais non, je rigole! ^^:

    #menubar_notifications {
    color: COULEUR DU TEXTE;
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #menubar_notifications {
    color: COULEUR DU TEXTE;
    background-color: COULEUR;
    }

    Et là, je ne sais pas pourquoi, il faut mettre la même chose, mais avec le sélecteur "#notifications_panel a", donc:

    #notifications_panel a {
    color: COULEUR DU TEXTE;
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #notifications_panel a {
    color: COULEUR DU TEXTE;
    background-color: COULEUR;
    }

    "color" sert à modifier la couleur du texte, et "background-image" ou "background-color", vous connaissait maintenant! Bref, il faut passer au notifications survolé. Comme d'hab': même code, mais avec hover, donc:

    #notifications_panel a:hover {
    color: COULEUR DU TEXTE;
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #notifications_panel a:hover {
    color: COULEUR DU TEXTE;
    background-color: COULEUR;
    }

    J'allais oublier, pour enlever les séparations blanches entre chaque menu, mettez ce code, sans le modifier

    #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_button {
    background-image: none;
    }

    Maintenant, un autre truc qui fait bien moche, la flèche pour ranger la barre, donc, pas de pitié, on l'enlève avec ceci:

    #menubar_hide { position: absolute;
    width:0px }

    Si vous voulez changer la transparence comme moi, je ne peux vous envoyer qu'ici!


    Tags Tags : , , , ,
  • Commentaires

    1
    Vale!!
    Dimanche 1er Juillet 2012 à 16:39

    La, ça marche pas. =(

    Est-ce que tu peux m'aider ??(Je suis Vale..! mais j'ai pas vu que j'étais pas co'. L'adresse du blog où j'utilise ton tuto' : http://the-graph--my-world.ek.la/)

    :

     

    Maintenant, il faut s'occuper des notification, voila le code et vous vous débrouillez avec... mais non, je rigole! ^^:

    #menubar_notification {
    color: COULEUR DU TEXTE;
    background-image: url("URL DE L'IMAGE");
    }

    ou

    #menubar_notifications {
    color: COULEUR DU TEXTE;
    background-color: COULEUR;
    }

    Et là, je ne sais pas pourquoi, il faut mettre la même chose, mais avec le sélecteur "#notifications_panel a", donc:

    ou

    #notifications_panel a {
    color: COULEUR DU TEXTE;
    background-image: url("URL DE L'IMAGE");
    }
    2
    Sweety ✖ Profil de Sweety ✖
    Dimanche 1er Juillet 2012 à 16:40

    Euh je me suis trompé dans l'adresse c'est : http://the-graph--my-passion.ek.la/

    3
    Dimanche 1er Juillet 2012 à 17:36

    je crois que c bon, sans doute à cause d'un "s" oublié à la fin du premier code de notifications!

    4
    Sweety ✖ Profil de Sweety ✖
    Dimanche 1er Juillet 2012 à 17:53

    Ah okay, je vais essayer et je te dis ;-)

    5
    Sweety ✖ Profil de Sweety ✖
    Dimanche 1er Juillet 2012 à 18:02

    Sa marche toujours pas :/

    En fait deja dans les trucs au dessus, y avais que l'image qui marchait mais la couleur sa faisait rien alors c'est peut etre sa...

    6
    Dimanche 1er Juillet 2012 à 19:02

    les couleurs doivent être écrite en anglais!

    7
    Sweety ✖ Profil de Sweety ✖
    Dimanche 1er Juillet 2012 à 20:35

    C'est ce que j'ai fait :/

    En fait je peux enregistrer sans que sa me dise "Le code CSS comporte une erreur" mais sa change rien. D=

    8
    Dimanche 1er Juillet 2012 à 21:57

    ben je sais pas, c'est toi qui à supprimer quelque chose, ton code à un bug, tu l'as sans doute modifié sans le vouloir

    9
    Sweety ✖ Profil de Sweety ✖
    Dimanche 1er Juillet 2012 à 22:00

    Ah. Ou alors j'ai mal écrit x)

    J'ai trouvé un site où y a les couleurs avec leur code en anglais, je regarderai demain.

    10
    Sweety ✖ Profil de Sweety ✖
    Lundi 2 Juillet 2012 à 11:19

    C'est bon ça marche j'avais dut mal écrire ^^

    11
    Vendredi 6 Juillet 2012 à 20:25

    ou alors, tu avait oublié une accolade: { ou }

    12
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 17:43

    pour changer la couleyr du texte ça baugue

    color: machin truc bidulr

    13
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 17:51

    NN c bon^^

    14
    Sweety ✖ Profil de Sweety ✖
    Lundi 30 Juillet 2012 à 19:44

    x'D j'adore "machin truc bidule" !! =}

    15
    HΔUNTED Profil de HΔUNTED
    Lundi 30 Juillet 2012 à 20:08
    16
    Kilami- Profil de Kilami-
    Vendredi 24 Août 2012 à 21:27

    MIICII ca marche super bien to truc sa me fait un blog mtn ^^

    17
    Vendredi 24 Août 2012 à 22:41

    derien, mais je suis passé sur tes blogs à l'instant, et je n'ai pas vu de menubar modifier

    18
    Mimi120
    Dimanche 14 Octobre 2012 à 14:24

    D'accord  j'y vais  faire

    19
    Mimi120
    Dimanche 14 Octobre 2012 à 14:48

    Mais  ça  ne  marche  pas  toujours :"'(

    20
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 14:05

    Comment ont change COULEUR par notre couleur?

    21
    Dimanche 27 Janvier 2013 à 14:52

    ben tu remplace COULEUR par une couleur en anglais (ex: blue)

    22
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 15:47

    bah,moi ça à tué mon blog!!!!

    23
    Dimanche 27 Janvier 2013 à 17:58

    comment ça?

    24
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 18:21

    bah regarde le blog ''mon univers''

    25
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 18:22

    Obligé de changé tout!!

    26
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 18:23

    et moi vraiment ça marche pas!!j'ai mis ''red'' ça fait rien!!

    27
    Dimanche 27 Janvier 2013 à 18:40

    ben qu'est-ce qu'il à ton 3 blog

    28
    Jmlou Profil de Jmlou
    Dimanche 27 Janvier 2013 à 18:45

    mème blog j'ai dû changé a  oui au passage j'arrive pas a changé mon curseur(l'avion)

    29
    Mardi 12 Mars 2013 à 18:35

    j'ai essayée pour la couleur mais sa ne marche pas,j'enregistre mais il ne me dise pas qu'il y'a une erreur mais sa ne change rien du tout,j'ai mis sa :

    #menubar {
    background-colorpink;
    }

     

    Il y'a une erreur ?

    30
    Mercredi 13 Mars 2013 à 10:12

    tu voulais changer la couleur de la menubar ou la couleur de l'écriture de la menubar?

    31
    Mercredi 13 Mars 2013 à 13:34

    La couleur

    32
    Mercredi 13 Mars 2013 à 17:37

    ben la quelle? la menubar ou l'écriture

    33
    Mercredi 13 Mars 2013 à 19:28

    Du menubar

    34
    Jeudi 14 Mars 2013 à 10:18

    tu as beaucoup de css sur ton blog?

    35
    Jeudi 14 Mars 2013 à 13:07

    Juste celle des visiteurs

    36
    Jmlou Profil de Jmlou
    Jeudi 14 Mars 2013 à 14:59
    37
    Jeudi 14 Mars 2013 à 17:01

    Quesqu'il y'a de drôle ? ^^

    38
    Jmlou Profil de Jmlou
    Jeudi 14 Mars 2013 à 20:24
    39
    Jeudi 14 Mars 2013 à 20:28

    Euh ok...

    40
    Jmlou Profil de Jmlou
    Jeudi 14 Mars 2013 à 20:59

    je fantasme ^^

     

    41
    Jeudi 14 Mars 2013 à 21:01

    OK... Super Jmlou! On est content pour toi! Nan, XD, je déconne! Bon, fruitbasket, si tu veux, met moi la perm 3 sur ton blog et je verrai comment tu t'es débrouiller avec tes deux codes.

    42
    Jeudi 14 Mars 2013 à 21:04

    Lol,c'est devenu bizarre cette discut'  :D

    Ok ! J'ai ajouter un autre CSS : pour les flèches

    43
    Jeudi 14 Mars 2013 à 21:05

    C'est fait ! Je t'ai mis niv3

    44
    Jmlou Profil de Jmlou
    Jeudi 14 Mars 2013 à 21:36

    Pouvez-vous visiter Darkvslight(mon blog)il été un peu laissé à l'abbandon je l'ai remis en marche!

    45
    Jeudi 14 Mars 2013 à 22:51

    Ok j'y vais de suite !

    46
    Vendredi 15 Mars 2013 à 10:42

    Laisse tomber égotilt c'est bon :)

    47
    Samedi 16 Mars 2013 à 10:50

    en t'as plus de blog?

    48
    Samedi 16 Mars 2013 à 13:39
    Ouais je préfére pour l'instant me concenter sur "lovellymanga" et dès qu'il sera bien remplie et assez visités je ferai un blog à moi !
    49
    Samedi 16 Mars 2013 à 21:16

    Mais comment on fait pour changer la couleur au survol des menus ? Par exemple quand je passe ma souris sur "apparence" sa fait un bleu super moche,mais j'aimerai bien changer cette couleur

    50
    Samedi 16 Mars 2013 à 22:31

    Pour ça, le code est:

    .menubar_section:hover div backgroundCOULEUR}

    51
    Samedi 16 Mars 2013 à 22:32

    Merci !

    52
    Samedi 16 Mars 2013 à 22:34

    Sa marche ^^

    Et pour les notif' c'est quoi le code s'il te plaît 

    53
    Dimanche 17 Mars 2013 à 00:12

    #menubar_notifications:hover #menubar_notifications_btnbackgroundCOULEUR}

    54
    Dimanche 17 Mars 2013 à 10:14

    Merci !

    55
    Angel ❣ Profil de Angel ❣
    Mardi 23 Avril 2013 à 19:09

    C'est quoi le code pour que quand on a des nouvelles notifications sa change l'image , sa met une autre image , par exemple moi je voudrais en mettre une au sa fait "new" 

    56
    Mercredi 24 Avril 2013 à 11:26

    Je sais pas... j'ai cherché longtemps mais j'ai pas trouvé le bon sélecteur. Désolé

    57
    KitsuChan Profil de KitsuChan
    Dimanche 12 Mai 2013 à 11:56

    Salut! Maintenant, on a un coeur dans notre menubar pour mettre des blogs en favoris mais je ne sais pas comment enlever la séparation blanche à côté de celui ci. Peut tu m'aider?

    Au fait, peut t-on enlever les petits logos (tels que le coeur, le petit personnage, bref les petites images à côté de configurations, compte, notifications... Merci d'avance!

    58
    Dimanche 12 Mai 2013 à 17:40

    Pour la barre blanche de séparation:

    #menubar_favorites {
    background-image: none;
    }

    Pour les images, hum... essaye ceci à tout hasard:

    #menubar img {
    opacity: 0;
    }

    59
    KitsuChan Profil de KitsuChan
    Dimanche 12 Mai 2013 à 17:51

    Merci!! 

    60
    Dimanche 12 Mai 2013 à 18:57

    derien

    61
    Yu-kun Profil de Yu-kun
    Samedi 22 Juin 2013 à 10:52

    Soit c'est moi qui ai faite une erreur ou bien je comprends plus rien... :/ en faite j'ai tous fais comme il fallais mas le truc est que des que je passe ma souris sur un bouton du menubar ben l'image que j'ai mise est pas assès grande, les écritures dépasse l'imege :/

    je vais esdsayer un truc et si ça marche pas je le dis (pareil si ça marche)

    62
    Yu-kun Profil de Yu-kun
    Samedi 22 Juin 2013 à 11:00

    c'est bon, problème résolu, mon image était tout simplement trop petite ^^ Par contre j'aimerais bien savoir comment on fais un effet de lumière sur le menubar comme sur ce blog et aussi ce mode de selection, enfin, quand je passe la souris sur le menubar de ce blog ben ç fais une spirale, et j'aime bien, donc si il y a un tuto ici, c'est le bienvenue ! >_0

    63
    Dimanche 23 Juin 2013 à 11:37

    Je ne ferais pas du tuto la dessus, ce que tu demande, c'est de la personnalisation, il faut jouet avec les propriété qu'on connais pour faire ça. C'est comme ça que j'ai appris: j'ai regardé des tutos, j'ai fait des tests et du coup, j'ai compris beaucoup d'attribut qui, une fois mélangé, peuvent donner des trucs asser simpa.

    64
    Yu-kun Profil de Yu-kun
    Dimanche 23 Juin 2013 à 21:36

    Ok, merci quand même.

    65
    Mercredi 2 Octobre 2013 à 00:58

    Nickel, merci. J'ai pas tout utilisé, chacun ses gouts. ^^

    66
    Mardi 26 Novembre 2013 à 19:11

    Merci beaucoup tes CCS sont simple à utilisé donc j'adore et me servent bien ^^

    Un ENORME merci ! 

    67
    Samedi 8 Février 2014 à 21:58

    Merci beaucoup ! Comment faire pour changer la couleur du pseudo, car le bleu sur le vert ca marche pas ^^ et pareil pour les "sous-menu" survoler : ex : Contenu _> Nouvel Article, quand je passe la souri dessus, sa fait bleeu, comment changer cette couleur ? 

    Merci ! 

    68
    Lundi 15 Septembre 2014 à 17:20

    j'essaie de mettre des images mais ça marche pas ! awwarfcryChaton(s)



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :