colori scrollbar

colori scrollbar postato il 30/09/2013 23:24:37 nel forum programmazione, gdrcd, open source, hosting

Salve a tutti.
Apportando modifiche alla scheda del gdrcd 5.2 ho limitato larghezza e altezza dei box background, affetti, etc. facendo in modo che possa comparire una scrollbar quando necessario. Solo che la scrollbar che compare non mi piace, volevo modificarne la larghezza, i colori e altro. Ho trovato un codice online ma non funziona e non capisco perché, visto che se lo utilizzo su un file esterno al gdrcd mi funziona benissimo. Riporto qui il codice del box "affetti" così da farvi vedere quel che ho trovato online:

margin: 10px 3px 5px 3px;
clear: both;
overflow: auto;
height: 60px;
border: solid 1px white;
scrollbar-arrow-color: #FF0000;
scrollbar-base-color: #00FFFF;
scrollbar-dark-shadow-color: #000000;
scrollbar-track-color: #00FF00;
scrollbar-face-color: #0000FF;
scrollbar-shadow-color: #CCCCCC;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3d-light-color: #FF00FF;

quello in grasseto è il codice che ho trovato online per modificare i colori della scrollbar, ma come detto non mi funziona e non capisco perché. Un aiutino per favore?

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

quota

Pagine → 1

overlord

SCRIVI

01/10/2013 00:03:33

Non mi intendo in jQuery, ma si può ottenere anche con JS puro una scrollbar personalizzata, anche in questo caso ti rimando a guide online... solo una domanda... perché?

Appesantire inutilmente per un mero vezzo estetico il codice lato client o usare formattazione non cross browser lo sconsiglio fortemente sempre.

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

quota

john galt

SCRIVI

01/10/2013 00:11:45

Non ho ancora avuto modo di mettere le mani su un GDRCD quindi mi baso sulla semplice applicabilità di una qualsiasi riga di codice jquery o di una classe CSS3.

Qui http://www.ebug.it/manipolare-la-scrollbar-con-i-css3/ ↗ c'è un bel esempio/tutorial in italiano per l'applicazione diretta di classi css3ma solo per chrome e safari.

Qui http://jscrollpane.kelvinluck.com/ ↗ c'è tutto un mondo per sbizzarrirsi su come applicare o modellare le proprie barre a piacimento, certo ci vuole un po' di applicazioni.

Girando nei vari giochi aperti e non ho visto diversi utilizzi delle barre personalizzate e di pacchetti jquery già fatti. Magari ti aiutano più precisamente loro.

Enno eh...

quota

john galt

SCRIVI

01/10/2013 00:21:35

Oro se vuoi cancello il post, magari integri meglio con i richiami migliori per GDRCD che è meglio.

Enno eh...

quota

darkabe

SCRIVI

01/10/2013 00:43:08 e modificato da darkabe il 01/10/2013 00:52:43

ouroboros ha scritto:
Io ho impostato da css anche le scrollbar su Chrome, è Mozilla che non lo consente in alcun modo (ho provato a leggere in merito sul forum di supporto, è una cosa che chiedono da anni ma che non è stata realizzata).

Mi accodo alla versione di ouro. Su chrome è fattibile da css, ma con mozilla non c'è assolutamente verso di modificarla. Per avere qualcosa di cross browser bisogna andare con javascript (o jquery).

Ti lascio la versione per chrome, magari non dovessi spuntarla con js

div::-webkit-scrollbar {
width: 12px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
-webkit-border-radius: 10px;
border-radius: 10px;
}
div::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,1);
-webkit-border-radius: 10px;
border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,.3);
}
div::-webkit-scrollbar-thumb:active {
background-color: rgba(0,0,0,0.4);
}

The Coven ↗
Negli scorci di luce delle paludi della Louisiana fioriscono nuove ombre. Estend e la Congrega ti aspettano per vivere emozionanti avventure!

quota

astro991

SCRIVI

01/10/2013 00:51:37

Grazie mille a tutti, ho risolto con questo codice indicatomi da john galt: http://www.ebug.it/manipolare-la-scrollbar-con-i-css3/ ↗.
Ancora non riesco a capire però il motivo per il quale oggi pomeriggio questo codice non abbia funzionato. Infatti l'avevo usato prima di inserire quello che vi ho inserito nel topic, ma nulla. Forse perché invece di mettere :: mettevo solo :? Non lo so onestamente. Non sapevo infatti che ci volessero due "due punti", per questo ero andato sicuro mettendoli una volta sola.
Grazie ancora a tutti.

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

quota

darkabe

SCRIVI

01/10/2013 00:54:23

uhh hai inviato mentre editavo u.u

Comunque sì, quella andrà solo sui browser con supporto webkit (chrome, e mi pare safari, e forse se mai si convertirà opera)

Raja Dunia ↗
Tra verità divine e menzogne eterne, la tua anima è la chiave. Scopri Raja Dunia, e riscrivi il fato del Continente con armi e magia, fede o eresia.

quota

astro991

SCRIVI

01/10/2013 00:58:47

xD
Poi per farlo funzionare su firefox mi basta modificare "webkit" con "moz" no? quindi ricopiando il codice facendo questa sostituzione dovrebbe funzionare anche su firefox giusto?

Hero Wars ↗
Costruisci la tua squadra di eroi leggendari e domina il campo di battaglia! Strategia, tattica e potenza si scontrano in questo RPG ricco di azione!

quota

astro991

SCRIVI

01/10/2013 01:10:10

ouroboros ha scritto: No, non funziona: puoi modificare quello che vuoi, il problema è Mozilla non te li riconosce proprio quei comandi, non è una questione di nomi.

Ah perfetto -.-"
Grazie per l'informazione, almeno non ci perderò la testa per cercare di capire perché non li prende.