AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Modifier la mise en page des Scrollbars de son forum

    Partagez
    avatar
    Be Shup's
    FémininAge : 18Messages : 33

    le Ven 6 Juil 2012 - 22:19

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Coucou !

    Pour modifier la scrollbar de son forum, il suffit que d'utiliser du CSS. Rien de bien compliquer.

    Petit exemple sur un bloc :
    Je suis un texte qui s'amuse et s'amuse à être stupidement vraiment trop long et ainsi de suite. Roses are Red, Violets are Blue, bla bla bla of the rest of the poem.


    Édition par Sparrow : cette astuce ne fonctionne que sous Chrome, Safari et Opéra (bref, les navigateurs "webkit")


    Cette astuce a été faite à partie de ce tutoriel en anglais. En fait, c'est pratiquement sa traduction. Bref, passons au boulot !




    Vous devez intégré ce code dans : PA >> Affichage >> Images et couleurs >> Couleurs >> Feuille de Style CSS"

    Puis intégrez ce code :
    Code:
    /*La scrollbar elle-même #1*/
    ::-webkit-scrollbar {
    }
    /*Les boutons de la scrollbar (les flèches) #2*/
    ::-webkit-scrollbar-button {
    }
    /*L'espace sur lequel la barre de la scrollbarre défile #3*/
    ::-webkit-scrollbar-track {
    }
    /*L'espace sous la barre qui n'est pas couvert par la barre #4*/
    ::-webkit-scrollbar-track-piece {
    }
    /*La barre de la scrollbar #5*/
    ::-webkit-scrollbar-thumb {
    }
    /*Le coin en bas à droite quand il y a une scrollbar horizontale et verticale #6*/
    ::-webkit-scrollbar-corner {
    }
    /*Image de size du coin en bas à droite pour agrandir ou diminuer la zone #7*/
    ::-webkit-resizer {
    }

    Voir l'image pour quoi qui est quoi :



    Avec les codes ci-haut, les scrollbars s'appliquent à tout le forum. Pour l'appliquer à des endroits spécifiques, spécifiez l'élément visé quand vous mettez le CSS.

    Exemple où cela s'appliquerait sur un bloc avec la class "maclass" :
    Code:
    .maclass::-webkit-scrollbar {
    }

    Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.


    Pour les curieux, voilà le code de base pour l'exemple en haut :
    Code:
    /*La scrollbar elle-même*/
    ::-webkit-scrollbar {
      width: 10px; /*Largeur pour les scrollbars verticales*/
      height: 10px; /*Hauteur pour les scrollbars horizontales*/
      border-radius: 5px;
    }
    /*L'espace sur lequel la barre de la scrollbarre défile*/
    ::-webkit-scrollbar-track {
      background: #a3a3a3;
      width: 10px; /*Largeur pour les scrollbars verticales*/
      height: 10px; /*Hauteur pour les scrollbars horizontales*/
      border-radius: 5px;
    }
    /*La barre de la scrollbar*/
    ::-webkit-scrollbar-thumb {
      background: #757575;
      width: 10px; /*Largeur pour les scrollbars verticales*/
      height: 10px; /*Hauteur pour les scrollbars horizontales*/
      border-radius: 5px;
    }


    /*À voir dans les pseudo-class plus bas*/
    ::-webkit-scrollbar-thumb:hover {
      background: #656565;
    }
    ::-webkit-scrollbar-thumb:active {
      background: #454545;
    }




    Pour personnaliser la scrollbar plus en profondeur, vous pouvez utiliser des pseudo-class sélecteur, comme ceux-ci :
    Code:
    /*S'applique à une scrollbar horizontale*/
    :horizontal

    /*S'applique à une scrollbar verticale*/
    :vertical

    /*S'applique aux boutons et au fond derrière la barre défilante qui sont placés avant la barre  de la scrollbar*/
    :start

    /*S'applique aux boutons et au fond derrière la barre défilante qui sont placés après la barre  de la scrollbar*/
    :end

    /*S'applique si il y a un coin en bas à droite (donc si il y a une scrollbar verticale et une scrollbar horizontale en même temps)*/
    :corner-present

    /*S'applique quand on est en train de cliquer sur la pièce de la scrollbar visée*/
    :active

    /*S'applique quand on survole le bout de la pièce de la scrollbar visée*/
    :hover

    Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.


    Petit exemple où je veux seulement sélectionner le bouton d'une scrollbar vertical qui est avant la barre de défilement (bref le bouton avec la flèche vers le haut) :
    Code:
    ::-webkit-scrollbar-button:vertical:start {
    }

    Petit exemple ou je veux seulement mettre du style à la barre défilante de la scrollbar quand je clique dessus :
    Code:
    ::-webkit-scrollbar-thumb:active {
    }

    Voila, vous pouvez bien évidemment ajoutez du CSS pour le personnaliser à vos goûts.




    Merci pour cette petite lecture. ^^

    Bisous et bonne soirée/journée.



    avatar
    Immortal
    FémininAge : 30Messages : 631

    le Jeu 3 Jan 2013 - 10:55

    Merci pour cette astuce et bonne année **




    Besoin d'avis pour un futur forum multi-univers.
    Promis je suis ouverte aux critiques comme aux solutions
    :love:
    CLICK
    avatar
    Noubil
    FémininAge : 29Messages : 56

    le Sam 5 Jan 2013 - 7:43

    Merci
    avatar
    Ouat
    FémininAge : 33Messages : 74

    le Mer 16 Jan 2013 - 8:20

    Depuis le temps que je cherche comment faire... Merci beaucoup !
    avatar
    Sayuri
    FémininAge : 24Messages : 18

    le Ven 18 Jan 2013 - 18:50

    merci je cherchais cette astuce depuis quelques jours :)
    avatar
    Saia
    FémininAge : 22Messages : 182

    le Sam 19 Jan 2013 - 20:20

    merci beaucoup o/



    avatar
    Amera
    FémininAge : 24Messages : 67

    le Mer 30 Jan 2013 - 20:16

    Merci beaucoup !



    avatar
    Sephy
    FémininAge : 23Messages : 134

    le Jeu 31 Jan 2013 - 3:23

    Merci!
    avatar
    A.Volk
    FémininAge : 25Messages : 145

    le Ven 1 Fév 2013 - 21:46

    Merci bien ! \o
    avatar
    Kawel
    MasculinAge : 23Messages : 203

    le Sam 2 Fév 2013 - 16:28

    Merci du partage :)



    avatar
    Orange Sanguine
    FémininAge : 20Messages : 75

    le Lun 4 Fév 2013 - 3:23

    Merci ^^



    avatar
    harmony Lightnight
    FémininAge : 21Messages : 30

    le Sam 9 Fév 2013 - 16:15

    Merciii ! ♥
    avatar
    Invité

    le Sam 9 Fév 2013 - 17:11

    Merci !
    avatar
    Tempo
    MasculinAge : 25Messages : 22

    le Sam 16 Fév 2013 - 5:37

    Merci (j'espère)
    avatar
    Ryosaki
    MasculinAge : 24Messages : 109

    le Sam 16 Fév 2013 - 11:47

    Merci



    avatar
    Seiden.
    MasculinAge : 23Messages : 70

    le Ven 22 Fév 2013 - 17:08

    Chrome rules.
    Thank you.
    avatar
    Poulpy
    FémininAge : 27Messages : 32

    le Ven 1 Mar 2013 - 1:42

    Merci ♥ Est-ce qu'on peut la faire en deux couleurs ? Car là, elle est totalement unie, c'est un peu dur pour ce repérer ou aller.
    avatar
    Cydae
    FémininAge : 24Messages : 99

    le Dim 3 Mar 2013 - 20:48

    Juste histoire de tester, merci!
    avatar
    Reeta
    FémininAge : 22Messages : 34

    le Mer 6 Mar 2013 - 1:40

    J'ai hâte de voir ce que ca donnera
    avatar
    Calypso-FR
    MasculinAge : 29Messages : 28

    le Jeu 7 Mar 2013 - 22:30

    merci
    avatar
    Kiowa
    FémininAge : 28Messages : 212

    le Mar 12 Mar 2013 - 18:36

    merci
    avatar
    Pinku
    FémininAge : 18Messages : 139

    le Jeu 14 Mar 2013 - 11:24

    J'aimerais bien s'avoir de quoi il s'agit : ) Merci du partage !
    avatar
    Black Moon
    FémininAge : 21Messages : 101

    le Ven 22 Mar 2013 - 18:56

    Merci !
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Ven 22 Mar 2013 - 22:09

    Merci pour le tutoriel =) !

    Taktiik.

    avatar
    Imari
    FémininAge : 33Messages : 67

    le Sam 23 Mar 2013 - 17:21

    La curiosité me pousse, alors merci bien :hug:



    avatar
    Eques
    MasculinAge : 20Messages : 109

    le Dim 24 Mar 2013 - 20:52

    Je veux voir **

    Edit:
    Comment mettre la barre en deux couleur ? Parce que là, on peut même pas la voir :/
    Contenu sponsorisé


      La date/heure actuelle est Sam 29 Avr 2017 - 19:25