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 à ne pas rater :
Manga Chainsaw Man : où acheter le Tome 17 édition Collector de ...
19.99 €
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 11 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 11 Beshup17
    FREAKS*
    FREAKS*
    FémininAge : 28Messages : 30

    Sam 24 Oct 2015 - 14:33

    Merci !
    Nishiki
    Nishiki
    FémininAge : 26Messages : 325

    Mar 27 Oct 2015 - 21:24

    merci



    Modifier la mise en page des Scrollbars de son forum - Page 11 Head19
    Kanra
    Kanra
    FémininAge : 23Messages : 113

    Sam 31 Oct 2015 - 15:18

    Merci ! Very Happy
    Blacklice
    Blacklice
    FémininAge : 27Messages : 11

    Mer 4 Nov 2015 - 21:34

    Merciiii :friends:
    Vixen Smile
    Vixen Smile
    FémininAge : 30Messages : 9

    Jeu 12 Nov 2015 - 11:30

    Merci :)
    ass kicker
    ass kicker
    FémininAge : 29Messages : 80

    Sam 28 Nov 2015 - 15:06

    merci ♥



      see you again
      No matter where you are, whether you’re a quarter mile away, or half way around the world … you’ll always be with me. You’ll always be my brother.©️endlesslove
    Aishitteru
    Aishitteru
    FémininAge : 28Messages : 68

    Dim 6 Déc 2015 - 11:28

    Thanks ! o/
    Hopefox
    Hopefox
    FémininAge : 26Messages : 36

    Mar 29 Déc 2015 - 22:26

    merci bien ! Very Happy
    Pikabouh
    Pikabouh
    FémininAge : 22Messages : 123

    Mer 30 Déc 2015 - 21:58

    Thanks !
    Wiss
    Wiss
    FémininAge : 19Messages : 53

    Dim 31 Jan 2016 - 18:56

    Merki



    Modifier la mise en page des Scrollbars de son forum - Page 11 Wiss11
    Autre signa:
    Sasha57
    Sasha57
    FémininAge : 29Messages : 35

    Sam 6 Fév 2016 - 16:21

    Merci <3
    servity
    servity
    MasculinAge : 52Messages : 82

    Sam 6 Fév 2016 - 21:53

    Merci



    Modifier la mise en page des Scrollbars de son forum - Page 11 HadqjCkktw
    Kilda
    Kilda
    FémininAge : 43Messages : 73

    Dim 7 Fév 2016 - 10:36

    merci
    Amu
    Amu
    FémininAge : 26Messages : 16

    Dim 14 Fév 2016 - 21:30

    Merciii ♥






    Itsumo doori no aru hi no koto, Kimi wa totsuzen tachiagari itta, Konya hoshi wo mi ni yukou. 
    dusty scarecrow.
    KoalaBzh9
    KoalaBzh9
    FémininAge : 24Messages : 54

    Ven 19 Fév 2016 - 16:03

    Merci ^^
    Tinkky
    Tinkky
    FémininAge : 33Messages : 104

    Ven 26 Fév 2016 - 23:13

    Merci du partage ^_^
    Hivernxl
    Hivernxl
    MasculinAge : 23Messages : 12

    Sam 27 Fév 2016 - 2:28

    merci
    Fiery Aura
    Fiery Aura
    FémininAge : 25Messages : 57

    Sam 27 Fév 2016 - 7:23

    Merci
    Amariem
    Amariem
    FémininAge : 25Messages : 98

    Ven 4 Mar 2016 - 21:42

    Marchi !



    Modifier la mise en page des Scrollbars de son forum - Page 11 241091dfsdfds
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Sam 19 Mar 2016 - 18:33

    Oh je veux voir ça! merci
    Zuz'
    Zuz'
    FémininAge : 28Messages : 55

    Dim 17 Avr 2016 - 16:09

    Merci du partage ♥
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 25Messages : 110

    Mar 19 Avr 2016 - 21:38

    Merci ^^
    R.Falsworth
    R.Falsworth
    FémininAge : 27Messages : 92

    Jeu 5 Mai 2016 - 15:39

    merciii, pile ce qu'il me fallait
    Inoue Musaki
    Inoue Musaki
    FémininAge : 34Messages : 147

    Mar 10 Mai 2016 - 14:18

    merci
    Anonymous
    Invité

    Dim 29 Mai 2016 - 9:25

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 11:51