-
Code CSS:Personnaliser sa barre
Eklablog peut être parfaitement personnaliser grâce notament à des codes CSS.
1-Pour la barre se situant en haut de page:
-Faites vous une barre avec votre logiciel préféré.
Pour la dimension ,j'ai choisi 1800x25.
Puis utiliser ce code:
#menubar{background:url(ADRESSE DE VOTRE BARRE) ;}
2-Pour changer la couleur du texte de la barre:
Voici le code :
#menubarabsolute{font-size:15 ;color:METTRE ICI LA COULEUR EN ANGLAIS;}
Voici des sites où vous trouverez le code ou le nom d'une couleur en anglais:
http://www.aidenet.com/pageperso64j.htm
http://stylescss.free.fr/couleurs.php
3-Changer la couleur lors du survole:
Sur Eklablog,la couleur est bleue.
Faite vous une créa avec votre logiciel.Dimension 180x25 environ.
Voici le code pour modifier cette couleur:
.menubar_section:hover div{background-image: url("ADRESSE DE VOTRE CREA ")}
4-Personnaliser les sous menus:
Faites deux créas:
La première de dimension 180x50
La deuxième de 180X66
Voici le code:
.menubar_section li {
background:url("ADRESSE DE LAPREMIERE CREA ") no-repeat;
color:COULEUR EN ANGLAIS ; }
.menubar_section li:last-child {
background:url("ADRESSE DE LA DEUXIEME CREA ")no-repeat; }5-Enlever les barres de séparations:
(astuce donné par sosso1998 --MERCI--)
Voici le code à mettre sans rien 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;}6- Modifier la flèche:(astuce donné par sosso1998 --MERCI--)code pour modifier la flèche:#menubar_hide{ background-image: url("ADRESSE DE L'IMAGE");}Code :la flèche apparait dès que tu cliques:#menubar_show { background-image: url("IMAGE");}Code pour enlever la flèche:#menubar_hide{ width: 0px;}7-Modifier la couleur des notification:( merci a sosso1988)
Voici le code:
#notifications_panel a,#notifications_panel div{ background:url("ADRESSE DE L'IMAGE")no-repeat;}
Votre image doit être faite d'après ce modèle:
8-Modifier la couleur de l'icone :
(merci a Sosso1998)
Voici le code qui permet de changer la couleur au survole:
#menubar_notifications:hover
#menubar_notifications_btn{
background:#2089b3 url("IMAGE")repeat-x;
color:COULEUR;}Voici le code pour mettre une couleur de fond sur la barre au niveau de l'icone:
(merci à Louna Kilari)
#menubar_notifications_btn{ background:Couleur 0% 70%;}
Ces codes sont à mettre dans votrs source CSS:
Cliquer sur" Apparence " puis ""Modifier le thème" " puis " ajouter un css"
Mettre le code dans la fenetre puis cliquer "appliquer et sauvegarder".
Tags : code, barre, css, eklablog
-
Commentaires
3Marine08Samedi 1er Octobre 2011 à 22:07si tu vx l'url tu va sur une image (n'importe) tu passe ta souris dedans aapres tu clique droite de de ta souris apres tu clique sur 'copier l'url de l'image)
4Marine08Samedi 1er Octobre 2011 à 22:076Marine08Samedi 1er Octobre 2011 à 22:128Marine08Samedi 1er Octobre 2011 à 22:1410Marine08Samedi 1er Octobre 2011 à 22:1612Marine08Samedi 1er Octobre 2011 à 22:1714Marine08Samedi 1er Octobre 2011 à 22:2017Marine08Samedi 1er Octobre 2011 à 22:2619Marine08Samedi 1er Octobre 2011 à 22:3621Marine08Samedi 1er Octobre 2011 à 22:42Une fois je me souviens, tu avais mis un article avec des fonds transparent colorés, mais je ne le retrouve pas c'est normal?
28Marine08Dimanche 2 Octobre 2011 à 11:31bon c'est simple tu va dans modifier le theme (ajouter un css) apres tu colle le code a la place de (ADRESSE DE VOTRE BARRE) tu met l'url de l'image que tu vx X.)
29Marine08Dimanche 2 Octobre 2011 à 11:3331Marine08Dimanche 2 Octobre 2011 à 11:45Est ce que vous aussi il vous dis que le code n'est pas valide ou il n'y a que moi et il à décider de pourrir ma matinée?!
34Marine08Dimanche 2 Octobre 2011 à 12:0336Marine08Dimanche 2 Octobre 2011 à 12:4838Marine08Dimanche 2 Octobre 2011 à 12:5340Marine08Dimanche 2 Octobre 2011 à 12:59je te donne l'url par MP car chui maintenant en google chrome alors je px pas coller l'adresse dans les com's ^^
Coucou Carma: le code est valide puisque je l'utilise sur mon blog.
As tu bien relu ton code? Si jamais tu as enlevé une apostrophe ou une parenthese le code ne sera pas valide donc relis le bien ,il y a surement un element qui manque.
Tasha: La créa, tu dois la faire toi même grâce à ton logiciel (photofiltre par exemple) puis ensuite tu mets l'adresse de cette créa dans le code.
Moi,un exelent week end,on croirait des vacances !!
Hier,journée shopping,au debut c'etait juste pour chercher un cadeau a ma soeur car aujourd'hui c'est son anniversaire !!
On a fait le tour de la Martinique XD
Fort de france ou j'habite,apres Sainte-Marie ou j'habitait pour allez chez ma tante,apres Trinité,apres lamentin,apres fort de france et encore lamentin sans compter les communes traverser !!
Nous avons acheter pleine de chose,j'ai meme vue a Océanis nolwenn et sa soeur,j'ai vue son petit frere pour la premiere fois et elle ma petite soeur,son frere est trop chouchouuu,a oui nolwenn c'est une amie !!
Nous sommes allez aussi chez le parein de Marielle ma cousine,il nous a donner pleiiiiiiin de fruit
c'etait vraiment une magnifique journée hier !!
Chez pimkie il y a de ces nouveauté :O
On a dormit chez un ami tres proche a ma mere qui est en france,du au fort orage de la semaine derniere,le conteur de chez lui avait lacher et le congelateur et frigo etait chaud et pas froid,sa sentait le camambert pourit dans le frigo beurkkkkkkkkkkkk,on a tout netoyer et trier,ma mere a fait cuir quelque surgeler qui etait encore un peu congeler,et avec mes soeur nous nous sommes amusés a lancer le plus loin dans le jardin de la betrave XD c'ets moi qui gagnait bien sur :D
Comme on dit faire de l'angrais au lieu de jeter c'est se que j'ai fait avec les haricot et la betrave :D trop maline
J'ai trop hate d'allez a la piscine car j'ai super chaud,vivement que ma petite soeur finisse ses devoirs
Aimie,j'ai une chose tres trrrrrressssssssss importante a te dire !!
Il se pourrais vraiment que dans 2 ans,j'habite en France :/
c'ets une superbe nouvelle,mais en meme temps non
mes amies,perdus,ma famille,bof sa passe,mais mes amies elle vont trop me manquer :/
et puis sa va etre bizard,la bas c'ets grand,on va se perdre,le froid,je ne suporte pas en hiver en plus se lever tot dans ton lit chaud sa va me tuer :/
Bon c'ets l'heure de la piscine,a bientot aimie,au faite,c'est genial cette decouverte,je ne savais pas sa !!
comment que je vais tester a mon prochain theme :O
merciiiiiiiiiiiiiiiiiiiiii aimiiiie de nous faire partager sa
quand je clique sur Mon compte il y a le fond de ton blog en deco et meme pour les emoticone sauf que ces sur les contours :D ouaouuuuuuuu
Je me demandais bien pourquoi a chaque fois que je vennait sur ton blog,la barre etait toujours avec le fond,je pensais que c'etait un probleme mais non !!!
OHHHHHHHHHHHHH JE VIENS DE VOIR SA,QUAND J'AI CLIQUER SUR MON AVATAR LE FOND N'ETAIT PLUS "BLANC" MAIS COMME TON FOND DE BLOG C'EST MEGA JOLIIIIIIIIIIIIIIIIIIIIIIIEEEEEEEEEEEEEEEEEEEE !!!!!!!
con jai payer sur lavatar de malika pour aller dans sans blog yavai le fon don la fenetre comment tu la mis
Aimie fait un tuto pour sa si j'ai bien comprit,et j'ai eu du mal a lire ton com's !!
mais sa fait sa aussi sur les autres fenetres quand on clic sur les avatars sur son blog !!
Je peux te piquer les tutos stp (je savait déjà comment faire mais j'avais la flemme de faire un grand tuto, si tu veux pas c'est pas graaave!
Bonjour Louna kilari
Effectivement,j'ai mis du temps pour faire ces tutos car j'ai voulu tout expliquer en détail pour que cela soit bien compris de tous. Les codes ne sont pas facile à comprendre pour ceux qui n'arrivent pas à les lire.
Aussi tu comprendras que je préfére que mon travail reste sur mon blog.
Si tu désires partager l'info, tu peux bien sur mettre les liens de ces articles sur ton blog pour en avertir tes amies .
bonne journée
Autres astuces, désolée si je te gêne :chieuse:
Retirer les barres de séparations si ça dérange.
#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;
}Changer pour la flèche :#menubar_hide{ background-image: url("LIEN DE L?IMAGE");}Flèche dès que tu cliques :#menubar_show { background-image: url("IMAGE");}Ou encore si tu veux pas voir la flèche :#menubar_hide{ width: 0px;}#notifications_panel a,#notifications_panel div{ background:url("IMAGE")no-repeat;}
Il suffit de remplacer IMAGE par une création suivant ce modèle :^^ (je suis sûre de faire chier mais bon)
66Marine08Mardi 11 Octobre 2011 à 13:31Bonjour,
Sosso1998:Merci infiniment pour ce partage: J'ajoute tout de suite les nouveaux codes.
Par contre à quoi sert ce code?:
#notifications_panel a,#notifications_panel div{ background:url("IMAGE")no-repeat;}
Si jamais tu sais comment on modifie la couleurs des liens de blog dans le profil ça serait merveilleux!
Bonne semaine à tous
Ce code sert à changer les images dans notifications.
Sinon je vais chercher pour les liens.
Oui les notifications, mais je ne me suis pas bien expliquée: j'aimerai savoir ce que le code modifie dans les notifications car j'ai testé et je ne vois aucun changement
voici mon code:
#notifications_panel a,#notifications_panel div{ background:url("http://data0.eklablog.fr/style/perso/notifs_item%20copie.png")no-repeat;}
Merci sosso1998
Sauf que c'est pas mes codes, j'avais cru qu'on avait oublier tout ça ?
Et puis trouver comment changer les images du menubar au survol c'est à la portée de tout le monde, j'ai vu ça dans d'autres blogs et tu me fais encore chier pour ça ?
Franchement... Ah oui et je suis une FILLE.
Sinon Aimielisa essaies-ça :
#notifications_panel a,
#notifications_panel div{ background:url("http://data0.eklablog.fr/style/perso/notifs_item%20copie.png")no-repeat;}
Ca va marcher, j'ai essayé sur mon blog avec ton image. n_n (je l'ai retirer bien sûr)Louna kilari: Attention,pas de règlement de compte avec des membres sur mon blog. Merci de lire le règlement de mon blog.
Sosso1998: Merci j'ai installé sur mon blog.Vois- tu la modification? parce que moi rien . Il est temps que j'aille dormir je crois lol!
Le principale c'est qu'il soit vu sur le blog . Pour l'instant je ne le vois toujours pas. Pas grave
Merci pour le partage .
Le principal c'est que tout le monde y aie acces. C'est le but du blog.
Bonne semaine à tous
Je vois les modifications des notifications!!! chouette
Sais tu si on peut changer le survole des notifications sur le barre?
Sosso1988:regarde mon image dans l'article ( code numéro 7)
l'icone est bleu au survole. J'aimerai modifier cette couleur. L'image qu'on projette? c'est à dire?
Louna Kilari: Souhaites- tu le partager?
D'accord, voilà le code:
#menubar_notifications_btn{ background:darkviolet 0% 70%;}
Ou
#menubar_notifications_btn{ background-url: ("") ;}
Je l'ai testé Louna Kilari: Effectivement la couleurs s'affiche sur l'icone par contre au survole la couleur est toujours bleu.
Tsukishima: Mets tu bien le code en entier?
Moi ,la couleur s'affiche sur la barre au niveau de l'icone et au survole c'est la couleur bleu eklablog. J'aimerai trouver un code permettant juste de changer la couleur au survole.
On va bien finir par le trouver. Je continuerai à faire des tests plus tard.
Je cherche toujours pour liens des blog dans le profil celui là aussi il me résiste lol!
Han mais okay.
#menubar_notifications:hover
#menubar_notifications_btn{
background:#2089b3 url("IMAGE")repeat-x;
color:COULEUR;}Je l'avais trouvé il y a quelque temps
Je compte trouver comment on fait pour changer l'image de mon compte et notifications(les icônes quoi). Quand j'aurais trouvé je te mettrais au courant !
No il faut le sélecteur. J'ai tendance à penser .icon-notifications
Mais ça m'étonnerait que ça soit.
oui celui là n'est pas facile j'ai essayé plein de selecteur y a surement un truc qui a du me passer à coté. Il suffit de pas grand chose pour que le code ne fonctionne pas. s je suis sur qu'on finira par le trouver!!
Je sais comment modifier le fond des icones mais pas les icones:
.icon { background:url(http://data0.shojoblog.com/mangagraph/mod_article4947274_1.png?247) repeat;}Saz c'est pour les icones du blog mais pas de la menubar!
.icon_menubar?
.menubar_icon?
Je sais pas, je dois aller faire mes devoirs (si j'en ai), je revient dans 10 min max!
C'est déja super pour le survole de l'icone.Parce que le bleu d'eklablog tranchait vraiment trop!
Si j'ai le temps dans la semaine, je vais essayer de réflechir pour changer la couleurs sur le liens des blog du profil .
Merci les filles. Je dois me deconnecter.
Je vous souhaite une bonne semaine.
JAI TROUVE LE SELECTEUR
.icon,#menubar_notifications
Reste plus qu'à savoir pour les autres icons et comment changer les images.
Bon, j'ai trouvé tous les sélecteurs d'icone, je vous préviendrais quand j'aurais trouvé comment changer les images.
Louna-Kilari => Tiens je te donne tous les sélecteurs(mais en revanche quand je le mettrais sur fantasy-graph tu ne gueuleras pas encore hein ?) :
Notifications : .icon,#menubar_notifications
Mon compte : .icon,#menubar_section_account
Contenu : .icon,.icon,#menubar_section_content
Apparence : .icon,#menubar_section_appearance
Interactions : .icon,#menubar_section_interactions
Configuration : .icon,#menubar_section_manage
pour modifier la couleur du texte dans les fenetres (comme le profil par exemple), j'avais fini par trouver celui la apres beaucoup de test:
.window{font-size:15 ;color:COULEUR EN ANGLAIS;}
Bien sur, ça modifie les couleurs des textes sans lien ,je n'ai toujours pas trouvé pour modifier la couleur des liens et encore moins celle en survole évidemment franchement j'ai presque tout essayé, rien pour l'instant...grrrrr rien ne marche!!!
je suis sur pourtant de ne pas être loin de le trouver. Bon ben je continue a chercher
Merci pour les selecteurs Sosso1998 j'avoue ne pas avoir penser à faire un article sur ça.
coucou mercii beaucou aimilisa =) de mettre des tutos pour nous =) c'est tres gentille♥
est ce que vous savez comment faire comme sur le blog de angecorina???
enfin quand vous allez sur son blog quand vous voulais prendre une image il y a ceci:
j'amerai moi aussi faire comme elle =)
savez vous comment faire???
mercii de l'info =) sa m'aide un peu mais bon =) c'est kan meme simpa de me donnez une indication =) merci sosso1998♥Le code, il faut activer le javascript en demandant ici: http://doc.eklablog.com/demandes-d-activation-javascript-topic12367
Le code (il faut le mettre dans la page d'accueil) :
<script type="text/javascript">// <![CDATA[ alert("TEXTE A AFFICHER") // ]]></script> bonjour amande douce
lol ! louna kilari a deja répondu à ta question.
Amuse toi bien amande douce.
Moi,i je suis toujours sur le code pour modifier la couleur des liens de blog sur le profil!! pas facile celui là!
Bonne semaine à toutes les deux
=) merci aimielisa =) oui♥ en tout cas ce blog et bien reussi =)
c'est grace a ce blog que j'ai arriver a faire des barre eklablog =)
mercii♥
127Nari-chanMardi 25 Octobre 2011 à 20:18129poisson-panéSamedi 5 Novembre 2011 à 12:13J'ai rien suivi mais c'est pas grave!!!!
Aimielisa je voulais te dire que t'es vraiment trop forte et j'adore ton blog c le meilleur de tous!!!! Je te respecte grave!!!
131Ch'tit poissonSamedi 19 Novembre 2011 à 10:43Merci pour tes astuces je reviendrai certainement relire quand
j'aurai un peu plus de temps
Bonne continuation et belle journée
Marie
merci !!! ^^ je le dis car j'ai utilisé tes codes :D
Sincèrement ton blog est superbe !!! Et je te remercie, bonne continuatiiiiiion !! ;)
Merci chère Professeur (professeuse, j'y arrive pô ! ...:)
J'ai suivi pas à pas les 1ère étapes, pour une amie et ô miracle ! j'y suis arrivée sans planter le bouzin !
Je te fais de très gros bisous
Bonjour
Le code 8 fonctionne :as tu bien recopié le code?
Pour la page de profil voir le tuto css fenetre.
Merci Aimielisa !! Au début quand j'ai mis tes dimensions (1800 X 25) j'ai cru que c'était trop petit !! Mais naturellement c'était parfait !! :)
Merci Aimielisa-chan!!! Ca met très pratique tous ces petits trucs.... Encore merci! Domô arigatô!
un petit coucou en passant ma belle, j'espère que tu vas b ien, merci pour tous ces codes, gros bisous!
Coucou Aimielisa
Est ce qu'ill est possible de changer la couleur de l'écrriture survolée de la barre
Si oui tu aurais le code ?
Merci d'avance !!
Tu pourrais faire un tuto pour faire des choses comme sa:
Sil te plâit je ne sais pas si c'est la bonne rubrique mais je n'en ai pas trouvé d'autre^^' si tu pouvais maider voilà merci.
151LaRebelleLundi 7 Janvier 2013 à 23:30g un probleme c que dans mon code quand je ressoins un mess la couleur est rouge mais jeux modifier la couleur et jarrive plus a trouver le code
merci o fait ta vu il y a un nouveau truc sur la barre ekla le probleme c que le survole est bleu et qu'il y a le trait de séparation
165Constance-Lundi 1er Juillet 2013 à 16:58Bonjour, je n'arrive pas à changer la couleur des notifs, voici mon code:
#notifications_panel a,
#notifications_panel div{ background:url("http://ekladata.com/X5zUl9nKIz8e5DQmMQ8dHHjJgts.png")no-repeat;}J'ai fais une erreur?
Bonjour Lilla9000
Je viens de le tester, ton code fonctionne:
#notifications_panel a,#notifications_panel div{ background:url("http://ekladata.com/X5zUl9nKIz8e5DQmMQ8dHHjJgts.png")no-repeat;}
Je te remercie Aimielisa, le problème est réglé, c'est le code ne marche pas avec Internet Explorer.
Bonne soirée!
Coucou ! Je cherche un code mais je ne trouve pas ! J'aimerais faire apparaître le menubar au survole .Comment faire ?
Bonjour merci beaucoup pour ces codes! J'aurais besoin d'aide au niveau des notification.
Quand on clique dessus j'ai voulu mettre une image pour les notifs mais sa ne fonctionne pas j'aurais besoin d'aide s'il vous plait ^^
Merci pour le tuto ^^ Une question rien avoir avec sa mais... Quel est le code du coeur qui suis la souris ? *^* Je kiffe trop x) Merci ^^
Coucou ! Merci pour tous ces codes, mais j'ai une question.
Comment on fait pour changer l'image pour les notifications par une autre, par exemple ?
bonsoir, j'aimerai savoir comment on retire le trait au niveau du pseudo et comment on change le survole qui est bleu quand on passe sur le pseudo? Et également comment tu as ait pour que ton fond de blog fasse l'intégralité de ta fenetre sans que l'image ne se repette?
Ajouter un commentaire
Merci >O<