• Barre d'Outil Eklablog


    Voici le sélecteur à utiliser pour modifier le fond, le type de police ou autre

    #menubar {propriété: valeur;}


    Pour enlever les traits de séparation et les fonds bleu au survol:

    #menubar_section_content,
    #menubar_section_appearance,
    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_account,
    #menubar_section_help,

    #menubar_notifications,
    #menubar_signin,
    .menubar_button
    .menubar_section:hover,
    .menubar_section,
    #menubar_favorites,
    .menubar_separation,
    #menubar_logobackgroundnone;}
    #menubar_favorites_btn
    #menubar_nofavorites_btn:hover backgroundurl("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn backgroundurl("/images/menubar/icon_favorite.png")no-repeat 50% 50%
    } 



    Pour la petite flèche permettant d'afficher ou de masquer la menubar, voici l'image de base : 

    La flèche en haut a droite, c'est celle qui permet de refermer la barre d'outil. Celle du bas, c'est son aparence au clique. Les fleches de gauches, c'est lorsque la barre est fermée.
    Et mettez ce code dans votre css

    #menubar_hide{ background-image: url("IMAGE");}

    Pour la flèche qui remet la barre, c'est ça (même image que ci-dessus)

    #menubar_show { background-image: url("IMAGE");}

     

    Menubar, les onglets

    Voici le code

    .menubar_section li { propriété: valeur; }
    .menubar_section li:last-child {
               propriété: valeur; }


    Si vous voulez mettre des images et que vous ne voulez pas modifier les tailles, faites le sur ce model là:



     


    Pour ceux qui veulent mettre des couleurs

    .menubar_section li { propriété: valeur; }
    .menubar_section li:hover { propriété: valeur; }
    .menubar_section li:last-child {propriété: valeur; }
    .menubar_section li:last-child:hover {propriété: valeur; }

    La ligne en rouge est ce qui sera affiché au survol

    Changer le fond de "contenu", "apparence"... 

     .menubar_section:hover div{
                       background: valeur;}

    Mettez "background: none" pour qu'il n'y ai ni image ni couleur.

    Menubar : Notifications

    #menubar_notifications:hover
    #menubar_notifications_btn{
                       background: valeur;}

    Menu déroulant des notification:

    #notifications_panel a,
    #notifications_panel div{ background: valeur}

    Pour ceux qui veulent mettre une image, suivez ce model

    Menu Notifications

    Explications :

    Le premier machin blanc signifie les notifications auquel vous voyez habituellement. Le machin bleu clair signifie le moment où on a une nouvelle notifications. Le premier machin bleu foncé signifie n'importe qu'elle survol. Le deuxième machin blanc signifie le 'afficher les notifications' en mode normal et le deuxième machin bleu foncé signifie 'afficher les notifications" au survol. ^^

    Couleur ou image différente:

    #notifications_panel a,
    #notifications_panel div {background: valeur}
    #notifications_panel a:hover, 
    #notifications_panel div:hover {background: valeur}
    #notifications_panel
    .new_notification {background: valeur} 

    En noir, c'est l'apparence normal
    En rouge, c'est au survol
    En bleu, c'est pour les nouvelles notification

    Blog Favori

    Pour supprimer la barre de séparation:

    #menubar_favorites{background-image: none}

    Pour enlever le fond bleu:

    #menubar_favorites_btn, #menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; } }

    Pour modifier l'image du coeur gris:

    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover { background: url("IMAGE") no-repeat 50% 50%;}

    Pour modifier l'image du coeur rouge:

    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn  {background: url("IMAGE") no-repeat 50% 50%;}

    Un immense merci à EtoileSosso et Jak-Ich_an pour avoir aider à trouver tout ça

    Tags Tags : , , , ,
  • Commentaires

    1
    Vendredi 30 Décembre 2011 à 21:27

    Est ce qu'il est possible de supprimer les fleche ?

    2
    Vendredi 30 Décembre 2011 à 21:38

    Bien sur ;)

    tu prend le sélecteur de la flèche:

    #menubar_hide

    et tu mets une largeur de 0px ;)

    #menubar_hide {width: 0px;}

    3
    Vendredi 30 Décembre 2011 à 21:44

    Merci ^^

    4
    Vendredi 30 Décembre 2011 à 21:46

    de rien =)

    5
    Samedi 31 Décembre 2011 à 11:19

    Sa peut paraitre debile , mais ou est l'erreur dans ce css ?

    Sa marche pas pour changer la couleur du text

    #menubar {text: #f491b0;}

    6
    Samedi 31 Décembre 2011 à 11:21

    Pour changer la couleur du texte, c'est la propriété "color"

    #menubar {color: #f491b0;}

    7
    Samedi 31 Décembre 2011 à 11:24

    Ah oui ^^"

    Je mettais trompée de mot , merci encore !

    8
    Samedi 11 Février 2012 à 17:22

    Nagalia, quelle mot de propriété il faut utiliser pour changer la police car là je suis perdue x.x

    9
    Dimanche 12 Février 2012 à 00:58

    Misskikarin pour changé la police d'écriture de la barre du doit mettre ce code:

    #menubar {font-familyPOLICE D'ECRITURE;}

    10
    Dimanche 12 Février 2012 à 01:00

    J'ai trouvé un code plus rapide et plus court pour enlevé les barres de séparations si sa intérèssent:

    .menubar_section {background-imagenone}

    #menubar_notifications {background-imagenone}

    11
    Vendredi 17 Février 2012 à 07:12

    Waouw ! Merci beaucoup ! Ca m'a bien servit, j'ai pu personaliser entièrement ma barre d'outils ! :D

    12
    Vendredi 17 Février 2012 à 13:33

    Merci beaucoup Ssk_Kill18 !

    PS : C'est pas Misskikarin c'est Misskirarin :D

    13
    Vendredi 17 Février 2012 à 19:38

    De rien Misskirarin x)

    14
    Jeudi 23 Février 2012 à 11:37

    Comme je n'est toujours pas compris(:/)Je voudrait te demander comment :

    -Changer l'image quand on clique sur notification , mon compte...etc(l'image du menu déroulent)et comment changer l'image  ou le texte au survol

    -Changer l'image quand on va sur message (la fenetre verte)

    Désolée ...

     

    15
    Jeudi 23 Février 2012 à 12:33

    Salut Shimy, Alors pour changer l'image des notifs il faut que tu prennes cette image:

    Notifs

    Et tu change les couleurs comme tu l'souhaites:

    La première partie blanche = La couleur principale

    La partie bleu claire = Quand tu as un message non lu

    La première partie bleu foncé = Quand tu survoles un message

    La 2e partie blanche (la petite) = La couleur principale du bouton "Afficher toutes les notifications"

    & la dernière partie bleu foncé = Quand tu survol le bouton "Afficher toutes les notifications"

     

    Maintenant à ton logiciel de graph' x)

    & une fois que t'as fini ton image tu mets ce code dans ta partie css:

    #notifications_panel a,
    #notifications_panel div {background:url("URL DE TON IMAGE")no-repeat}

    16
    Jeudi 23 Février 2012 à 12:36

    Donc , j'enregistre l'image , je modifie la couleur , et je met l'url??

    17
    Jeudi 23 Février 2012 à 12:55

    Même chose pour les menus déroulant, tu prends cette image:

    Menu Déroulant

    La partie blanche = la couleur principale des boutons du menu déroulant

    La partie bleu = la couleur du bouton survolé

    Quand t'as fini tu mets ce code:

    .menubar_section li {background:url("URL DE TON IMAGE"no-repeat;}

     

    Et cette image c'est pour le dernier bouton du menu déroulant, tu prends cette image:

    Menu Déroulant

    La partie blanche = la couleur principale du dernier bouton du menu déroulant

    La partie bleu = la couleur du dernier bouton survolé

    Quand t'as fini tu mets ce code:

    .menubar_section li:last-child {background:url("URL DE TON IMAGE")no-repeat;}

    18
    Jeudi 23 Février 2012 à 12:56

    Ouai voilà t'as tout compris x)

    19
    Jeudi 23 Février 2012 à 13:00

    La je vais la modifier parce que elle me plait pas celle que j'ai faites...

    20
    Jeudi 23 Février 2012 à 13:05

    Derieusement , tu le trouve comment ma barre de notification maintenant??

    21
    Jeudi 23 Février 2012 à 13:21

    Je l'a trouve un peu sombre,

    essaye plutot avec une image qui gêne pas l'écriture ^^

    Jolie blog x)

    22
    Jeudi 23 Février 2012 à 20:57

    merci^^

    Comment on fait pour modifier la barre d'ouyil de Mon compte,configuration...ETC?

    23
    Vendredi 24 Février 2012 à 13:11

    Pour changé les boutons (Contenue, Apparence, Interactions, Etc..)

    C'est: .menubar_section div {background-imageurl("URL DE TON IMAGE")}

    Et au survol: .menubar_section:hover div {background-imageurl("URL DE TON IMAGE")}


    Et pour le bouton notification:

    C'est: #menubar_notifications_btn {backgroundurl("URL DE TON IMAGE")repeat-x;} 

    Et au survol:

    #menubar_notifications:hover

    #menubar_notifications_btn{backgroundurl("URL DE TON IMAGE")repeat-x;}

    24
    Jeudi 8 Mars 2012 à 01:24

    Comment on fait pour faire un effet lumineux sur le texte ou alors, si c'est pas possible, le mettre en GRAS, merci :)

    25
    Samedi 10 Mars 2012 à 14:31

    #menubar {text-shadow: Xpx Xpx Xpx #couleur}

    Voir tuto ombre

    26
    Samedi 10 Mars 2012 à 17:08

    Oki merci

    27
    Aikya Profil de Aikya
    Lundi 16 Avril 2012 à 15:56

    Bonjour ^^"

    Déjà merci pour ce super tuto, mais j'ai un problème: J'ai recopié le code, mis mon image et tout, mais il y a quand même des trait blanc de sépaation tout moches :X http://le-monde-des-dolls.eklablog.com/pullip-de-2003-c17838990

    Le code: .menubar_section {background-image: url(http://data0.eklablog.com/le-monde-des-dolls/perso/sans%20titre.png)}
    #menubar_notifications {background-image: url(http://data0.eklablog.com/le-monde-des-dolls/perso/sans%20titre.png)}

    28
    Oelia✿ Profil de Oelia✿
    Dimanche 22 Avril 2012 à 16:53

    Merci beaucoup pour ce tuto !!! 

    Moi qui ne comprenais rien au codage j'ai trouvé ça super simple grâce à tes explications !! :D

    Bonne continuation et à bientôt !!

    29
    Vendredi 11 Mai 2012 à 23:06

    Bonjour j'ai besoin d'aide svp voici le code que j'ai entré pour changer la couleur de la barre d'outil et il y a seulement les lettres qui ont changé de couleur, merci de me répondre

    #menubar {propriétévaleur;
    #menubar {color:#9b85bf;}
    #menubar {background-imagehttp://i198.photobucket.com/albums/aa193/Angelface_064/TUILES%20ET%20RUBANS/fondmessisis08332.gif;}

    30
    Vendredi 11 Mai 2012 à 23:08

    merci encore

    31
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 3 Juin 2012 à 13:22

    Coucou j'arrive pas ! j'ai tout mis dans le code css mais sa ne marche pas quelqun pourrait m'aidé ??

    32
    Dimanche 3 Juin 2012 à 16:39

    Tu peux montrer ton code?

    33
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 3 Juin 2012 à 16:59

    Ca rentre pas ^^

    34
    Dimanche 3 Juin 2012 à 17:01

    Ben je peux pas vraiment t'aider alors ^^'

    35
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 3 Juin 2012 à 17:47

    Bah je te donne permisson 3 et le mot de passe et tu me le fait ??

    36
    Dimanche 3 Juin 2012 à 21:48

    Euh non ^^'
    J'aide, mais je fais pas à votre place ;)
    Si tu ne comprend pas tes erreurs, tu rederas toujours les mêmes. 

    Copie et colle ce que tu as mis dans ton css en commentaire

    37
    Mrs.Barbara Profil de Mrs.Barbara
    Lundi 4 Juin 2012 à 18:36

    #menubar_hide{ background-image: url(http://www.google.fr/imgres?q=bulles+violette&um=1&hl=fr&biw=1920&bih=890&tbm=isch&tbnid=ssAOHje53spUrM:&imgrefurl=http://forum.femmeactuelle.fr/Actu/Actualite-nationale/posts/11-Novembre-journee-Nationale-du-Souvenir-667589.4.aspx&docid=vSEpe4pTJHc7fM&imgurl=http://fr.dreamstime.com/bulles-d-air-couleur-violette-thumb356108.jpg&w=400&h=300&ei=YEfLT_y2F4yKhQeB_uXSDw&zoom=1);}.menubar_section li { propriété: valeur; }
    .menubar_section li:last-child {
               propriété: valeur; }.menubar_section li { propriété: valeur; }
    .menubar_section li:hover { propriété: valeur; }
    .menubar_section li:last-child {propriété: valeur; }
    .menubar_section li:last-child:hover {propriété: valeur; }
    .menubar_section:hover div{
                       background: valeur;}#menubar_notifications:hover
    #menubar_notifications_btn{
                       background: valeur;}

    #notifications_panel a,
    #notifications_panel div{ background: valeur}

    #notifications_panel a,
    #notifications_panel div {background: valeur}
    #notifications_panel a:hover,
    #notifications_panel div:hover {background: valeur}
    #notifications_panel
    .new_notification {background: valeur}

    38
    Mrs.Barbara Profil de Mrs.Barbara
    Mardi 5 Juin 2012 à 20:01

    Aloor ?? :)

    39
    Mardi 5 Juin 2012 à 21:37

    Je ne comprend pas ce que tu as voulu faire ^^'

    Il faut remplacer "propriété: valeur" par l'effet que tu veux mettre.

    40
    Jeudi 14 Juin 2012 à 09:45

    C'est bien pratique tout ces tutos... ^^

    41
    Cheal
    Mercredi 27 Juin 2012 à 16:23

    J'ai un petit problème ...Après voir enregistrer le code pour le survole de contenu... Ca me donne ça:

    Comme vous pouvez le voir il y a du violet clair au debut puis le dernier module est en violet foncé.Pouvez -vous m'aider?

     

     

    42
    Cheal
    Mercredi 27 Juin 2012 à 16:53

    Pou rles notifications:Il faut remplacer Background et valeur par la couleur ou par le lien?

    43
    Mercredi 27 Juin 2012 à 17:09

    Le dernier correspond à

    .menubar_section li:last-child {propriété: VIOLET CLAIR; }
    .menubar_section li:last-child:hover {propriété: VIOLET FONCE; }

    avec background: valeur, tu peux mettre ce que tu veux ;) sois la couleur, soit le lien

    44
    Cheal
    Mercredi 27 Juin 2012 à 17:12

    D'accord merci

    45
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 1er Juillet 2012 à 10:32

    #menubar {propriété: valeur;} pour ce code la pour la propriété il faut mettre se que tu veut qui change comme le fond, l'ecriture ect ... et valeur pour la couleur, l'ilmage ect ... quel mot faut-il mettre  a la place de propriéter pour le fond ??


    Merci d'avance :).

    46
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 1er Juillet 2012 à 10:45

    J'ai trouver pour le code ci-dessus, cepandant j'ai un autre probleme ! xD


    .menubar_section li { propriété: valeur; }
    .menubar_section li:hover { propriété: valeur; }
    .menubar_section li:last-child {propriété: valeur; }
    .menubar_section li:last-child:hover {propriété: valeur; }


    Sur ce code, les 2 premiers sont pour le fond ,  et les deux deuxiemes pour l'ecriture .


    Quel mot faut-il mettre a la place de propriété pour l'ecriture ?


    Merci d'avance :).

    47
    AmberAerin Profil de AmberAerin
    Dimanche 8 Juillet 2012 à 04:37

    Tout d'abord, bonjour ou bonsoir ^^

     

    Et puis, je te remercie pour ce tuto et je remercie les commentaires qui m'ont aussi aidés à régler mes petits problèmes. Cependant, il m'en reste un... Un tout petit mais qui me géne assez en faite... Je vais donc essayer de m'expliquer le mieux possible...

     

    J'ai tout modifié sans problème avec des couleurs. Cependant, quand je passe sur le petit symbole des notifications, il reste bleu qu'importe ce que je change. Quand je clique dessus, pas de problème, les changements ont été faits et tout... Mais il reste que quand je passe dessus, il s'affiche bleu et pas rouge comme les autres...

     

    J'espère que vous pourriez m'aider avec ce petit souci,

     

    Cordialement.

    48
    Dimanche 8 Juillet 2012 à 12:51

    Merci nagalia , enfaite j'était déja aller sur manga graph pur faire mes barres et je me suis dit que toi tu aurrait les meme code... Mais enfaite non !

    Pour TheMarmotOfTheDevi : ilfaut que tu mette se code :

    #menubar_notifications:hover

    #menubar_notifications_btn{

    background: red;} 

    49
    AmberAerin Profil de AmberAerin
    Dimanche 8 Juillet 2012 à 15:59

     Un grand merci à toi Nekoo Chocolaa ! Ca a marché. Merci merci <3

    50
    Jeudi 12 Juillet 2012 à 20:32

    (Je n'ai pas tout lu, donc désolée si ça a déjà été mis/demandé >.<")

    J'ai bien compris pour le machin des notifications, mais je me demandais si c'était possible de changer la couleur du texte dans le machin des notifications ? Parce que pour moi, Gris foncé sur noir c'est pas trop top...

    (Est ce que ma phrase est compréhensible ?)

    51
    Neko Chocolaa pa co'
    Vendredi 13 Juillet 2012 à 09:16

    TanaGirl: Notification quand c'est pas survolé : 

    #notifications_panel a,

    #notifications_panel div {color:'COULEUR DU TEXTE'}

    Quand c'est survolé :

     #notifications_panel a:hover,

    #notifications_panel div:hover {color:'COULEUR DU TEXTE'}

    Quand ta une nouvelle not' :

    #notifications_panel

    .new_notification {color:'COULEUR DU TEXTE'} 

    52
    Vendredi 13 Juillet 2012 à 09:24

    MRS.Barbara

    .menubar_section li { propriété: valeur; }
    .menubar_section li:hover { propriété: valeur; }
    .menubar_section li:last-child {propriété: valeur; }
    .menubar_section li:last-child:hover {propriété: valeur; }

    Ce qui sont en rouge ses comme pour mon compte: Deconnection

    Sur chacun il faut effacer proprièté:valeur et mettre : color:'COULEUR DU TEXTE'



    53
    Samedi 14 Juillet 2012 à 02:55

    Merci beaucoup Nekoo_Chocolaa ! Et c'est possible pour les autres parties dela barre ? (Contenu, Apparence, Interactions etc)

    Désolée pour les questions :S

    54
    Samedi 14 Juillet 2012 à 09:49

    Oui il fait mettre les code que j'ai mis commentaire 52 , mais faut rajouter les sélecteur

    55
    Swaggy
    Samedi 14 Juillet 2012 à 17:22

    Nagalia j' ai un probléme ! Tu voie cette image :

    Ben tu voie l'image au survol du menu ben ça apparait que à la fin ^^'

    56
    Samedi 14 Juillet 2012 à 17:25

    Ah merci je n'avais pas vu ^^"

    57
    Mrs.Barbara Profil de Mrs.Barbara
    Dimanche 15 Juillet 2012 à 13:03

    Merci Nekoo chocolaa :) !

    58
    Jeudi 19 Juillet 2012 à 18:09

    merci ♥ =)

    59
    Mercredi 25 Juillet 2012 à 11:41

    Salut ;) Hmm...C'est normal que ce code ne marche pas ?

    #menubar {background-color:#9CAA52;}

    C'est pour changer le fond du menubar...Mais je ne sais pas ce qui ne va pas :/

    60
    Mercredi 25 Juillet 2012 à 12:29

    Je ne suis pas experte la dedans, mais il me semble que c'est

    #menubar {background: #9CAA52;}

    Il n'y a pas le color ^^

    61
    Mercredi 25 Juillet 2012 à 18:24

    TanaGaki: Background-color est la propriété qui gère uniquement la couleur de fond. Tu as aussi background-image, background-position... Background permet de tout regrouper en une seule ligne ;)

    Shimyjadina: C'est parce que par défaut, il y a une image dans le menubar. Il faut d'abord désactiver l'image pour voir la couleur

    #menubar {background-color:#9CAA52;
                     background-image: none;} 

    62
    Mercredi 25 Juillet 2012 à 19:28

    Ah D'accors :)

    Merci !

    63
    Tsuna\HyperMode Profil de Tsuna\HyperMode
    Mercredi 22 Août 2012 à 01:26

    Salut Nagalia... 

    Premierement merci pour le tuto =)

    Je voudrais mettre mes onglet transparent mais sa ne marche pas... C'est blanc et sa ne marche que quand la souris est sur l'onglet (survole)

    64
    Mercredi 22 Août 2012 à 15:50

    Merci je l'ai déjà fait sur mon blog principal, je mets cet article dans les astuces, gros bisous!

    65
    Kyuura Profil de Kyuura
    Dimanche 26 Août 2012 à 19:24

    Hello~

    Tout d'abord, merci pour le tuto, ça aide surement beaucoup de personne, moi comprise.
    Cependant j'ai une petite question :

    Est-ce qu'il est possible d'agrandir la barre d'outil ?

    Je parle de la hauteur.
    Je voulais faire une barre de ?x26px et laisser dépasser un engrenage [mon thème actuel étant Steampunk] dans la hauteur. Ou tout simplement, ajouter un effet d'ombre sur le bas de la barre.

    Thank U.

    66
    bianca4251 Profil de bianca4251
    Mercredi 7 Novembre 2012 à 17:49

    Bonjour êtres du jour,

    Bonsoir êtres du soir.

    Je voudrais juste savoir comment on met une image en fond du menubar. J'ai pas tout compris. Merci d'avance!


    67
    Mercredi 7 Novembre 2012 à 18:07

    #menubar {background-image: url("IMAGE");}

    68
    bianca4251 Profil de bianca4251
    Mercredi 7 Novembre 2012 à 18:21

    Merci beaucoup!! :)

    69
    Jeudi 8 Novembre 2012 à 12:35

    comment on change la couleur d'ecriture des sous menus?

    70
    Jeudi 8 Novembre 2012 à 13:27

    .menubar_section li {color: Couleurs en anglais; }

    remplace couleurs en anglais par une couleurs en anglais

    71
    Jeudi 8 Novembre 2012 à 14:08

    merci beacoup!ca marche!

    72
    Vendredi 9 Novembre 2012 à 13:07

    coucou

     moi je voulait changer ma barre de menu ou il y

    a  configuration contenu apparance etc en haut elle et  blanche  et j'aime pas comment faire  merci 

    73
    Aikya Profil de Aikya
    Dimanche 11 Novembre 2012 à 12:34

    Bonjour les gens,

    Quelqu'un veux  bien m'aider à chercher l'erreur s'il vous plait >.< ? Parce que moi ça me donne un truc super moche...

    #menubar {background-color: #5B1600;}
     .menubar_section {background-color: #5B1600;}
     #menubar_notifications {background-color: #5B1600;}

    74
    Dimanche 11 Novembre 2012 à 15:24

    enlève l'image du menubar:

    #menubar{background-image: none;
                    background-color: #5B1600;}

    75
    Aikya Profil de Aikya
    Dimanche 11 Novembre 2012 à 15:34

    Merciiii ^w^

    76
    milari-pullip Profil de milari-pullip
    Samedi 24 Novembre 2012 à 08:44

    Ca va paraitre bete mais je nai pas compris par quoi remplacer le "("IMAGE")" dans ce code 

    #menubar_notifications {background-imagehttp://mycenes.m.y.pic.centerblog.net/fzpd9rh7.gif("IMAGE")"}

     ^^"

    77
    milari-pullip Profil de milari-pullip
    Samedi 24 Novembre 2012 à 10:36

    enfait c'est bon j'ai réussi :)

    78
    Dimanche 13 Janvier 2013 à 19:12

    Bonsoir.
    Alors, j'aurai besoin de votre aide. J'ai voulu mettre ma barre d'outils en blanc ( ou transparente mais j'ai pas trouvé ) ainsi que les onglets sauf que je n'y arrive pas. Ca me change uniquement la couleur du texte et tout devient illisible. Voilà les codes que j'ai inséré :

    .menubar_section li { color: white; }
    .menubar_section li:last-child {
               color: white; }
    #menubar { color: white;}

    J'aimerai bien savoir où je me suis trompée. ^^' Merci d'avance.

    79
    Mercredi 20 Février 2013 à 19:45

    comment tu fait pour que les rubrique en au dessendes  au survol ?

    Merci de tes réponces

    80
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Vendredi 1er Mars 2013 à 18:24

    Peu t'on mettre la barre d'outil transparente ?

     

    81
    #Directioner
    Lundi 4 Mars 2013 à 19:27

    Je suis perdue. Comment on change " l'image " de la barre de notif' ?

    82
    Mitsukø Profil de Mitsukø
    Mardi 5 Mars 2013 à 14:08

    J'ai beaucoup de mal, je suis pas très forte en CSS , quelqu'un peux me donner le code entier pour changer ça ? 

    http://fanstasy-graph.eklablog.net/images/menubar/notifs_item.png?1

    83
    Mercredi 13 Mars 2013 à 21:11

    Wah! Tu expliques hyper bien! Mais je ne coomprend pas >.> Désolée... Tu peux répondre à ma question s'il te plait : 

    Quel est le code CSS (Dans la barre de notif') pour mettre un fond aux nouvelles notifications que l'on viens d'avoir, et pour celle que l'on survole? Merci d'avance. :D

    84
    Mercredi 13 Mars 2013 à 21:15

    En fin de compte, j'ai trouvé, il fallait juste que je cherche un peut :D

    85
    Mercredi 13 Mars 2013 à 21:16

    En tout cas merci beaucoup pour cette aide bien préscieuse UwU

    86
    Samedi 23 Mars 2013 à 23:37

    Bonsoir, 

    j'ai réussi à modifier la barre d'outil (je ne sais pas trop comment j'ai pu faire). Un dernier problème j'ai une ligne blanche qui apparait, comment l'enlever ?

    http://kiefersutherlandfilmographie.ek.la/

    Une autre question : comment afficher seulement sur cette barre le logo de eklablog ?

    Merci

    87
    EtoileSosso Profil de EtoileSosso
    Dimanche 12 Mai 2013 à 13:12

    Update pour la partie « favoris », vous avez sans doute remarquer que les barres blanches pouvaient être enlever de partout sauf pour les favoris, n'est-ce pas ?

     

    Prochainement je pourrais vous apprendre comment changer les trucs genre « contenu » ou apparence ^^

    88
    Myhana Profil de Myhana
    Samedi 15 Juin 2013 à 18:14

    coucou nagalia,c est pas encore fini ,j avance pas a pas et j espère surement ,merci beaucoup pour ton aide 

    89
    Shuchu Profil de Shuchu
    Lundi 8 Juillet 2013 à 01:53

    Merci beaucoup pour la mise à jour Sosso.

    90
    Mercredi 10 Juillet 2013 à 14:11

    Merci beaucoup pour ces infos claires et utiles :))

    91
    Sweety ✖ Profil de Sweety ✖
    Vendredi 12 Juillet 2013 à 18:31

    Le code pour enlever le fond bleu aux favoris sa me met "le code CSS comporte une erreur"

    92
    Vendredi 12 Juillet 2013 à 19:06

    Réessais avec ce code (il y avait un "}" en trop et il en manquait un) ça devrait marcher :

    #menubar_favorites_btn#menubar_nofavorites_btn:hover background:  url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%
     #menubar_favorites_btn:hover}
     #menubar_nofavorites_btn backgroundurl("/images/menubar/icon_favorite.png")no-repeat 50% 50%} 

    93
    Sweety ✖ Profil de Sweety ✖
    Vendredi 12 Juillet 2013 à 19:09

    Oui la sa a marché merci :)

    94
    Evil Bunny Profil de Evil Bunny
    Samedi 10 Août 2013 à 17:47

    J'ai un code pour enlever le "gagner des cadeaux":

    div#menubar div a strong {display:none;}

    EDIT: Ca enlève aussi les pseudos des notifications -_-'

    95
    Blue Jean Profil de Blue Jean
    Vendredi 23 Août 2013 à 15:40

    J'ai vu que sur certains blogs, la barre d'outil ne s'affichait qu'au survol, est ce qu'il faut payer 150€ (l'offre pro, quoi.) pour pouvoir le faire ? Je ne pense pas, mais je demande toujours ^^'

    96
    Sweety ✖ Profil de Sweety ✖
    Vendredi 23 Août 2013 à 16:04

    Non y a un code "opacité"

    97
    Blue Jean Profil de Blue Jean
    Vendredi 23 Août 2013 à 18:19

    Merci, je viens de découvrir ça *0* !

    98
    Mercredi 28 Août 2013 à 11:32

    Pour ce code : #menubar_favorites {background-image: none}}

    Il n'y aurait pas une accolade en plus ?

    99
    undercover
    Vendredi 30 Août 2013 à 21:53

    et pour le symbole de snotifs ? pour le changer ?

    100
    Samedi 7 Septembre 2013 à 10:38

    Salut,

    Bravo pour tout ce que tu fais, c'est chouette ! Le nouveau design, j'aime moins, je préfèrais les 2 précédents.

    Enfin, juste pour te dire que ton code pour enlever le fond de Blogs Favoris comporte une erreur. Le bon code est le suivant :

    #menubar_favorites_btn#menubar_nofavorites_btn:hover 

        backgroundurl("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%
    }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn 
    {
        backgroundurl("/images/menubar/icon_favorite.png")no-repeat 50% 50%
    }

    Bon courage pour la suite ;)

    101
    Jeudi 26 Septembre 2013 à 07:55

    Salut :p J'ai un problème avec le CSS ^^ Quand je rentre ce code :

    #menubar_favorites_btn, #menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%;
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; }
     
    cela m'indique qu'il y a une erreur. Help please :p
    102
    Jeudi 26 Septembre 2013 à 17:36

    La première accolade n'est pas refermée par la suite :

    #menubar_favorites_btn
    #menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%; }

    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; }

    Normalement cela devrait marcher ^.^ Si ça ne marche pas je pense que l'adresse de l'image est incomplète ...

    103
    Vendredi 27 Septembre 2013 à 16:47

    Ah oui, effectivement ça marche :p Merci !:)

    104
    Vendredi 27 Septembre 2013 à 19:11

    De rien ^.^

    105
    Mardi 15 Octobre 2013 à 20:23

    Voila un petit code si le logo d'Ekla à gauche vous gène, pour le mettre à droite. (Perso le voir à gauche me tracasse!)

    #menubar_logo{margin-top4pxright:0pxpositionabsolute;
    }

    106
    Mardi 15 Octobre 2013 à 23:32

    BlackMage c'est aussi interdit ^^

    107
    Mercredi 16 Octobre 2013 à 07:27
    De le mettre à droite? Vraiment? :o
    108
    Mercredi 16 Octobre 2013 à 11:40

    Non de virer le logo ou de le modifier

    109
    Mercredi 16 Octobre 2013 à 13:57

    Je l'ai juste mis à droite. 

    110
    Dimanche 20 Octobre 2013 à 12:50

    Bonjour tout le monde !

    Je voudrai changé l'icone de favoris et de notifications . J'ai donc mis ce code mais sa ne marche pas :

    #menubar_notifications_btn {backgroundurl("http://ekladata.com/MquGR53-3mMhNW-OjQWwZhq-_sQ.gif")no-repeat 50% 50%;}

    #menubar_notifications:hover
    #menubar_notifications_btn{backgroundurl("http://ekladata.com/rWqTAwu9Y-Sl4DPAlTGYQjMob-g.png")no-repeat 50% 50%;}

    #menubar_favorites_btn,
    #menubar_nofavorites_btn:hover backgroundurl("http://ekladata.com/ovvaE-_GUVrmrKOZohsFiqOb5VA.png"no-repeat 50% 50%;}

    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn  {backgroundurl("http://ekladata.com/7PBD29-OiRcogOc7voaUtJfinzs.png"no-repeat 50% 50%;}

    Quelqu'un peut m'aider s'il vous plaît ? Merci d'avance .

    111
    Lundi 21 Octobre 2013 à 20:24

    Merci pour le code BlackMage, c'est beaucoup mieux à droite :')

    112
    Samedi 16 Novembre 2013 à 13:40

    Bonjour,

    Tout d'abord merci beaucoup pour cet excellent tuto, c'est génial ! Tout est très clair, cependant, j'ai mis tout le code css mais il reste encore des traits de séparations blancs qui me gènent... De plus, je ne sais pas comment faire pour changer la couleur du pseudo sur la barre d'outils, il reste bleu alors que j'ai mis tout les autres en noir.

    Voici le code que j'ai entré :

    .menubar_section {background-imageurl("http://www.photoshopressources.com/wp-content/uploads/2011/08/85splatteredpapertexture.jpg");}
    #menubar_notifications {background-imageurl("http://www.photoshopressources.com/wp-content/uploads/2011/08/85splatteredpapertexture.jpg");}
    #menubar {background-imageurl("http://www.photoshopressources.com/wp-content/uploads/2011/08/85splatteredpapertexture.jpg");}
    #menubar_hidebackground-imageurl("http://www.photoshopressources.com/wp-content/uploads/2011/08/85splatteredpapertexture.jpg");}
    #menubar {color#000000;}
    #menubar_favorites {background-imagenone}

    Si quelqu'un pouvait m'éclairer là-dessus, je lui en serais reconnaissante ^^

    113
    Dimanche 17 Novembre 2013 à 15:37

    J'ai un petit problème :

    #notifications_panel a,
    #notifications_panel div {background:url("http://img11.hostingpics.net/pics/341807811.png")no-repeat}
    #notifications_panel a:hover
    #notifications_panel div:hover  {background:url("http://img11.hostingpics.net/pics/592729632.png")no-repeat}
    #notifications_panel
    .new_notification {background:url("http://img11.hostingpics.net/pics/556166833.png")no-repeat}

    Le code est normalement bon, MAIS. La dernière image pour les notifications ne s'affiche pas,

    c'est-à-dire que quand j'ai une nouvelle notification, la notification est comme si

    je l'avais déjà vue, vous voyez ce que je veux dire non ? Si quelqu'un pourrais m'aider

    s'il vous plait. Merci~

    114
    Dimanche 17 Novembre 2013 à 16:13

    Jack => On va essayer de chercher la solution. :)

    Yusumi => Tu as oublié un point virgule à la dernière ligne de ton code

    115
    Dimanche 17 Novembre 2013 à 16:18

    Ah, merci  ^^''

    EDIT : Ca ne marche toujours pas :/

    116
    Dimanche 17 Novembre 2013 à 16:54

    Rajoute une virgule après "notifications_panel "?

    117
    Lundi 18 Novembre 2013 à 16:18

    Toujours pas :/

    118
    Lundi 18 Novembre 2013 à 19:20

    D'accord merci EtoileSosso

    119
    Mardi 19 Novembre 2013 à 05:15

    J'ai le même problème que Yusumi, j'avais mis mon code il y a relativement longtemps et tout marchait correctement, et à l'arrivée de la nouvelle menubar il n'a plus fonctionné correctement :/

    120
    Jeudi 26 Décembre 2013 à 19:39
    Bonjour le code marchait super bien jusqu'à l'arrivée de la nouvelle menubar :/ Quelqu'un aurait-il la solution svp? Merci d'avance!
    121
    Vendredi 27 Décembre 2013 à 15:16

    Pour enlever les fonds bleus et les barres de séparations, il faut maintenant utiliser ce code. Le reste n'a pas changé ;)

    #menubar_section_content,

    #menubar_section_appearance,

    #menubar_section_interactions,

    #menubar_section_manage,

    #menubar_section_account,

    #menubar_section_help;

    #menubar_notifications,

    #menubar_signin,

    .menubar_button

    .menubar_section:hover,

    .menubar_section,

    #menubar_favorites,

    .menubar_separation,

    #menubar_logo{ background: none;}

    #menubar_favorites_btn, 

    #menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%; 

    }

    #menubar_favorites_btn:hover,

    #menubar_nofavorites_btn { background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; 

    122
    Vendredi 27 Décembre 2013 à 15:26

    Merci Nagalia! 

    123
    Dimanche 9 Février 2014 à 10:12

    En passant sur la barre d'outil sur ton blog, j'ai vu que, quand on survoler une tâche (Aide _> Boîte à Idées, par exemple), bah, ca passer du noir au blanc ! Moi, sur mon blog, ca reste toujours pareil !! Comment et quel code faut-il prendre ? Merci !! 

    124
    Dimanche 9 Février 2014 à 12:51

    Couleur principale :

    #menubar li {

    color: COULEUR;

    }

    Couleur au survol :

    #menubar li:hover {

    color: COULEUR;

     

    }

    125
    Dimanche 9 Février 2014 à 12:53

    et pour mettre deux ranger mais pas coller de menu dans l'header, c'est possible ? 

    126
    Dimanche 9 Février 2014 à 13:12

    Deux rangés de quoi ?

    127
    Dimanche 9 Février 2014 à 13:14

    bah j'ai deux lignes de menus en haut, je voudrais qu'il y en ai une en haut et une en bas ! z

    128
    Dimanche 9 Février 2014 à 14:05

    #menu a { margin-bottom : Xpx;}

    X correspondra à l'espacement entre ta ligne du haut et celle du bas. Essaie quelques valeurs, je pense que ça tourne autour de 150px.

    129
    Dimanche 9 Février 2014 à 14:10

    Merci ! C'est exatement ça !

    130
    Dimanche 9 Février 2014 à 20:44

    Bonsoir !
    J'ai un petit souci dans ma barre de menu. J'ai su supprimer toutes les séparations sauf une ! Je ne sais pas quel code utiliser pour elle... :/
    J'ai utilisé

    .menubar_section {background-imagenone;}

    #menubar_logo {backgroundnone;}

    Pour les autres, mais elle, elle survit toujours.

    D'avance merci ! :)

    131
    Dimanche 9 Février 2014 à 21:52

    Essaie avec celui-ci :

    .menubar_separation backgroundnone;}

    132
    Dimanche 9 Février 2014 à 22:22

    Aaaah super ! Merci énormément !

    133
    Jeudi 27 Février 2014 à 19:44

    Bonjour,

    Comment met-on de l'opacité dans la menubar ?? Je n'y arrive pas x)

    Merci d'avance !

    134
    Mardi 4 Mars 2014 à 00:59

    Halloween the cat -> #menubar {opacity: NOMBRE ENTRE 0 ET 1;}

    135
    Mardi 4 Mars 2014 à 09:59

    Oukiii ! Merci (Moi j'ai mis avec des % c'est pour ça !)

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    136
    Mardi 4 Mars 2014 à 17:31

    Bonjour,

    J'ai un petit problème pour le fond du menu déroulant des notifications : j'ai réussi à mettre une image transparente mais du coup, on voit encore l'ancien fond par défaut sur EklaBlog. Si vous ne comprenez pas, aller voir sur mon blog. Merci d'avance de votre aide !

    137
    Mardi 4 Mars 2014 à 19:20

    Essaie avec :

    #menubar_notifications { background : none;

    }

    138
    Mardi 4 Mars 2014 à 20:39

    Ca ne marche pas...

    139
    Mardi 4 Mars 2014 à 20:46

    Hm, quel code as-tu utilisé pour mettre une image ?

    140
    Mercredi 5 Mars 2014 à 07:39

    #notifications_panel a,
    #notifications_panel div {backgroundurl("http://ekladata.com/tL8o5phf51JaSofE2NFyUHGCJ5s.png");}
    #notifications_panel a:hover
    #notifications_panel div:hover {backgroundurl("http://ekladata.com/xNEYd4RU8NQf-hnIcXEmzeMZ3ag.png")}
    #notifications_panel
    .new_notification {backgroundurl("http://ekladata.com/tL8o5phf51JaSofE2NFyUHGCJ5s.png")

    Il y a peut être une erreur mais je ne la vois pas.

    141
    Lundi 14 Avril 2014 à 10:55

    Salut ! Tout d'abord un grand merci pour toutes les aides que tu fournis ici, c'est super ! Et justement, j'ai besoin d'un peu d'aide. Voila ce que je voudrais faire : 1- Dans la barre de menu eklablog, quand tu es en mode déconnecté et que tu consultes un site eklablog, il y a deux petits "v" de validation verts, devant "créer mon blog" et "créer mon compte". Est il possible de supprimer ce petits "v" ? ou au moins de modifier l'icone ? et comment ? 2- et ensuite, toujours dans cette même barre, en mode déconnexion, est il possible de DECALER vers la droite les accès de connexion ? En gros j'aimerais que les deux cases à remplir avec mon ID et mon mot de passe, soient plus sur la droite si c'est possible et que le tout (ça + "créer mon blog" et "créer mon compte" soit bien collés à droite de la page plutôt que d'être en plein milieu. Désolée si j'en demande beaucoup :$ Et merci d'avance pour ton aide ! Sarah

    142
    Vendredi 18 Avril 2014 à 03:34

    Bonjour, est-ce que quelqu'un connais le code pour changer la couleur du pseudo? Merci d'avance!

    143
    Vendredi 18 Avril 2014 à 07:15

    Frei, utilise ce code : 

    #menubar acolor#COULEUR;     
    }

    Il me semble que c'est ce que tu cherches.

    144
    Vendredi 18 Avril 2014 à 07:20

    @Rioko> Merci, c'est exactement ça que je cherchais :D

    145
    Vendredi 18 Avril 2014 à 07:24

    Super, contente que ce soit ça ^^

    146
    Samedi 26 Avril 2014 à 09:05

    Le code #menubar {color:white;} s'applique à tous les menus sauf 


    le compte. Quel est le code pour modifier le texte du compte dans la barre d'outil ?


    147
    Samedi 26 Avril 2014 à 11:24

    milari-pullip -> C'est : #menubar a 

    148
    Samedi 3 Mai 2014 à 12:05

    bonjour ! Je voudrais savoir quel est le sélecteur pour le compte dans le menubar

    comme là :

    149
    Samedi 3 Mai 2014 à 12:43

    #menubar_section_account

    150
    Samedi 3 Mai 2014 à 12:44

    Merci ! :)

    151
    Samedi 17 Mai 2014 à 12:17

    Comment on fais pour la mettre dans l'header la barre d'outils ? 

    Merci :) 

    152
    Samedi 17 Mai 2014 à 12:25

    Comme ici tu veux dire ?

    J'ai un tuto en préparation, je t'enverrais un MP quand j'aurais fini ^^ Dans l'idée, il suffit juste de déplacer les différents éléments (notification, favoris...) avec "position: absolute"

    153
    Samedi 17 Mai 2014 à 12:31

    ok...  j'attends ! Merci de ta gentilesse ! Et aussi j'ai trouver un code pour changer le favicon de mon blog... mais cela ne marche que sur Chrome... comment faire pour que se soit sur tout les navigateurs.  

    154
    Samedi 17 Mai 2014 à 16:03

    Euh enfaite.... comment fait-on pour mettre la barre d'outils transparente ?

    Merci beaucoup Nagalia (je t'en demande un peu trop :/)

    155
    Samedi 17 Mai 2014 à 19:16

    Pour le favicon, je dois avouer que je n'en sais rien ^^' Tu peux me montrer ton code ?

    Pour modifier l'opacité de la menubar :

    #menubar {opacity: 0.5;}

    Tu peux utiliser des valeurs entre 0 (invisble) et 1 (totalement visible)

    156
    Samedi 17 Mai 2014 à 19:31

    Code favicon. Ne marchant que sur Google Chrome. Code à modifier lorsque c'est en italique.

    <script>// <![CDATA[
    var ico=document.getElementById ('favicon');
    ico.href='URL DE L'IMAGE';
    // ]]></script>

    157
    Dimanche 18 Mai 2014 à 12:35

    Salut! Je suis un peu nouveau au CSS et je ne comprends pas bien c'est quoi propriété valeur... Est ce que quelqu'un peut me l'expliquer ? Merci.

    158
    Dimanche 18 Mai 2014 à 13:00

    Petite introduction avant de commencer :

    => http://fanstasy-graph.eklablog.net/introduction-a4961842

    Il faut remplacer "propriété : valeur" par l'effet que tu veux appliquer. Par exemple changer la couleur, mettre une bordure...

    Les propriété expliquées sur ce blog sont dans la dernière boite "propriété"

    => http://fanstasy-graph.eklablog.net/css-c937827

    159
    Mardi 20 Mai 2014 à 03:59

    @Sasha : J'ai tester ce script et essayer de le bidouiller un peu, mais je suis une totale débutante en JS, donc je n'ai malheureusement pas trouvé ^^'

    Mais dans tous les cas, tu n'as pas vraiment le droit de t'en servir sur ton blog ;) C'est comme pour le logo d'EklaBlog, même s'il est facile de l'enlever, les comptes gratuits ne sont pas vraiment autorisés à le faire ;)

    160
    Mardi 20 Mai 2014 à 07:25

    Oui, je l'ai appris après ! Je l'ai retiré de mon blog :)

    161
    Mardi 11 Septembre 2018 à 03:53

    merci beaucoup! J'ai enfin réussis à avoir un beau menu bar personnalisé. <3

    162
    Jeudi 26 Octobre 2023 à 20:09

    Merci pour tous ces codes. :-)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :