Personnalisation toolbar
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Personnalisation toolbar
Salut a tous, j'ai vue qu'il y avais un membre qui avais une toolbar qui me plait bien
http://thenomadssoldiers.forumactif.org/ appartenent a SeLfde4Th7
si tu pouvais me donner tes code afin que je te pique les idée en l'adaptent bien sure a mes couleur et autre bouton.
Se qui m'intéresserai:
bouton qui change de couleur lors du passage de la souris
Suppression du bienvenue a coté du pseudo
et surtout le menu déroulant de la méme couleur que le reste de la toolbar avec les différente couleur des liens ......
Sa serais super sympa. Merci
http://thenomadssoldiers.forumactif.org/ appartenent a SeLfde4Th7
si tu pouvais me donner tes code afin que je te pique les idée en l'adaptent bien sure a mes couleur et autre bouton.
Se qui m'intéresserai:
bouton qui change de couleur lors du passage de la souris
Suppression du bienvenue a coté du pseudo
et surtout le menu déroulant de la méme couleur que le reste de la toolbar avec les différente couleur des liens ......
Sa serais super sympa. Merci
Dernière édition par smartounet le Lun 11 Nov 2013 - 16:56, édité 1 fois
Re: Personnalisation toolbar
Bonjour smartounet .
Je doit mettre mon CSS au clair, je reviendrais vers vous pour les codes et explication d'ici peut.
EDIT:
Voici les codes, en premier le Javascript:
Bonne journée .
Je doit mettre mon CSS au clair, je reviendrais vers vous pour les codes et explication d'ici peut.
EDIT:
Voici les codes, en premier le Javascript:
- Code:
$(function () {
$(window).load(function () {
$('#fa_toolbar #fa_search').after('<ul id="menu"><li><a href="/">ACCUEIL</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="/memberlist">MEMBRES</a></li>
</ul>');
});
});
$(function()
{_lang["Welcome"] = "";} );
- Code:
/*TOOLBAR*/
/*element cacher*/
#fa_search{ /*recherche toolbar*/
display:none !important;
}
#fa_hide{ /*bouton pour cacher/afficher la toolbar*/
display:none !important;
}
#fa_share.fa_tbMainElement{ /*bouton de partage*/
display:none !important;
}
/*General*/
.fa_toolbar_XL_Sized { /*taille minimum toolbar*/
min-width: 700px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0){ /*hack CSS google chrome*/
.fa_toolbar_XL_Sized { /*taille minimum toolbar*/
min-width: 700px !important;
}
}
/*lien toolbar*/
#fa_toolbar a:hover{ /*lien de la tooolbar au passage de la souris*/
text-decoration:none !important;
color:#AAA !important;
}
#fa_menulist li a:link{ /*lien de la liste d option*/
font-family:Della Respira;
color:#fff !important;
}
#fa_menulist li a:hover{ /*lien au survol de la souris de la liste d option*/
text-decoration:none !important;
color:#AAA !important
}
#fa_menulist a:visited{ /*lien visite de la liste d option*/
color:#fff !important;
}
#fa_menulist:hover a:visited{ /*lien visite de la liste d option au survol de la liste d option*/
color:#FFF !important
}
#fa_menulist:hover a:hover{ /*lien au passage de la souris au survol de la souris sur la liste d option*/
color:#AAA !important
}
#fa_right.fa_tbMainElement.welcome:hover #fa_menulist a:visited{ /*lien visite au survol de la souris sur le pseudo*/
color:white !important;
}
#fa_right.fa_tbMainElement.welcome:hover #fa_menulist a:hover{ /*lien au passage de la souris au survole de la souris sur le pseudo*/
color:#AAA !important;
}
#fa_toolbar #fa_right #notif_list li.unread a:link{ /*lien notifiaction*/
text-decoration:none !important;
}
#fa_toolbar #fa_right #notif_list li .contentText a:link{ /*lien notifiacation*/
text-decoration:none !important;
}
#fa_toolbar #fa_right #notif_list li .content a:hover{ /*lien notifiacation au passage de la souris*/
color:#AAA !important;
}
/*menu au cilque du pseudo*/
#fa_usermenu{ /*cote avatar*/
background-color:#333;
color:#fff !important;
width:34% !important;
}
#fa_menulist{ /*liste d option*/
background-color:#333 !important;
line-height:20.9px !important;
min-height:180px !important;
}
#fa_menulist li{ /*liste d option*/
width:106% !important;
}
#fa_menulist li:hover{ /*survol de liste*/
background-color:#222
}
.fa_separator{ /*separateur*/
width:106% !important;
}
#fa_menulist, #notif_list{ /* arrondie les bord des menu*/
border-radius:0px 0px 5px 5px;
}
#fa_right.fa_tbMainElement{
font-family:Della Respira;
}
#fa_right.welcome #fa_menu #fa_welcome{ /*bouton pseudo*/
background-color:#333 !important;
color:#fff !important
}
#fa_right.welcome #fa_menu #fa_welcome:hover{ /* bouton pseudo au survol de la souris*/
color:#AAA !important;
text-decoration:none;
}
#fa_toolbar #fa_right #notif_list li.unread{ /*notification non lu*/
background-color:#333 !important;
color:#fff;
}
#fa_toolbar #fa_right #notif_list li.unread:hover{ /*notification non lu au survol de la souris*/
background-color:#222 !important;
}
#fa_toolbar #fa_right #notif_list li a.delete { /*image de suppression des notifications*/
background: url("http://www.daghertrading.com/images/icone_croix.png")no-repeat transparent !important;
width:33px !important;
}
#fa_notifications.rightHeaderLink.unread{ /*bouton notification a la reception d une notif*/
background-color:darkred !important;
color:#fff !important;
}
#fa_notifications.rightHeaderLink.unread:hover{ /*bouton notification a la reception d une notif au passage de la souris*/
color:#aaa !important;
}
#fa_toolbar #fa_right #notif_list li .contentText{ /*texte notification*/
color:#fff !important
}
#fa_toolbar #fa_right #notif_list li:first-child{ /*premiere notification*/
background-color:#333;
font-weight:bold;
}
#fa_toolbar #fa_right #notif_list li:first-child:hover{ /*premiere notification au survol de la souris*/
background-color:#222;
}
#fa_welcome:hover, #fa_notifications:hover, .rightHeaderLink:hover{ /*ombre au survol de la souris du pseudo et de notification*/
box-shadow: 0px 1px 2px 0px #FFF inset;
}
#fa_welcome, #fa_notifications, .rightHeaderLink{ /*bouton pseudo et noficiation*/
width:auto;
text-align:center;
text-transform:uppercase;
}
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications{ /*ombre interne du bouton notification au click*/
background-color:#333 !important;
color:#AAA !important;
box-shadow: 0px 1px 10px 0px darkred inset;
}
div#fa_right.fa_tbMainElement.welcome #fa_menu #fa_welcome{ /*ombre interne du bouton du pseudo au click*/
background-color:#333 !important;
color:#AAA !important;
box-shadow: 0px 1px 10px 0px darkred inset;
}
/*liste de bouton accueil faq etc*/
#menu { /*general*/
font-family: Della Respira;
font-size: 14px;
left: 0%;
float:right !important;
position:relative;
top: 0px;
}
#menu, #menu ul{
line-height : 30px;
text-align : center;
}
#menu li{ /*liste*/
float : left;
border-right : 1px solid #fff;
}
html>body #menu li{ /*pour IE*/
border-right: 1px solid transparent ;
}
#menu a{ /*lien du menu*/
display : block;
padding : 0;
background : #333;
color : #fff;
text-decoration : none;
width: auto;
margin-right: 10px !important;
min-width: 80px !important;
}
#menu a:hover{ /*lien du menu au passage de la souris*/
color: #AAA;
text-decoration:none !important;
background: #333;
box-shadow: 0px 1px 2px 0px #FFF inset;
}
Bonne journée .
Re: Personnalisation toolbar
Super merci bien
Sujets similaires
» Personnalisation Toolbar
» personnalisation du QEEL
» Personnalisation widget
» Personnalisation du profil
» Personnalisation de mon QEEL
» personnalisation du QEEL
» Personnalisation widget
» Personnalisation du profil
» Personnalisation de mon QEEL
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum