AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Coffret Pokémon Bundle 6 Boosters EV05 Forces ...
Voir le deal

    Modifier la mise en page des Scrollbars de son forum

    Be Shup's
    Be Shup's
    FémininAge : 25Messages : 33

    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 :
    Modifier la mise en page des Scrollbars de son forum - Page 10 Scrollbarparts


    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.



    Modifier la mise en page des Scrollbars de son forum - Page 10 Beshup17
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 29Messages : 169

    Lun 18 Mai 2015 - 22:01

    Merci *Q*
    Littleredhood
    Littleredhood
    FémininAge : 25Messages : 27

    Mar 19 Mai 2015 - 14:28

    La curiosité s'est emparée de moi...Merci :hug:
    lΔω
    lΔω
    FémininAge : 26Messages : 105

    Mer 20 Mai 2015 - 16:30

    merci
    Kurokaze
    Kurokaze
    FémininAge : 32Messages : 35

    Dim 24 Mai 2015 - 1:00

    Merci beaucoup ! =)
    Alondite
    Alondite
    FémininAge : 32Messages : 40

    Mer 10 Juin 2015 - 13:37

    je suis curieuse de voir ça, merci !
    avatar
    Løve
    MasculinAge : 28Messages : 189

    Lun 6 Juil 2015 - 13:50

    Merci ^^
    Lusso
    Lusso
    MasculinAge : 26Messages : 36

    Sam 1 Aoû 2015 - 21:54

    Merci Very Happy
    Matantelie
    Matantelie
    FémininAge : 29Messages : 36

    Dim 2 Aoû 2015 - 1:09

    Merci!
    Romann
    Romann
    FémininAge : 30Messages : 183

    Lun 3 Aoû 2015 - 16:14

    merci ^^



    Modifier la mise en page des Scrollbars de son forum - Page 10 Unicor11
    Anonymous
    Invité

    Lun 3 Aoû 2015 - 19:01

    Merci pour ce code (^_^)
    Yogi Nakagawa
    Yogi Nakagawa
    MasculinAge : 23Messages : 94

    Mar 4 Aoû 2015 - 3:55

    Thanks!
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 10 Aoû 2015 - 20:57

    waw *-*
    MikuSong
    MikuSong
    FémininAge : 26Messages : 32

    Lun 24 Aoû 2015 - 15:10

    Curieuse aussi de voir cette astuce ;3



    Modifier la mise en page des Scrollbars de son forum - Page 10 681302Boo2A
    N'est pas peur...Je suis un gentil fantôme /
    Kovu
    Kovu
    FémininAge : 22Messages : 257

    Ven 28 Aoû 2015 - 11:00

    Merci !
    NekoMiaouw
    NekoMiaouw
    FémininAge : 27Messages : 148

    Jeu 3 Sep 2015 - 19:34

    merci



    Modifier la mise en page des Scrollbars de son forum - Page 10 388245alisign
    Ombinou
    Ombinou
    FémininAge : 29Messages : 157

    Sam 19 Sep 2015 - 21:30

    Merci
    Myosotis
    Myosotis
    FémininAge : 23Messages : 101

    Dim 20 Sep 2015 - 11:39

    Merci ! *-*
    BlueBerry ♪
    BlueBerry ♪
    FémininAge : 26Messages : 138

    Sam 26 Sep 2015 - 12:31

    merci !



    Modifier la mise en page des Scrollbars de son forum - Page 10 7310
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Dim 4 Oct 2015 - 12:38

    Merci beaucoup, c'est ce que je cherchais !
    Sneakazuha
    Sneakazuha
    FémininAge : 28Messages : 34

    Mar 13 Oct 2015 - 13:07

    *mode curieuse on* merciiii
    Sighild
    Sighild
    FémininAge : 37Messages : 225

    Ven 16 Oct 2015 - 19:38

    Je suis curieuse! Merci pour le tuto.
    Kya-chan
    Kya-chan
    FémininAge : 28Messages : 160

    Dim 18 Oct 2015 - 18:47

    Ooooooh °-° Merci ! o/




    If I had a hammer...
    I wanna do bad things with you~

    Dreamyland
    Dreamyland
    FémininAge : 26Messages : 88

    Dim 18 Oct 2015 - 22:24

    Merciiiii
    Phoenix Elen
    Phoenix Elen
    FémininAge : 31Messages : 93

    Lun 19 Oct 2015 - 15:14

    Oh c'est super ça ! merci :)



    Modifier la mise en page des Scrollbars de son forum - Page 10 1u4i
    Tempy
    Tempy
    FémininAge : 25Messages : 76

    Lun 19 Oct 2015 - 16:07

    Arg, Et la curiosité eu raison du chat.

    Mais les chats ont neuf vies, alors je me lance !

    Merci du partage !
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 10:47