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.

-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.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 2 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 2 Beshup17
    Eraendil
    Eraendil
    FémininAge : 31Messages : 92

    Ven 24 Aoû 2012 - 21:26

    J'suis bien curieuse, merci :)



    Modifier la mise en page des Scrollbars de son forum - Page 2 Sign_n10
    Zee
    Zee
    FémininAge : 33Messages : 37

    Dim 26 Aoû 2012 - 1:55

    Ca m'intrigue ! Merci du partage !
    Tsumei
    Tsumei
    MasculinAge : 33Messages : 116

    Dim 26 Aoû 2012 - 16:12

    Merci !
    People Are Strange
    People Are Strange
    FémininAge : 37Messages : 29

    Lun 27 Aoû 2012 - 14:38

    *curieuse* merci *-*
    りん
    りん
    FémininAge : 31Messages : 73

    Mar 28 Aoû 2012 - 17:44

    merci ~
    Crook's
    Crook's
    MasculinAge : 24Messages : 15

    Mar 28 Aoû 2012 - 20:57

    Merci
    Ryuu
    Ryuu
    FémininAge : 30Messages : 61

    Mar 28 Aoû 2012 - 23:14

    Merci <3



    Le chat bleu
    Le chat bleu
    FémininMessages : 44

    Lun 3 Sep 2012 - 19:06

    Merci !
    Vador
    Vador
    MasculinAge : 23Messages : 64

    Mar 4 Sep 2012 - 10:12

    Merci
    Little Pon
    Little Pon
    FémininAge : 28Messages : 45

    Mer 5 Sep 2012 - 17:59

    Merci d'avance ♥



    Modifier la mise en page des Scrollbars de son forum - Page 2 39953110
    Miss Volchok
    Miss Volchok
    FémininAge : 37Messages : 139

    Ven 7 Sep 2012 - 3:34

    Par curiosité, merci.
    Bleufi
    Bleufi
    FémininAge : 28Messages : 311

    Dim 9 Sep 2012 - 8:25

    Merci



    Modifier la mise en page des Scrollbars de son forum - Page 2 875686Asuna
    LazuliNight
    LazuliNight
    MasculinAge : 30Messages : 52

    Sam 15 Sep 2012 - 1:53

    merci :)

    EDIT : Par contre petite question, comment fait-on pour voir la petite barre, car à part la barre qui fait de bas en haut, on ne voit pas la barre de défilement, peut-on faire en sorte de la voir ? Si oui quel est le code ? Merci d'avance ^-^



    Modifier la mise en page des Scrollbars de son forum - Page 2 SPtWNU
    manhattan
    manhattan
    FémininAge : 30Messages : 4

    Sam 15 Sep 2012 - 21:08

    Oh depuis le temps que je cherche ça. Merci :hug:
    Elliot.
    Elliot.
    FémininAge : 34Messages : 23

    Lun 17 Sep 2012 - 18:32

    Ca fait un petit moment que je cherche à personnaliser ma scrollbar sans y arriver, je suis curieuse de voir tout ça Very Happy
    Merci d'avance =)
    Sarah W.
    Sarah W.
    FémininAge : 25Messages : 35

    Mer 19 Sep 2012 - 16:51

    Thank you
    Ruby*
    Ruby*
    FémininAge : 32Messages : 24

    Jeu 20 Sep 2012 - 22:27

    Merci (a)
    Kiwix
    Kiwix
    FémininAge : 28Messages : 68

    Ven 21 Sep 2012 - 20:08

    Merci !!
    Chaussette
    Chaussette
    FémininAge : 31Messages : 59

    Lun 24 Sep 2012 - 22:26

    Merci
    KaraV3
    KaraV3
    MasculinAge : 27Messages : 27

    Sam 29 Sep 2012 - 13:34

    Merci
    Hisha
    Hisha
    FémininAge : 24Messages : 44

    Sam 29 Sep 2012 - 16:47

    Merci *0*
    Ui
    Ui
    FémininAge : 29Messages : 16

    Sam 29 Sep 2012 - 19:52

    Merci pour le partage. Je suis curieuse de voir comment ça fonctionne. Wink
    Jona'
    Jona'
    MasculinAge : 25Messages : 65

    Dim 21 Oct 2012 - 18:38

    Merci!!!!



    Modifier la mise en page des Scrollbars de son forum - Page 2 292891SIGNATUREIrumaNekoGirl
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Lun 22 Oct 2012 - 9:14

    merci
    Shiney
    Shiney
    FémininAge : 26Messages : 26

    Mer 24 Oct 2012 - 10:07

    merci.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:16