dimanche 17 janvier 2016

TRUC: personnalisez les ascenseurs (scrollbars) de votre site ou blog ou d'un iframe

MODIFIÉ (barre horizontale)

Fonctionne sur Blogger et sur un site web classique. Fonctionne avec les navigateurs basés sur Webkit. Ne fonctionne pas sous Firefox (c'est plus compliqué). Pour dimensionner la barre horizontale, il suffit d'ajoutez height: 8px; (ajouté en rouge ci-dessous)
  • Il suffit de copier-coller ce code dans un fichier que vous nommerez scrollbar.css et de l'uploader sur votre serveur ou votre Dropbox. 

body::-webkit-scrollbar 
{
    width: 8px;
    height: 8px;
    background: #333333;
}
body::-webkit-scrollbar-track 
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius:8px;
 background: #777777;
}
body::-webkit-scrollbar-thumb
{
    background-color: #E8B2FD;
    border-radius:8px;
}

  • Récupérez ensuite l'URL.
  • Puis modifiez cette ligne avec votre URL (après "href=")

<link href="http://mon_url/scrollbar.css" rel="stylesheet" media="all" type="text/css"> 

  • Collez la ligne ci-dessus entre les <head> et </head> de votre site
Plusieurs éléments peuvent être modifiés (en bleu), notamment width (largeur de la scrollbar), border-radius (arrondi) et background-color (couleur de la scrollbar). Si vous voulez appliquer ces scrollbars à un iframe, changez "body" par "iframe".

Mes scrollbars ont été modifiées sur ce blog comme vous pouvez le constater.

Exemple pour l'iframe sur mon nouveau site météo (s'ouvre en pop-up mais il est prévu pour fonctionner de préférence en webapp Chrome ou autre):

NBBCmeteo

Une possibilité existe pour tous les navigateurs. Ici: http://jsfiddle.net/aj7bxtjz/1/
Malheureusement, cela semble moins joli et ça ne fonctionne pas bien sur IE.

Aucun commentaire:

Enregistrer un commentaire