Personnaliser entièrement la toolbar via CSS

[Tech]

Personnaliser entièrement la toolbar via CSS

L’astuce qui suit vous permettra de connaître les différents identifiants CSS utilisés sur la toolbar de votre forum Forumactif. Vous pourrez ainsi personnaliser l’apparence de cette barre et adapter son style au reste de votre forum. Un libre service est également disponible en fin de tutoriel !  Si vous débutez dans la personnalisation en CSS, il est fortement recommandé de vous fier au tutoriel qui suit : Le CSS : Comment ça marche ? afin de pouvoir manipuler correctement les diverses propriétés du langage. L’ensemble des codes sont à insérer dans : Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS Les éléments CSS de la Toolbar div#fatoolbar Barre complète div#fa_search / div#fa_textarea #fa_magnifier div#fa_share span#fa_share_text a#fa_fb a#fa_twitter a#fa_mail a#fa_rss div#fa_right a#fa_welcome a#fa_notifications span#notif_unread a#fa_hide a#fa_show ul#fa_menulist #fa_usermenu #fa_ranktitle ul#notif_list li.see_all li.unread #notif_list li .contentText #notif_list li a.delete div.fa_notification div.fa_notification .content Différentes astuces en termes de personalisation Supprimer des éléments Supprimer la barre de recherche Code: div#fa_search {display:none!important;} Supprimer les boutons de partage Code: span#fa_share {display:none!important;} Supprimer le lien "Bienvenue [X]" Code: a#fa_welcome {display:none!important;} Supprimer la flèche "Cacher la toolbar" Code: a#fa_hide {display: none!important;} Modifier des éléments Mettre une image de fond Code: #fa_toolbar, #fa_toolbar_hidden {background-image: url('http://url_de_mon_image');} Modifier les boutons de partage - Modifier le bouton "Facebook" : Code: a#fa_fb { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Twitter" : Code: a#fa_twitter { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Mail" : Code: a#fa_mail { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Flux RSS" : Code: a#fa_rss { background:url('adresse_de_votre_image')no-repeat!important; } Remplacez adresse_de_votre_image par l'adresse de votre image. Libre service Nous vous proposons quelques thèmes afin d'agrémenter votre toolbar. Il suffit de copier/coller le code correspondant au thème de votre choix : Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS Thème 1 Code: div#fa_toolbar {     background-color: #24384c;  /* Couleur de fond */     border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */     box-shadow: 0 0 5px #000000;  /* Affiche une ombre */     margin: auto;  /* Centre la toolbar */     width: 98%;  /* Modifie la longueur de la toolbar */ }   div#fa_toolbar div, div#fa_toolbar span {     margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */ } Thème 2 Code: div#fa_toolbar {     background-color: #657488;  /* Couleur de fond */     border: 2px solid white;  /* Ajoute une bordure de 2px de couleur blanche */     border-radius: 50px;  /* Arrondis les bords de la toolbar */     margin: auto;  /* Centre la toolbar */     position: relative;  /* Permet de décaler la toolbar */     top: 10px;  /* Décale la toolbar du haut */     width: 98%;  /* Modifie la longueur de la toolbar */ }   a#fa_hide {     display: none!important;  /* Supprime la flèche "Cacher la toolbar" : Conseillé de le laisser ! */ }   div#fa_toolbar div, div#fa_toolbar span {     margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */ } Thème 3 Code: #fa_toolbar {     background-color: transparent !important;  /* Rend transparent le fond principal */ } #fa_right {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 40px 40px;  /* Arrondis les bords */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */     right: 20px;  /* Décale la toolbar de la droite */ }   #fa_left {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 0 40px;  /* Arrondis les bords */     position: relative;  /* Permet de décaler la toolbar */     left: 20px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_search {     background-color: #000000;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_share {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 40px;  /* Arrondis les bords */     position: relative;  /* Permet de décaler la toolbar */     left: -20px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ } Thème 4 Code: #fa_toolbar {     background-color: transparent !important;  /* Rend transparent le fond principal */ }   #fa_right {     background-color: #b3b3b3;  /* Couleur de fond */     border-radius: 0 0 0 40px;  /* Arrondis les angles */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_left {     background-color: #b3b3b3;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_search {     background-color: #b3b3b3;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */     left: -20px;  /* Décale la toolbar de la gauche */ }   #fa_share {     background-color: #b3b3b3;  /* Couleur de fond */     border-radius: 0 0 40px;  /* Arrondis les angles */     left: -40px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */ } Si vous souhaitez proposer d'autres thèmes, n'hésitez pas à envoyer un MP à un aidactif ou à un modéractif.

Cette astuce a été rédigée par Matriochka et Tech. Mise à jour par Bipo (août 2019). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.