Personnalisation toolbar

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Personnalisation toolbar

Message par smartounet le Sam 9 Nov 2013 - 18:47

Salut a tous, j'ai vue qu'il y avais un membre qui avais une toolbar qui me plait bien Smile 

http://thenomadssoldiers.forumactif.org/ appartenent a SeLfde4Th7

si tu pouvais me donner tes code afin que je te pique les idée Very Happy 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

smartounet
**

Masculin
Messages : 63
Inscrit(e) le : 11/12/2009

http://www.motards87.fr
smartounet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation toolbar

Message par Self le Dim 10 Nov 2013 - 15:50

Bonjour smartounet Smile.

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"] = "";} );
Et le CSS:

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;
}
Il pourra vous semblait y avoir pas mal de répétitions ou d'élements ne servant mais c'est en réalité des corrections de bug rencontrés Wink .

Bonne journée Wink.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Personnalisation toolbar

Message par smartounet le Lun 11 Nov 2013 - 16:56

Super merci bien

smartounet
**

Masculin
Messages : 63
Inscrit(e) le : 11/12/2009

http://www.motards87.fr
smartounet a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum