Partagez | 
 

 Personnaliser les scrollbars

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

avatar

JE SUIS.. Invité !
Invité




profil +

MessageSujet: Personnaliser les scrollbars   Sam 17 Nov - 15:45



scrollbars en folie
Marre du truc large, gris et moche ? mettez donc un peu de couleur !

Titre ; Personnaliser les scrollbars sur un forum ou un site
Langages ; CSS uniquement.
Niveau ; Débutant.
Informations ; Via forumactif, il suffit de modifier les couleurs dans le panneau d'administration. Sur Google Chrome & Opéra, le code ci-dessous fonctionne. Sur Mozilla, je n'ai pas encore trouvé comment faire. J'éditerai si j'y parviens un jour, c'est promis.
Aperçu du résultat ;
Je vais vous proposer deux choses. La première, pour modifier toutes les scrollbars de votre forum automatiquement. La seconde, pour modifier la scrollbar d'un endroit en particulier. Comme ça, tout le monde sera satisfait.

Toutes les scrollbars de votre forum ; Pour se faire, direction la feuille de style CSS (Panneau d'administration ► Affichage ► Images & Couleurs ► Couleurs ► Feuille de style CSS). Copiez-collez le code qui suit, n'oubliez pas de valider la feuille :
Code:
/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}

::-webkit-scrollbar-track {
  background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}

::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 /*couleur de l'ascenseur*/;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;}
Pensez à modifier les informations pour que tout vous convienne. Pour conseil, quant à la largeur & la hauteur des scrollbars, choisissez la même, ce sera plus esthétique ;) J'ai ajouté un petit border-radius à la fin, vous pouvez parfaitement le retirer sans que ça ne pose problème, c'est une question de goût là encore.

La scrollbar d'un endroit en particulier ; Ce n'est pas très difficile. Reprenez le code css que je donne ci-dessus et ajoutez-y une class de cette manière :
Code:
/*modifier la scrollbar du div elevator*/
.elevator::-webkit-scrollbar {
  width: 5px; /*largeur de la scrollbar verticale*/
  height: 5px; /*hauteur de la scrollbar horizontale*/
  background-color: #000000;}

.elevator::-webkit-scrollbar-track {
  background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}

.elevator::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
  background-color: #000000 /*couleur de l'ascenseur*/;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;}
Attention ; vérifiez bien que vous gardez les deux fois deux points (::) ! Sinon cela ne fonctionnera pas ;)
Après avoir validé votre feuille de style css, rejoignez l'endroit où vous voulez voir apparaître votre block scrollé (la page d'accueil ou dans vos posts par exemple). Et tout simplement :
Code:
<div class="elevator">votre texte</div>
Je me doute que nos chers administrateurs savent le faire vu nos sublimes scrollbars, ici, sur Heart Art, mais ainsi, tout le monde pourra faire de même o/
Revenir en haut Aller en bas

avatar

JE SUIS.. Sunhae !
THE Queen of Xyon Xyon

THE Queen of Xyon Xyon



profil +

MessageSujet: Re: Personnaliser les scrollbars   Dim 18 Nov - 13:58


Hum comme j'ai fait le même tutoriel c'est un peu inutile non ? ._.



CHAPELIER FOU
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://heartart.forumsgratuits.fr/

avatar

JE SUIS.. Invité !
Invité




profil +

MessageSujet: Re: Personnaliser les scrollbars   Dim 18 Nov - 15:21


Vire-le, si tu veux.
Je trouve le mien plus détaillé que ton code tout fait et je rajoute l'information sur les class pour une scrollbar en particulier mais si le tutoriel gène, ça ne fait rien.
Revenir en haut Aller en bas

avatar

JE SUIS.. Sunhae !
THE Queen of Xyon Xyon

THE Queen of Xyon Xyon



profil +

MessageSujet: Re: Personnaliser les scrollbars   Dim 18 Nov - 15:25


Enfin ce n'est pas a moi de décider x)
Je vais mettre un lien dans mon topic qui va vers ton sujet pour ceux qui souhaite avoir plus d'explications [ou on peut fusionner les deux sujet]
Enfin je sais pas, laissons les Admins et Modo décider x')



CHAPELIER FOU
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://heartart.forumsgratuits.fr/



JE SUIS.. Contenu sponsorisé !





profil +

MessageSujet: Re: Personnaliser les scrollbars   


Revenir en haut Aller en bas
 

Personnaliser les scrollbars

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Heart Art :: Archives Tutoriels :: Codage-