-
.
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:CODICEdocument.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:CODICEfunction skin1() {
document.write("<style>STILE_DELLA_SECONDA_SKIN</style>");
}
eCODICEelse if(localStorage.getItem("skin") == "skin1") {
skin1();
}
quante volte volete, ovviamente modificando skin1 con un'altro nome, un esempio:CODICEfunction 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:CODICEelse 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è:CODICEfunction 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.
. -
Shanks.
User deleted
Finalmente,bella notizia °<° , non vedo l'ora di vedere un forum con skin dinamica,
Grazie a Lati e a tutto forumfree Magazine che hanno reso possibile questa cosa
. -
.
Ottimo lavoro. Complimenti.
Una funzionalità richiesta da tanto tempo e finalmente è stata realizzata, un'ottima implementazione è stato anche il generatore di codice funzionale, semplice e intuitivo.
Di nuovo i miei più sinceri complimenti
. -
.Aris.
User deleted
Oddio, è stupendo *_* . -
.
Ottimo script, complimenti! . -
.
SEEE! Ci siete riusciti! Siete i migliori!
Aggiungo, è possibile mettere sia skin nuovo layout che vecchio?. -
.
Inanzitutto vi ringrazio per i complimenti, sono contento che lo troviate utile 
In ogni caso sì, funziona su entrambi i layout. -
.
Come bisogna fare? Basta inserire normalmente i css? . -
.
Perfetto ma mi è venuto un dubbio, il codice fornito va ad agire anche sul blocco sezioni e visto che nel vecchio layout il blocco sezioni hanno un ID diverso come può agire anche su quello nuovo?!. -
.
Esattamente, basta inserire i css, che siano del nuovo o vecchio layout non ha importanza, semplicemente quando si effettuerà il cambio gli stili che avete scritto nei vari box andranno a sostituire quelli della skin originale. -
.
E come fa lo script a riconoscere se si tratta di New o Old layout?
Comunque, Lati, bisogna per forza far apparire quel menu oppure si può mettere quel coso che hai messo tu stile vbulletin (menu a scelta)?. -
.
Semplicemente lo script non deve riconoscere nulla, l'unica cosa che fa è inserire un menu in un punto a vostra scelta, memorizzare la scelta fatta dall'utente e, in base a questo, modificare la skin sostituendoli, o per meglio dire, sovrapporli con quelli inseriti da voi. Nel forum di anteprima, ad esempio, gli stili che ho inserito per modificare la skin sono: CODICEbody {background: #CCC} .mback {background: url(http://www.cantilux.net/files7/2199138024.jpg)} .mainbg .aa {background: #FFAEAE}
eCODICEbody {background: #444} .mback {background: url(http://www.cantilux.net/files7/1599872137.jpg)} .mainbg .aa {background: #FAFFAE}
che andranno a sovrapporre gli stili già presenti nel forum.
In ogni caso non ho ben capito cosa intendi del menu stile vBullettin. -
.
Hai presente, quello che hai messo sotto "Inserisci parola chiave"? Comunque, pensavo che il New Layout usasse altre classi, comunque vedrò di provarlo.
Non mi funziona D: Rimane la stessa skin D:. -
.
Linkami il forum dove stai provando lo script, così vedo dov'è l'errore.
In ogni caso se intendi il menu a tendina non ho provato ma credo si possa fare, appena ho tempo faccio una prova. -
.
Ottimo. L'errore è questo: inserendo un codice breve come il tuo, funziona tutto alla meraviglia: mettendone uno più lungo, l'html di tutto il forum, anche quello non dello script, mi si cancella tutto. Se aggiorni il forum, non sembra che si sia resettato perchè rimane tutto invariato, ma se provi ad inserire nelle finestre dell'html un qualsiasi codice, si resetta anche sul forum. .
Cambio Skin Dinamico |
