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

    Partagez
    avatar
    Be Shup's
    FémininAge : 18Messages : 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 :



    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.



    avatar
    StrawBerru
    FémininAge : 25Messages : 15

    le Mar 30 Oct 2012 - 15:27

    merci
    avatar
    AQW
    FémininAge : 22Messages : 223

    le Mer 31 Oct 2012 - 10:48

    merci ~



    Blblbl. ♥
    avatar
    Sakira
    FémininAge : 24Messages : 89

    le Mer 31 Oct 2012 - 16:13

    Mercii =)



    Bientôt peut être o/
    Dépendra de ma motiv'
    avatar
    Invité

    le Ven 2 Nov 2012 - 9:36

      Oh ! Voilà qui est intéressant dis donc ! Milles merci x)
    avatar
    •MYV382•
    FémininAge : 20Messages : 55

    le Lun 5 Nov 2012 - 13:41

    Cool ! *O*
    avatar
    Tweety
    FémininAge : 23Messages : 48

    le Mar 6 Nov 2012 - 14:01

    merci pour le code <3
    avatar
    Cocoon
    FémininAge : 24Messages : 49

    le Dim 11 Nov 2012 - 13:32

    Je serais curieuse de voir ça ... merci !
    avatar
    Sara_y
    FémininAge : 26Messages : 81

    le Lun 12 Nov 2012 - 17:19

    Je suis curieuse de voir ça ^^
    Merci Very Happy



    avatar
    Screen
    FémininAge : 25Messages : 92

    le Mer 28 Nov 2012 - 13:37

    moi qui pensais qu'il n'était pas °°
    avatar
    skyfighter
    MasculinAge : 34Messages : 345

    le Mar 4 Déc 2012 - 20:54

    merci





    avatar
    Pandora*
    FémininAge : 18Messages : 33

    le Ven 7 Déc 2012 - 20:38

    Merci du partage =D
    avatar
    allcl
    FémininAge : 17Messages : 76

    le Sam 8 Déc 2012 - 17:05

    merci
    avatar
    Jeckle
    MasculinAge : 27Messages : 18

    le Sam 8 Déc 2012 - 18:47

    Curieux de voir ça !
    Merci :)
    avatar
    CathyCréation
    FémininAge : 37Messages : 207

    le Dim 9 Déc 2012 - 4:25

    txs
    avatar
    bibi0712
    FémininAge : 39Messages : 66

    le Dim 9 Déc 2012 - 18:43

    Cela m'a déjà servi pas mal de fois pour différents codage
    Merci à toi
    avatar
    shala
    FémininAge : 25Messages : 213

    le Mar 11 Déc 2012 - 16:18

    merci



    avatar
    Jaekwang
    MasculinAge : 23Messages : 27

    le Mer 12 Déc 2012 - 2:34

    merci, exactement ce que je cherchais !
    avatar
    liliboom
    FémininAge : 25Messages : 17

    le Mer 12 Déc 2012 - 3:57

    *curieuuuse* merci *_*
    avatar
    Erza
    FémininAge : 21Messages : 63

    le Lun 17 Déc 2012 - 23:15

    Merci o/



    "Un jour je serai la meilleure codeuse
    Je m’entraînerais sans répis
    Je ne serais jamais la Deu'z
    Et je raflerais tous les prix
    Je parcourrai la toile entiere
    Traquant avec espoir
    Le CSS et ses mystères
    Le secret de son pouvoir

    CODEPOWA !
    Je les saurais tous !
    avatar
    Zarwins
    FémininAge : 21Messages : 152

    le Mar 18 Déc 2012 - 4:27

    Merciiii i<3



    avatar
    Lolloe
    FémininAge : 16Messages : 26

    le Mer 19 Déc 2012 - 11:28

    Merci
    avatar
    sédatif
    MasculinAge : 27Messages : 27

    le Sam 22 Déc 2012 - 16:37

    Merci
    avatar
    Minishiro
    FémininAge : 21Messages : 288

    le Sam 22 Déc 2012 - 19:19

    Ça serait bien de spécifier que ça ne fonctionne que sous Chrome. Et puis il es possible de décider de la couleur derrière la barre et de modifier selon si c'est une barre verticale ou horizontale.



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Sam 22 Déc 2012 - 19:26

    J'ai édité le premier message pour le préciser, merci ^^



    avatar
    Lou 77
    FémininAge : 19Messages : 13

    le Mar 1 Jan 2013 - 15:00

    Moi je suis curieuse ^^
    Contenu sponsorisé


      La date/heure actuelle est Jeu 25 Mai 2017 - 22:02