Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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  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 entièrement la toolbar via CSS 46935310
#fa_magnifierPersonnaliser entièrement la toolbar via CSS Captur43
div#fa_sharePersonnaliser entièrement la toolbar via CSS 19763810
span#fa_share_textPersonnaliser entièrement la toolbar via CSS 61396410
a#fa_fbPersonnaliser entièrement la toolbar via CSS 34818710
a#fa_twitterPersonnaliser entièrement la toolbar via CSS 13680410
a#fa_mailPersonnaliser entièrement la toolbar via CSS 95641510
a#fa_rssPersonnaliser entièrement la toolbar via CSS 64072310
div#fa_rightPersonnaliser entièrement la toolbar via CSS 16962310
a#fa_welcomePersonnaliser entièrement la toolbar via CSS 98938210
a#fa_notificationsPersonnaliser entièrement la toolbar via CSS 42627510
span#notif_unreadPersonnaliser entièrement la toolbar via CSS 59976510
a#fa_hidePersonnaliser entièrement la toolbar via CSS 95728310
a#fa_showPersonnaliser entièrement la toolbar via CSS 83032510
ul#fa_menulistPersonnaliser entièrement la toolbar via CSS Toolba14
#fa_usermenuPersonnaliser entièrement la toolbar via CSS 31-07-29
#fa_ranktitlePersonnaliser entièrement la toolbar via CSS 31-07-30
ul#notif_listPersonnaliser entièrement la toolbar via CSS Toolba15
li.see_allPersonnaliser entièrement la toolbar via CSS Toolba16
li.unreadPersonnaliser entièrement la toolbar via CSS Toolba17
#notif_list li .contentTextPersonnaliser entièrement la toolbar via CSS 31-07-32
#notif_list li a.deletePersonnaliser entièrement la toolbar via CSS 31-07-33
div.fa_notificationPersonnaliser entièrement la toolbar via CSS 31-07-34
div.fa_notification .contentPersonnaliser 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 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 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 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 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
Modéractif
Modéractif

Masculin
Messages : 22336
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


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