Tutoriel

Tuto toolbar css Logo

Google.fr

Forumactif.com

http://forum.forumactif.com

Rejoignez le forum, c’est rapide et facile

Tutoriel

Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Tutoriel

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
Tuto toolbar css EmptyMar 8 Aoû - 12:03 par Tech

» Test
Tuto toolbar css EmptyMer 19 Avr - 11:47 par Tech

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

» test
Tuto toolbar css EmptyVen 14 Aoû - 13:11 par Tech

» [Alert] Test 2
Tuto toolbar css EmptyVen 2 Jan - 13:05 par Tech

» Ceci est un test
Tuto toolbar css EmptyDim 2 Nov - 9:48 par Tech

» [Alert] Test
Tuto toolbar css EmptyDim 2 Nov - 9:47 par Tech

» Votre 1er sujet
Tuto toolbar css EmptyDim 5 Oct - 10:15 par Tech

» test
Tuto toolbar css EmptyVen 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


[ Voir toute la liste ]


Le record du nombre d'utilisateurs en ligne est de 12 le Dim 10 Déc - 17:05

A problem ?

If you have a problem with this forum, please contact an administrator :
Le Deal du moment :
Cartes Pokémon 151 : où trouver le ...
Voir le deal

    Tuto toolbar css

    Tech
    avatar
    Tech
    Admin
    Admin


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

    Feuille de personnage
    Champ test: Test
    Blabla:
    Tuto toolbar css Left_bar_bleue0/0Tuto toolbar css Empty_bar_bleue  (0/0)
    Tableau:
    TableauColonne 1Colonne 1
    Ligne 1Ligne 1
    • Message n°1

    Tuto toolbar css Empty Tuto toolbar css

    Message par Tech 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

                   
    Tuto toolbar css 209609infoSi 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_textareaTuto toolbar css 46935310
    div#fa_search / div#fa_textareaTuto toolbar css 46935311
    div#fa_shareTuto toolbar css 19763810
    span#fa_share_textTuto toolbar css 61396410
    a#fa_fbTuto toolbar css 34818710
    a#fa_twitterTuto toolbar css 13680410
    a#fa_gpTuto toolbar css 26917710
    a#fa_mailTuto toolbar css 95641510
    a#fa_rssTuto toolbar css 64072310
    div#fa_rightTuto toolbar css 16962310
    a#fa_welcomeTuto toolbar css 98938210
    a#fa_notificationsTuto toolbar css 42627510
    span#notif_unreadTuto toolbar css 59976510
    a#fa_hideTuto toolbar css 95728310
    a#fa_showTuto toolbar css 83032510
       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"

    Ce tutoriel a été rédigé par le Staff du Forum des Forums,
    Et en particulier par Matriochka et Tech.

    Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.


    Dernière édition par Tech le Ven 25 Juil - 14:59, édité 2 fois
    • Revenir en haut
    Tech
    avatar
    Tech
    Admin
    Admin


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

    Feuille de personnage
    Champ test: Test
    Blabla:
    Tuto toolbar css Left_bar_bleue0/0Tuto toolbar css Empty_bar_bleue  (0/0)
    Tableau:
    TableauColonne 1Colonne 1
    Ligne 1Ligne 1
    • Message n°2

    Tuto toolbar css Empty Re: Tuto toolbar css

    Message par Tech 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
    Tech
    avatar
    Tech
    Admin
    Admin


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

    Feuille de personnage
    Champ test: Test
    Blabla:
    Tuto toolbar css Left_bar_bleue0/0Tuto toolbar css Empty_bar_bleue  (0/0)
    Tableau:
    TableauColonne 1Colonne 1
    Ligne 1Ligne 1
    • Message n°3

    Tuto toolbar css Empty Re: Tuto toolbar css

    Message par Tech 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
    Tech
    avatar
    Tech
    Admin
    Admin


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

    Feuille de personnage
    Champ test: Test
    Blabla:
    Tuto toolbar css Left_bar_bleue0/0Tuto toolbar css Empty_bar_bleue  (0/0)
    Tableau:
    TableauColonne 1Colonne 1
    Ligne 1Ligne 1
    • Message n°4

    Tuto toolbar css Empty Re: Tuto toolbar css

    Message par Tech 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 */
    }
    • Revenir en haut
    Tech
    avatar
    Tech
    Admin
    Admin


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

    Feuille de personnage
    Champ test: Test
    Blabla:
    Tuto toolbar css Left_bar_bleue0/0Tuto toolbar css Empty_bar_bleue  (0/0)
    Tableau:
    TableauColonne 1Colonne 1
    Ligne 1Ligne 1
    • Message n°5

    Tuto toolbar css Empty Re: Tuto toolbar css

    Message par Tech 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
    Contenu sponsorisé

    Contenu sponsorisé


    • Message n°6

    Tuto toolbar css Empty Re: Tuto toolbar css

    Message par Contenu sponsorisé

    • Revenir en haut
      La date/heure actuelle est Dim 28 Avr - 2:11