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 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  Images et Couleurs - Couleurs :: Feuille de style CSS

Les éléments CSS de la Toolbar


div#fatoolbarBarre complète
div#fa_search / div#fa_textareapersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 46935310
#fa_magnifierpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS Captur43
div#fa_sharepersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 19763810
span#fa_share_textpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 61396410
a#fa_fbpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 34818710
a#fa_twitterpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 13680410
a#fa_mailpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 95641510
a#fa_rsspersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 64072310
div#fa_rightpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 16962310
a#fa_welcomepersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 98938210
a#fa_notificationspersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 42627510
span#notif_unreadpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 59976510
a#fa_hidepersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 95728310
a#fa_showpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 83032510
ul#fa_menulistpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba14
#fa_usermenupersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-29
#fa_ranktitlepersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-30
ul#notif_listpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba15
li.see_allpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba16
li.unreadpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba17
#notif_list li .contentTextpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-32
#notif_list li a.deletepersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-33
div.fa_notificationpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-34
div.fa_notification .contentpersonnaliser  popup - Personnaliser entièrement la toolbar via CSS 31-07-35

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


personnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba10

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


personnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba11

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


personnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba12

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


personnaliser  popup - Personnaliser entièrement la toolbar via CSS Toolba13

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.

Tech

Tech
Membre actif

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

https://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

- Sujets similaires

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