AccueilFAQRechercherMembresGroupesS'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.


    Modifier la mise en page des Scrollbars de son forum

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

    le 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 5 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 5 Beshup17
    Asphodèle
    Asphodèle
    FémininAge : 30Messages : 11

    le Mer 27 Mar 2013 - 14:37

    Merci =)
    Rapsodie♥
    Rapsodie♥
    FémininAge : 26Messages : 63

    le Mer 27 Mar 2013 - 19:56

    merci



    - Ecrire, c'est ranger le bordel qu'on a dans sa tête. -
    Delilah_
    Delilah_
    FémininAge : 22Messages : 4

    le Mer 3 Avr 2013 - 23:24

    Merci ! :hug:
    Noob's
    Noob's
    MasculinAge : 24Messages : 129

    le Jeu 4 Avr 2013 - 16:00

    Une Barre comment ? Razz En tous cas merci ! :)
    Crown
    Crown
    MasculinAge : 23Messages : 16

    le Dim 7 Avr 2013 - 11:04

    Takk fyrir !



    Modifier la mise en page des Scrollbars de son forum - Page 5 Sign_110
    avatar
    Risha
    FémininAge : 21Messages : 19

    le Ven 26 Avr 2013 - 13:20

    Merci :)
    Thelma
    Thelma
    FémininAge : 28Messages : 32

    le Sam 27 Avr 2013 - 2:14

    Merci beaucoup. ^^
    Samluna
    Samluna
    FémininAge : 19Messages : 96

    le Dim 28 Avr 2013 - 19:26

    Wow ! J'aime *O* Merci beaucoup :3




    Priez pour Paris. Priez pour la liberté.
    Priez pour Paris. Priez pour l'égalité.
    Priez pour Paris. Pour la fraternité.

    #Pray for Paris
    Modifier la mise en page des Scrollbars de son forum - Page 5 Tumblr_n4vso3dRJP1qf9mevo1_500
    Justeen
    Justeen
    FémininAge : 27Messages : 30

    le Ven 24 Mai 2013 - 13:07

    Par curiosité ! :)
    Heartfilia
    Heartfilia
    FémininAge : 19Messages : 98

    le Dim 26 Mai 2013 - 12:40

    Je suis curieuse de voir ça, merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    Anonymous
    Invité

    le Lun 27 Mai 2013 - 13:54

    Merci pour l'astuce :)
    QueenDancing13
    QueenDancing13
    FémininAge : 22Messages : 106

    le Mar 4 Juin 2013 - 15:14

    Merci :)



    Modifier la mise en page des Scrollbars de son forum - Page 5 Christina_Aguilera_Signature_by_Sitic
    Lena
    Lena
    FémininAge : 28Messages : 100

    le Sam 8 Juin 2013 - 0:05

    Helloooo ~


    merci du partage *.*



    Modifier la mise en page des Scrollbars de son forum - Page 5 Lena13

    Merci a Kazuya pour son kit =)
    Zooé
    Zooé
    FémininAge : 21Messages : 66

    le Dim 9 Juin 2013 - 13:51

    micii
    effyi
    effyi
    FémininAge : 24Messages : 41

    le Ven 14 Juin 2013 - 15:56

    Merci !
    Kânon
    Kânon
    FémininAge : 30Messages : 30

    le Lun 24 Juin 2013 - 18:18

    Merci
    avatar
    Miyoshi
    FémininAge : 24Messages : 54

    le Jeu 4 Juil 2013 - 18:17

    Merci, merci ! o/
    NathanaelSane
    NathanaelSane
    FémininAge : 25Messages : 73

    le Mar 9 Juil 2013 - 4:18

    Merci
    Lestrange
    Lestrange
    FémininAge : 23Messages : 163

    le Mar 16 Juil 2013 - 14:19

    Veut voir !
    Merci :)
    Train123
    Train123
    MasculinAge : 18Messages : 40

    le Sam 20 Juil 2013 - 9:47

    MERCI
    AlexeB
    AlexeB
    FémininAge : 23Messages : 165

    le Sam 20 Juil 2013 - 11:59

    Merci :heart:
    Aki'
    Aki'
    FémininAge : 22Messages : 255

    le Mer 24 Juil 2013 - 15:24

    Je suis curieuse
    Sea, sex and sun
    Sea, sex and sun
    FémininAge : 30Messages : 9

    le Jeu 1 Aoû 2013 - 14:42

    C'est ce que je cherchais ! Merci beaucoup !
    Cassis.7
    Cassis.7
    FémininAge : 22Messages : 19

    le Ven 2 Aoû 2013 - 14:20

    Merci ! ♥



    Modifier la mise en page des Scrollbars de son forum - Page 5 Fma10
    Rosedesvents
    Rosedesvents
    FémininAge : 32Messages : 96

    le Mer 7 Aoû 2013 - 10:22

    Très sympa, merci ! Depuis le temps que je me posais la question de savoir comment les personnaliser Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2019 - 4:52