immagin top

12.6.13

Blog deisgn: Come cambiare colore alla scrollbar

12.6.13

Avete notato che la scrollbar ha cambiato colore? lo potete notare anche nel 'textarea' del post precedente




Purtroppo non tutti i browser li visualizzano nel modo corretto, e alcuni non rilevano alcuna modifica, ma se usi Chrome, avrai notato questa piccola novità grafica :)
Ecco come si fa!
Copia e incolla fra gli stili del tuo blog il codice che trovi qui sotto.
body, html {
scrollbar-base-color: #f7cdce;
scrollbar-face-color: #f7cdce;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-dark-shadow-color: #FFFFFF;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
}

::-webkit-scrollbar {
height: 12px;
width: 12px;
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #f7cdce;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-corner {
background: #fff;
}
Il valore che vedi '#FFFFFF' indica il colore bianco, mentre '#f7cdce' indica il colore rosa del mio blog.
Ti basta cambiare il secondo valore con uno dei colori del tuo blog per avere anche tu una scrollbar abbinata al tuo salotto sul web.
Hai trovato interessante questo post? Condividilo!!! :P

22 commenti:

  1. Uff...io uso ubuntu con firefox e purtroppo la scrollbar non la vedo rosa! Però grazie per il mini tutorial, potrà tornarmi utile comunque!

    RispondiElimina
    Risposte
    1. eh sì, non tutti li visualizzano... grazie a te :)

      Elimina
    2. fra l'altro ho notato ora che con firefox non si vedono nemmeno i font corretti per i titoli dei post e del menu in alto... che schifo però :(

      Elimina
    3. Già, anch'io sul mio blog ho perso ore ed ore per mettere alcune cose carine che poi ho scoperto non essere visibili da Explorer o Chrome...
      Comunque il tuo blog è bellissimo ugualmente! ;-)

      Elimina
  2. mi sapresti indicare precisamente dove inserire questa modifica... cioè sotto quale codice . grazie mille

    RispondiElimina
    Risposte
    1. segui il percorso indicato in questo post (per la modifica dell'immagine della lista) e dove indica di inserire il codice, metti quello che hai trovato qui sopra :)

      Elimina
    2. scusa ho dimenticato il link:
      http://sketchyourblog.blogspot.it/2013/05/tiny-tips-list-style-inseriamo.html

      Elimina
  3. Interessantissimo, grazie!!
    Che peccato però che una funzione così carina sia così poco supportata cross-browser. Poi io sono affezionata a Firefox ma ultimamente sta facendo cose strane, giusto ieri non mi prendeva lo spessore corretto di un web font :(
    Mi sa che uno di questi giorni mi passo tutti i bookmark su Chrome e ci "migro" definitivamente.

    RispondiElimina
    Risposte
    1. si guarda, io ero un'affezionatissima di firefox, ma dopo il passaggio a chrome ho potuto solo godere di miglioramenti, anche nella velocità!

      Elimina
  4. Simo cavoli non ho mica capito dove devo andare...
    Non ho mai modificato il codice html!
    Allora: Modello, modifica html e poi????
    Scusaaaaaaa

    RispondiElimina
    Risposte
    1. Ciao Sere! Per arrivare agli stili segui il tutorial a questo link:
      http://sketchyourblog.blogspot.it/2013/05/tiny-tips-list-style-inseriamo.html

      Scusa ma avevo dato per scontato che lo sapeste :)

      Elimina
    2. Incredibile incredibile ce l'ho fatta, grazie Simo!!!!
      Che sudata!!! E' la prima volta che tocco l'html!

      Elimina
  5. Dunque... una domandina per un tuo futuro post:
    Se guardi adesso l'header del mio blog, come colore risulta grigino, nonostante io con photoshop abbia messo lo sfondo trasparente..tu sai come mai?
    E in questo caso puoi insegnarci qualcosa??
    Baci baci e GRAZIE!!!!!!!!

    RispondiElimina
    Risposte
    1. allora io ho avuto questo fastidioso problema un bel po' di tempo fa, anche dicendolo in un post.. all'inizio avevo optato per un altro 'image hosting' ossia photobucket, ma mi è risultato fastidiosissimo... poi ho provato a caricare le foto su un altro mio blog di prova, che aveva poche foto caricate, e venivano bene, senza lo sfondo grigio.
      comunque sarà momentaneo, perchè dopo un po' di giorni è tornato tutto alla normalità :)

      Elimina
  6. ecco... non ho fatto il beckup prima di iniziare una modifica e adesso il risultato è che la versione per cellulare del mio blog è diversa da quella per pc..
    cavolina.. mi puoi aiutare?

    RispondiElimina
    Risposte
    1. ahi ahi, bisogna sempre salvare il template prima di ogni modifica 'devastante'... mi spiace non so proprio, fra l'altro non ho neanche dispositivi mobile per verificare :(

      Elimina
  7. Visto che sto apportando un restyling al mio blog, ho utilizzato questo tuo tuo tutorial. Fa proprio un bell'effetto! Speriamo che presto sia visualizzabile su qualche browser in più.
    Grazie ancora :)

    RispondiElimina
    Risposte
    1. sisi ho visto :)
      purtroppo il codice non funziona con firefox, e con IE si vede, ma amodo suo -.-

      Elimina
  8. Bellissimooo ho la scroll Rosa *O* Graziee

    RispondiElimina