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 : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.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


    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 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 Beshup17
    Saphira
    Saphira
    FémininAge : 27Messages : 72

    Dim 8 Juil 2012 - 17:47

    Je suis curieuse de voir a quoi cela ressemble =)
    Merci !
    Sandra2912
    Sandra2912
    FémininAge : 45Messages : 23

    Dim 8 Juil 2012 - 18:48

    merci
    Okoia
    Okoia
    FémininAge : 30Messages : 30

    Lun 9 Juil 2012 - 19:40

    Merci
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Lun 9 Juil 2012 - 20:01

    Merci beaucouuuup ! Very Happy



    Glycérine
    Glycérine
    FémininAge : 35Messages : 308

    Mar 10 Juil 2012 - 9:19

    * Curieuse * Merci.




    Nell-chan
    Nell-chan
    FémininAge : 31Messages : 12

    Jeu 19 Juil 2012 - 19:21

    Oh je veux voir ça *0* Merci pour le code
    starks*
    starks*
    MasculinAge : 30Messages : 13

    Ven 20 Juil 2012 - 3:42

    Merci :)




    ShuwaPon
    ShuwaPon
    FémininAge : 29Messages : 80

    Ven 20 Juil 2012 - 18:08

    Merci! :)
    titou9322
    titou9322
    MasculinAge : 28Messages : 158

    Dim 22 Juil 2012 - 0:26

    merci
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Dim 22 Juil 2012 - 16:30

    merci



    ....
    Igorette.
    Igorette.
    FémininAge : 27Messages : 44

    Mar 24 Juil 2012 - 2:19

    Curieuse de voir ! & merci d'avance Razz
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 24 Juil 2012 - 9:32

    Merci pour ce partage !
    Si je peux me permettre de préciser une chose : malheureusement cette astuce ne fonctionnera pas sous Firefox...



    sign
    Nunuelle
    Nunuelle
    FémininAge : 24Messages : 28

    Mar 7 Aoû 2012 - 23:17

    merci
    Guantanamo
    Guantanamo
    MasculinAge : 31Messages : 12

    Jeu 9 Aoû 2012 - 4:13

    Pourquoi pas ^^ merci.
    Maï-li
    Maï-li
    FémininAge : 32Messages : 30

    Jeu 9 Aoû 2012 - 21:15

    mercii ^^
    Nyan-cat
    Nyan-cat
    FémininAge : 25Messages : 326

    Sam 11 Aoû 2012 - 10:24

    merci =3



    Modifier la mise en page des Scrollbars de son forum Nyan_cat_in_portals_by_ds_dna-d56j8yb
    McIntosh
    McIntosh
    FémininAge : 34Messages : 27

    Sam 11 Aoû 2012 - 10:41

    Je suis curieuse de voir °° Merci en tout cas /o/
    Ersatz.
    Ersatz.
    MasculinAge : 30Messages : 26

    Sam 11 Aoû 2012 - 13:09

    Merci pour le partage ^^!
    Kimchi
    Kimchi
    FémininAge : 27Messages : 22

    Dim 12 Aoû 2012 - 0:41

    Cool, merci ! Very Happy



    Modifier la mise en page des Scrollbars de son forum 1390754963-jinx
    luangue
    luangue
    MasculinAge : 35Messages : 34

    Mer 15 Aoû 2012 - 21:32

    merci



    Modifier la mise en page des Scrollbars de son forum Bglulu10
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 31Messages : 76

    Dim 19 Aoû 2012 - 14:39

    merci pour l'astuce



    Modifier la mise en page des Scrollbars de son forum Bannol1xj5
    Kai Turindo
    Kai Turindo
    MasculinAge : 23Messages : 80

    Lun 20 Aoû 2012 - 0:53

    merci, et depuis le temps que j'attend ce tuto' ^^
    Illiana
    Illiana
    FémininAge : 27Messages : 98

    Mar 21 Aoû 2012 - 20:32

    Oh, ça m'intéresse ! Merci ;3



    Modifier la mise en page des Scrollbars de son forum 2z7g2dv
    yhaa
    yhaa
    FémininAge : 27Messages : 15

    Jeu 23 Aoû 2012 - 14:41

    ça a l'air sympa :DD Meerci beaucoup :DD
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:10