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 : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

    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 9 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 9 Beshup17
    Doctor Who
    Doctor Who
    MasculinAge : 30Messages : 160

    Ven 12 Déc 2014 - 15:55

    merci :)





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    Okalem
    Okalem
    FémininAge : 23Messages : 63

    Jeu 8 Jan 2015 - 23:12

    merci !
    avatar
    Blue
    MasculinAge : 26Messages : 36

    Mer 14 Jan 2015 - 13:35

    Merci :3
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Ven 16 Jan 2015 - 14:08

    Merci ^^
    Eden.
    Eden.
    FémininAge : 31Messages : 201

    Ven 23 Jan 2015 - 13:29

    Merci !
    Akina-chan
    Akina-chan
    FémininAge : 30Messages : 140

    Sam 24 Jan 2015 - 14:09

    Merci
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Sam 24 Jan 2015 - 21:59

    merci ^^
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Dim 1 Fév 2015 - 22:59

    merci



    Patricia :)
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Sam 14 Fév 2015 - 15:10

    Merci ^^



    Modifier la mise en page des Scrollbars de son forum - Page 9 Ye49
    Bankara
    Bankara
    FémininAge : 28Messages : 18

    Dim 15 Fév 2015 - 20:49

    Merci de l'astuce ! :3
    L'Epineuse
    L'Epineuse
    FémininAge : 29Messages : 32

    Mar 17 Fév 2015 - 11:08

    merchi du partage! <3
    Paradéo
    Paradéo
    FémininAge : 26Messages : 21

    Mar 17 Fév 2015 - 15:55

    need ! merci!
    CaNL
    CaNL
    FémininAge : 31Messages : 9

    Lun 23 Fév 2015 - 17:21

    Merci ^^
    Maître Corbeau
    Maître Corbeau
    MasculinAge : 24Messages : 21

    Ven 27 Fév 2015 - 23:15

    merci ^^
    Théine
    Théine
    MasculinAge : 43Messages : 24

    Mer 18 Mar 2015 - 16:08

    merci
    Kamesora
    Kamesora
    FémininAge : 31Messages : 93

    Ven 20 Mar 2015 - 13:28

    merci beaucoup
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Dim 22 Mar 2015 - 18:13

    ah ? merci
    Kalypso San
    Kalypso San
    FémininAge : 28Messages : 21

    Sam 11 Avr 2015 - 12:02

    Merci ^-^



    Modifier la mise en page des Scrollbars de son forum - Page 9 4keb

    Liens / Contacts:
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Dim 12 Avr 2015 - 0:08

    veux voir !



    Modifier la mise en page des Scrollbars de son forum - Page 9 I3k3
    Miku
    Miku
    MasculinAge : 31Messages : 70

    Mer 15 Avr 2015 - 15:09

    Un énorme merci !
    Lalabelle
    Lalabelle
    FémininAge : 31Messages : 35

    Ven 24 Avr 2015 - 6:19

    Merci !
    Chanel.♥
    Chanel.♥
    FémininAge : 23Messages : 42

    Ven 24 Avr 2015 - 21:30

    Merci ♥
    Jadesse
    Jadesse
    FémininAge : 25Messages : 30

    Jeu 7 Mai 2015 - 16:45

    Merci!
    SIXE
    SIXE
    FémininAge : 32Messages : 39

    Jeu 7 Mai 2015 - 21:37

    ♥ Merci beaucoup !
    Katia Akane
    Katia Akane
    FémininAge : 33Messages : 37

    Lun 11 Mai 2015 - 1:09

    Je serais intéressé de voir ça =)
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:19