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.

-47%
Le deal à ne pas rater :
DOMO DO1032SV – Aspirateur balai 2 en 1
49.99 € 94.98 €
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 12 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 12 Beshup17
    mon-etoile
    mon-etoile
    FémininAge : 35Messages : 140

    Mar 31 Mai 2016 - 14:05

    merci
    Darth Bogus
    Darth Bogus
    MasculinAge : 34Messages : 46

    Sam 4 Juin 2016 - 11:10

    Chocolakato a écrit:Merci beaucouuuup ! Very Happy
    Sweetdead
    Sweetdead
    FémininAge : 28Messages : 38

    Sam 11 Juin 2016 - 3:38

    Wah ! Merci ! C'est exactement ce que je cherchais *-*
    Wasabii
    Wasabii
    FémininAge : 24Messages : 16

    Jeu 30 Juin 2016 - 1:30

    Merci !



    Modifier la mise en page des Scrollbars de son forum - Page 12 V210
    andie_xcv
    andie_xcv
    FémininAge : 28Messages : 35

    Dim 3 Juil 2016 - 0:32

    J'aimerai bien voir ce que ça donne :) Merci !
    Asarigolo
    Asarigolo
    MasculinAge : 31Messages : 29

    Mer 13 Juil 2016 - 8:43

    thx ♥
    Tweetie
    Tweetie
    FémininAge : 35Messages : 27

    Mer 20 Juil 2016 - 11:45

    merci
    dean winchester
    dean winchester
    MasculinAge : 29Messages : 85

    Jeu 21 Juil 2016 - 0:40

    merci !
    Kiloji
    Kiloji
    FémininAge : 26Messages : 9

    Dim 31 Juil 2016 - 13:19

    Merci !
    ENDLESS-DREAM
    ENDLESS-DREAM
    FémininAge : 32Messages : 31

    Ven 26 Aoû 2016 - 22:52

    Curieuse merci <3
    Callisto
    Callisto
    FémininAge : 27Messages : 45

    Dim 28 Aoû 2016 - 11:44

    merci o/
    Astrid Hofferson
    Astrid Hofferson
    FémininAge : 29Messages : 18

    Mer 31 Aoû 2016 - 2:09

    Merci
    damon w salvatore
    damon w salvatore
    FémininAge : 36Messages : 109

    Dim 11 Sep 2016 - 7:58

    merci
    Luune
    Luune
    FémininAge : 35Messages : 143

    Dim 18 Sep 2016 - 17:42

    Merci !
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Mar 20 Sep 2016 - 13:53

    Je vais essayer, ça a l'air cool Wink !
    Merci !
    MyNameIsTanalia
    MyNameIsTanalia
    FémininAge : 27Messages : 25

    Sam 1 Oct 2016 - 19:43

    Merci bien !
    Tink ♥
    Tink ♥
    FémininAge : 31Messages : 66

    Lun 14 Nov 2016 - 22:41

    merci bien :)
    Waize
    Waize
    FémininAge : 26Messages : 34

    Mar 15 Nov 2016 - 18:26

    Merci ! Very Happy
    Reystern
    Reystern
    FémininAge : 21Messages : 89

    Ven 25 Nov 2016 - 20:03

    Thanks ♥
    Arisu
    Arisu
    FémininAge : 35Messages : 119

    Mar 29 Nov 2016 - 18:36

    Merci !
    Ozsi
    Ozsi
    MasculinAge : 27Messages : 27

    Lun 12 Déc 2016 - 19:39

    Merci :)
    Hawk Lowell
    Hawk Lowell
    FémininAge : 27Messages : 135

    Mer 21 Déc 2016 - 19:10

    Merci
    Manoblack
    Manoblack
    FémininAge : 22Messages : 11

    Sam 24 Déc 2016 - 12:15

    Merci pour ce code, je le cherchais partout ><
    mijako
    mijako
    FémininAge : 31Messages : 83

    Lun 2 Jan 2017 - 7:21

    merci ;;
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Ven 13 Jan 2017 - 23:50

    J'espère que ça marche 8D Merchi
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 5:37