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 : -15%
(Adhérents) LEGO® Icons 10318 Le Concorde
Voir le deal
169.99 €

    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 6 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 6 Beshup17
    Médea
    Médea
    FémininAge : 29Messages : 43

    Dim 18 Aoû 2013 - 3:22

    Merci :3
    Symphony Lips
    Symphony Lips
    FémininAge : 32Messages : 6

    Dim 18 Aoû 2013 - 23:24

    Merciiii Very Happy 
    Irisa
    Irisa
    FémininAge : 25Messages : 20

    Mer 21 Aoû 2013 - 19:30

    Merci !
    SNMitsuki
    SNMitsuki
    FémininAge : 26Messages : 63

    Ven 30 Aoû 2013 - 17:27

    Merci bien :3



    Modifier la mise en page des Scrollbars de son forum - Page 6 250032Sanstitre1
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Mer 4 Sep 2013 - 14:00

    MERCI!



    Modifier la mise en page des Scrollbars de son forum - Page 6 1435969469-signd
    FEZ!FEZ!
    Modifier la mise en page des Scrollbars de son forum - Page 6 150804081846482087
    Argy
    Argy
    FémininAge : 25Messages : 98

    Ven 6 Sep 2013 - 19:19

    Merci !
    erika02
    erika02
    FémininAge : 27Messages : 278

    Lun 9 Sep 2013 - 18:20

    merci



    Modifier la mise en page des Scrollbars de son forum - Page 6 45054210
    alexandre385
    alexandre385
    MasculinAge : 23Messages : 25

    Lun 9 Sep 2013 - 20:09

    Merci
    Ryosaki
    Ryosaki
    MasculinAge : 31Messages : 109

    Mar 10 Sep 2013 - 12:45

    Merci



    Modifier la mise en page des Scrollbars de son forum - Page 6 Tutog
    Mayiie
    Mayiie
    FémininAge : 33Messages : 39

    Lun 16 Sep 2013 - 20:06

    Merci ! Very Happy
    Deviliar
    Deviliar
    FémininAge : 35Messages : 44

    Ven 27 Sep 2013 - 7:26

    Merci !
    Taoro
    Taoro
    MasculinAge : 31Messages : 78

    Lun 30 Sep 2013 - 11:22

    Merci !!



    Livia666
    Livia666
    FémininAge : 36Messages : 61

    Lun 28 Oct 2013 - 13:59

    Je suis curieuse de voir ce que ça donne ^^ Merci !
    Mitsu'ki
    Mitsu'ki
    FémininAge : 34Messages : 31

    Mer 30 Oct 2013 - 12:35

    merciii ^^



    Modifier la mise en page des Scrollbars de son forum - Page 6 1o27SvUHjU
    Fartiny
    Fartiny
    FémininAge : 26Messages : 119

    Sam 9 Nov 2013 - 19:03

    merci ((:
    Sakura-chan
    Sakura-chan
    FémininAge : 26Messages : 180

    Lun 11 Nov 2013 - 16:39

    Merci !
    Asunie
    Asunie
    FémininAge : 32Messages : 68

    Mar 19 Nov 2013 - 15:01

    merci !
    Tekesuta
    Tekesuta
    FémininAge : 29Messages : 33

    Mer 27 Nov 2013 - 22:45

    très curieuse de voir,
    Merci beaucoup!
    Milkiniz
    Milkiniz
    FémininAge : 30Messages : 72

    Ven 29 Nov 2013 - 15:15

    Ah merci je cherchais depuis longtemps ce code Very Happy
    Miss Ryuichi
    Miss Ryuichi
    FémininAge : 32Messages : 36

    Dim 8 Déc 2013 - 11:08

    Merci =)
    nairon
    nairon
    FémininAge : 34Messages : 38

    Sam 14 Déc 2013 - 12:40

    Merci (:
    Katerinata
    Katerinata
    FémininAge : 29Messages : 22

    Mar 24 Déc 2013 - 1:06

    merci.
    Neymar
    Neymar
    MasculinAge : 25Messages : 139

    Ven 27 Déc 2013 - 11:24

    Merci du partage ! ~
    MARLEY SMITH.
    MARLEY SMITH.
    FémininAge : 30Messages : 156

    Lun 30 Déc 2013 - 14:28

    Merci pour ce tuto  Very Happy 
    Eykillyn
    Eykillyn
    FémininAge : 26Messages : 19

    Jeu 2 Jan 2014 - 22:16

    Curieuse powaa, j'veux voir .-.
    Thanks !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 20:52