Personnaliser entièrement la toolbar via CSS

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

  • 0

Astuce Personnaliser entièrement la toolbar via CSS

Message par Tech le Mar 29 Juil 2014 - 14:40

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 → Couleurs → Onglet "Feuille de styles CSS"

Toolbar complète

div#fatoolbarBarre complète
div#fa_search / div#fa_textarea
div#fa_search / div#fa_textarea
div#fa_share
span#fa_share_text
a#fa_fb
a#fa_twitter
a#fa_gp
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
ul#notif_list
li.see_all
li.unread
div.fa_notification

Astuces : 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;}

Astuces : Modifier des éléments

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 "Google +"

Code:
a#fa_gp {
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;
}
adresse_de_votre_image doit être remplacé par l'adresse URL de l'image désirée.

Libre service

Copiez / collez le code correspondant pour installer la toolbar de votre choix sur votre forum :
Panneau d’administration → Affichage → Couleurs → Onglet "Feuille de styles CSS"
Les couleurs ont été choisies au hasard et sont modifiables facilement !

Libre service 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 */
}

Libre service 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 */
}

Libre service 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 */
}

Libre service 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 */
}

Envie de nous proposer une autre toolbar en libre service ? N'hésitez pas à nous contacter par MP !




{ Règles Générales } { Question & Réponses Fréquentes } { Le Staff de ForumActif }

Tech
Modéractif
Modéractif

Masculin
Messages : 20899
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech 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