|
|
| |
Menu posto in basso alla pagina con icone che permette di cambiare la skin dinamicamente, mantenendo memorizzato nel browser la scelta selezionata.
Caratteristiche
- Possibilità di avere più di una skin per il proprio forum da far scegliere all'utente, NON cambiando all'aggiornamento, ma rimanendo fino alla fine della sessione o della cancellazione dei cookie.
- Crea un piccolo menù personalizzabile e posizionabile in qualunque punto della pagina.
- Non vengono utilizzate immagini per la barra di sfondo.
- Design pulito e semplice.
- Creazione di un codice personalizzato tramite generatore.
Anteprima
Un'anteprima dello script lo potete trovare QUI
Installazione
Il codice può essere generato molto semplicemente dal Generatore apposito. In ogni caso, per chi volesse personalizzarlo manualmente, ecco le istruzioni per l'installazione (questo menu di esempio avrà 2 icone, una per la skin di default e una con lo stile modificato):
In Grafica>Codice HTML>Codice HTML che sarà mostrato in CIMA a tutte le pagine:
CODICE <script type="text/javascript"><!--
// ===================================
// Cambio skin dinamico (compatibile con Forumfree)
// Realizzato da _Lati_
// (C) 2012 http://ffmagazine.forumfree.it/
// Versione 1
// =================================== -->
function def() {
document.write();
}
function skin1() {
document.write("<style>STILE_DELLA_SECONDA_SKIN</style>");
}
if (localStorage.getItem('skin') === null) {
localStorage.setItem('skin','def');
}
else if (localStorage.getItem('skin') === 'def') {
null
}
else if(localStorage.getItem("skin") == "skin1") {
skin1();
}
</script>
Il funzionamento di questa parte è abbastanza semplice, in pratica rileva tramite lo Storage (supportato per lo più dai browser più recenti) quale stile applicare al forum/blog; la modifica del codice è altrettanto semplice:
CODICE document.write("<style>STILE_DELLA_SECONDA_SKIN</style>");
Come si può intuire, in questa parte si deciderà che stile applicare al forum una volta premuto un certo bottone che poi vedremo più avanti. Basterà sostituire STILE_DELLA_SECONDA_SKIN con lo stile della skin.
Nel caso volete aggiungere altre skin basterà ripetere questa parte:
CODICE function skin1() {
document.write("<style>STILE_DELLA_SECONDA_SKIN</style>");
}
e
CODICE else if(localStorage.getItem("skin") == "skin1") {
skin1();
}
quante volte volete, ovviamente modificando skin1 con un'altro nome, un esempio:
CODICE function skin1() {
document.write("<style>STILE_DELLA_SECONDA_SKIN</style>");
}
function skin2() {
document.write("<style>STILE_DELLA_TERZA_SKIN</style>");
}
e lo stesso vale anche per il secondo codice:
CODICE else if(localStorage.getItem("skin") == "skin1") {
skin1();
}
else if(localStorage.getItem("skin") == "skin2") {
skin2();
}
Una volta completata questa parte, in Grafica>Codice HTML>Codice HTML che sarà mostrato in CIMA a tutte le pagine o in una sezione a vostra scelta:
CODICE <script type="text/javascript"> if (navigator.appName=="Microsoft Internet Explorer") { document.write('<style>#switch {display: none}<\/style>'); } </script> <div id="switch"> <div><a href="#" onclick="def();localStorage.setItem('skin','def')"><img src="URLIMMAGINE" /></a><span>TESTO</span></div> <div><a href="#" onclick="skin1();localStorage.setItem('skin','skin1')"><img src="URLIMMAGINE"></a><span>TESTO</span></div></div>
Anche in questo caso la modifica è semplice, inanzitutto URLIMMAGINE andrà sostituito con un'immagine (preferibilmente di dimensioni 20x20px, soprattutto se si vuole posizionare il menu al centro della pagina), poi sostituite TESTO con un nome che volete dare alla skin. Nel caso avete inserito più skin, basterà aggiungere quante volte si vuole questa parte:
CODICE <div><a href="#" onclick="skin1();localStorage.setItem('skin','skin1')"><img src="URLIMMAGINE"></a><span>TESTO</span></div>
Come prima, modifichiamo skin1 con altri nomi; in questo caso i nomi dovranno essere identici a quelli che abbiamo impostato prima. Ad esempio:
CODICE <div><a href="#" onclick="skin2();localStorage.setItem('skin','skin2')"><img src="URLIMMAGINE"></a><span>TESTO</span></div>
E, quando verrà premuto, andrà a prendere gli stili da skin2();, cioè:
CODICE function skin2() {
document.write("<style>STILE_DELLA_TERZA_SKIN</style>");
}
Infine, mettere in Grafica>Colori e stili in un punto a vostra scelta:
CODICE /* Cambio skin dinamico */
#switch {background: #ccc; border: 1px solid #aaa; position: fixed; padding: 5px; bottom: 0; right: 0; border-radius: 5px 0 0 0}
#switch div {float: left}
#switch span {text-align: left; position: absolute; background: #EEE; border: 1px solid #AAA; padding: 2px; display: none; bottom: 30px}
#switch div:last-child span {right: 0}
#switch div:hover span {display: block}
#switch img {padding-right: 4px}
#switch div:last-child img {padding-right: 0}
La posizione predefinita è in basso a destra attaccato al margine, consiglio comunque se si vuole posizionare in un'altro punto di utilizzare il generatore apposito.
Passando alla modifica, per modificare il colore di sfondo e il bordo del menu, basterà modificare:
CODICE #switch {background: #ccc; border: 1px solid #aaa; position: fixed; padding: 5px; bottom: 0; right: 0; border-radius: 5px 0 0 0}
Più precisamente, background: #ccc per il colore di sfondo, e border: 1px solid #aaa per il bordo.
Informazioni
Questo script non contiene codici particolari, perciò funziona per la gran parte dei browser (ovviamente i più recenti) tranne Internet Explorer, a cui è stata rimossa la visualizzazione del menu, mentre su Opera lo script funziona, ma la pagina non viene aggiornata automaticamente. Se si utilizza il generatore consiglio di utilizzare icone non più grandi di 20x20px, soprattutto nel caso il menu deve essere centrato nella pagina in quanto il generatore calcola le icone con una dimensione di 20x20px. Appena potrò, comunque, vedrò di aggiornarlo in modo che si basa sulla dimensione dell'immagine e non su una dimensione predefinita. Ultima cosa, consiglio vivamente di non inserire troppi stili in quanto potrebbero pesare alla pagina, perciò rallenterebbe il caricamento.
Crediti
I crediti non sono obbligatori, però in quanto ci abbiamo messo del tempo per creare lo script e per postare questa guida ovviamente ci farebbe piacere avere un minimo di riconoscenza. In ogni caso i crediti nel codice HTML NON vanno rimossi, anche perchè non vi crea alcun fastidio in quanto non vengono visualizzati nella pagina. Per chi volesse, comunque, questi sono i crediti:
CODICE <b>Script "Cambio skin dinamico" realizzato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=3347616">_Lati_</a> per <a href="http://ffmagazine.forumfree.it/">Forumfree Magazine</a> </b> Rilasciato sotto <a href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>
Anteprima:
Script "Cambio skin dinamico" realizzato da _Lati_ per Forumfree Magazine
Rilasciato sotto Licenza Creative Commons 3.0
Licenza
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
|
|
.
