wordpress scroll bar No plugin solo codice ccs . Semplice metodo per aggiungere una barra di scorrimento a un blocco di wordpress.
Attenzione: il metodo e stato testato e funziona in particolare per il blocco “codice” vedi immagine di sotto:
Un esempio del risultato finale che si ottiene applicando questo metodo. Compatibile con i dispositivi mobile.
codice di programmazione ... codice di programmazione...codice di programmazione.... codice di programmazione...Step 1
Sulla scremata principale di wordpress menu a sinistra cliccare su : Aspetto –> Personalizza si apre l’interfaccia di personalizzazione del thema del sito
Step 2
Appare sempre a sinistra il menu di personalizzazione, scorrere in fondo al meno e cliccare: CSS aggiuntivo si apre l’interfaccia dove poter inserire il codeice
Step 3
Sul interfaccia dove ti chiede il codice CSS da inserire aggiungi il codice che segue poi fare click sul pulsante pubblica :
.scroll code {
white-space: pre;
overflow-x: scroll;
}
Sep 4
Hai fatto … ora devi solo attivarlo la dove ti interessa quindi. Quando si crea un novo articolo aggiungi il blocco “codice “ e personalizzalo come segue:
Quindi : Selezionare il blocco —> su menu a destra click su voce Blocco –> andare sul menu a tendina Avanzate —–> Scrivere su “CLASSE/I CSS AGGIUNTIVA/E” il codice scroll cosi facendo lo attivi sul blocco selezionato.
Facile è funzionale ma…. rimanendo in tema ” wordpress scroll bar”
Se cerchi di più puoi personalizzare i colori della barra aggiungendo del altro codice quindi si deve ritornare nello step 3 e scrivere il codice come segue:
(Nota qui andrai a personalizzare i colori della barra di scorrimento di tutto il sito. Vedi tu al max cancelli il codice e ritorna come prima )
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #b7ea92;
border:1px solid #ccc;
}
::-webkit-scrollbar-thumb {
background: #5ed608;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
::-webkit-scrollbar-thumb:hover {
background: green;
}
.scroll code {
white-space: pre;
overflow-x: scroll;
}
Sperimenta con i colori è miracomando … Divertiti…