Tutoriel


Google.fr

Forumactif.com

http://forum.forumactif.com
Tutoriel


 
AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  Connexion  
Official Support Forums
Arabic Ahlamontada
Dutch Actieforum
English Forumotion
French Forumactif
Italian Forumattivo
Portuguese Forumeiros
Romanian Forumgratuit
Russian Forum2x2
Spanish Foroactivo
Bugs & Problems
Derniers sujets
» Sondage test accent
Mar 8 Aoû - 12:03 par Tech

» Test
Mer 19 Avr - 11:47 par Tech

» ptin de titre quoi doit avoir plus de 10 caractères -r-
Mar 8 Sep - 17:19 par Tech

» test
Ven 14 Aoû - 13:11 par Tech

» [Alert] Test 2
Ven 2 Jan - 13:05 par Tech

» Ceci est un test
Dim 2 Nov - 9:48 par Tech

» [Alert] Test
Dim 2 Nov - 9:47 par Tech

» Votre 1er sujet
Dim 5 Oct - 10:15 par Tech

» test
Ven 8 Aoû - 14:29 par Tech

Qui est en ligne ?
Il y a en tout 1 utilisateur en ligne :: 0 Enregistré, 0 Invisible et 1 Invité

Aucun

Le record du nombre d'utilisateurs en ligne est de 11 le Sam 15 Nov - 13:57
A problem ?
If you have a problem with this forum, please contact an administrator :

Partagez | 
 

 Tuto toolbar css

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Tech
Admin
Admin


Messages : 116
Points : 161
Réputation : 0
Date d'inscription : 20/03/2013
Localisation : "#

Feuille de personnage
Champ test: Test
Blabla:
0/0  (0/0)
Tableau:
TableauColonne 1
Ligne 1

MessageSujet: Tuto toolbar css   Mer 23 Juil - 16:02

Personnaliser entièrement sa 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
   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;}

   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"



Dernière édition par Tech le Ven 25 Juil - 14:59, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-tech4.forumsactifs.com
Tech
Admin
Admin


Messages : 116
Points : 161
Réputation : 0
Date d'inscription : 20/03/2013
Localisation : "#

Feuille de personnage
Champ test: Test
Blabla:
0/0  (0/0)
Tableau:
TableauColonne 1
Ligne 1

MessageSujet: Re: Tuto toolbar css   Jeu 24 Juil - 14:02

LS1 :

Code:
div#fa_toolbar {
    background-color: #24384c;  /* Modifie la couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondie 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 */
}


Dernière édition par Tech le Jeu 24 Juil - 14:22, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-tech4.forumsactifs.com
Tech
Admin
Admin


Messages : 116
Points : 161
Réputation : 0
Date d'inscription : 20/03/2013
Localisation : "#

Feuille de personnage
Champ test: Test
Blabla:
0/0  (0/0)
Tableau:
TableauColonne 1
Ligne 1

MessageSujet: Re: Tuto toolbar css   Jeu 24 Juil - 14:11

LS2 :

Code:
div#fa_toolbar {
    background-color: #657488;  /* Modifie la couleur de fond */
    border: 2px solid white;  /* Ajoute une bordure de couleur blanche */
    border-radius: 50px;  /* Arrondie 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 */
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-tech4.forumsactifs.com
Tech
Admin
Admin


Messages : 116
Points : 161
Réputation : 0
Date d'inscription : 20/03/2013
Localisation : "#

Feuille de personnage
Champ test: Test
Blabla:
0/0  (0/0)
Tableau:
TableauColonne 1
Ligne 1

MessageSujet: Re: Tuto toolbar css   Ven 25 Juil - 14:48

LS3 :

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;  /* Arrondie 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;  /* Arrondie 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 */
    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;  /* Modifie la couleur de fond */
    margin-top: -1px;  /* Petite correction d'1px */
    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;  /* Modifie la couleur de fond */
    border-radius: 0 0 40px;  /* Arrondie 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 */
    padding-left: 10px;  /* Règle la marge intérieure gauche */
    padding-right: 10px;  /* Règle la marge intérieure droite */
}

_________________
Test
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-tech4.forumsactifs.com
Tech
Admin
Admin


Messages : 116
Points : 161
Réputation : 0
Date d'inscription : 20/03/2013
Localisation : "#

Feuille de personnage
Champ test: Test
Blabla:
0/0  (0/0)
Tableau:
TableauColonne 1
Ligne 1

MessageSujet: Re: Tuto toolbar css   Dim 3 Aoû - 15:26

FRANCE
BELGIQUE
Petite section
(maternelle)
1ère maternelle
Moyenne section
(maternelle)
2ème maternelle
Grande section
(maternelle)
3ème maternelle
Cours primaire
(primaire)
1ère primaire
Cours élémentaire 1
(primaire)
2ème primaire
Cours élémentaire 2
(primaire)
3ème primaire
Cours moyen 1
(primaire)
4ème primaire
Cours moyen 2
(primaire)
5ème primaire
6ème
(collège)
6ème primaire
5ème
(collège)
1ère secondaire
4ème
(collège)
2ème secondaire
3ème
(collège)
3ème secondaire
Seconde
(lycée)
4ème secondaire
Première
(lycée)
5ème secondaire
Terminale
(lycée)
6ème secondaire
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-tech4.forumsactifs.com
Contenu sponsorisé




MessageSujet: Re: Tuto toolbar css   

Revenir en haut Aller en bas
 
Tuto toolbar css
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Tuto Panda ActiveScan avec Firefox
» Big tuto
» [Résolu] Toolbar PCland et Gmail (notification)
» [Résolu] Antivir me propose sa nouvelle toolbar !!
» tuto de findykill

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Tutoriel :: Votre 1ère catégorie :: Votre 1er forum-
Sauter vers: