-
.
Hai sbagliato il css della seconda skin, precisamente questa parte: CODICE.mback {width: 0; background-image: url(http://www.cantilux.net/uploads1/2584_WedJul061558pm_IF_mbackBLUE.png); background-repeat: no-repeat; background-position: bottom}
Dove hai impostato l'mback con il width a 0. Basterà, appunto, eliminare width: 0; e dovrebbe visualizzarsi correttamente
. -
.
Funziona, grazie mille boy, ti devo un favore 
Un' altra domanda: per cambio di stili posso anche aggiungere del codice html da cambiare o solo la parte "colori e stili"? Grazie di tutto.. -
.
Sì, è possibile, anche se sinceramente sconsiglierei in quanto potrebbe appesantire la pagina se si tratta di un html lungo; ora purtroppo non ho modo di dirti il metodo preciso, in ogni caso basterebbe spostare la funzione della seconda skin dove vuoi far apparire il codice html ed inserirlo dopo il tag </style>, così quando verrà premuto il secondo pulsante verrà mostrato del codice html oltre agli stili . -
.
Una cosa un po' complicatina con me perchè non me ne intendo. Comunque volevo far qualcosa di semplice, infatti volevo solo fare un restyling di colori, il css da cambiare è pochissimo, e l' unica cosa che mi rimane da cambiare è il logo, che però non sta in "Logo", ma ho aggiunto la transizione, quindi sta una parte in colori e stili e l' altra in HTML...
Comunque ti faccio vedere quello che ho sostituito fin' ora, e ti faccio vedere anche l html del logo:
CSS CAMBIATO (Colori e Stili)SPOILER (clicca per visualizzare)CODICE/* BARRE SKIN */
.mback {background-image: url(http://www.cantilux.net/uploads1/347_ThuJul020433pm_IF_mbackGIRL.png); background-repeat: no-repeat; background-position: bottom}
/* TRANSIZIONE LOGO */
.transition {background-image: url(http://www.cantilux.net/uploads1/4391_ThuJul020540pm_Italian Fighters logo_Girl.jpg); width: 850px; height: 280px}
/* BARRA LINK SEZIONI */
.board .bb .web a:link, .board .bb .web a:visited {border-left: 3px solid #FF0066; margin-left: 7; padding: 1px}
/* IMMAGINE DI SFONDO TAG */
.tag .mainbg, .tag .skin_tbl_border {background-image: url('http://www.cantilux.net/uploads1/9637_ThuJul020819pm_Tagboard IF GIRL.jpg'); background-repeat: repeat}
PARTE LOGO HTML:SPOILER (clicca per visualizzare)CODICE<div class="transition">
<a href="http://italianfighters.forumfree.it/"><img src="http://www.cantilux.net/uploads1/5926_WedJul063140pm_Italian%20Fighters%20logoTRANSIZIONE.jpg" /></a>
</div>
. -
.
Ecco a te, per semplificare il tutto ho preso il codice dal tuo forum, ovviamente poi dovrai personalizzarlo come vuoi tu: SPOILER (clicca per visualizzare)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();
logo = "URLDEF";
}
function skin1() {
document.write("<style>.mback {background-image: url(http://www.cantilux.net/uploads1/347_ThuJul020433pm_IF_mbackGIRL.png); background-repeat: no-repeat; background-position: bottom} .transition {background-image: url(http://www.cantilux.net/uploads1/4391_ThuJul020540pm_Italian Fighters logo_Girl.jpg); width: 850px; height: 280px} .board .bb .web a:link, .board .bb .web a:visited {border-left: 3px solid #FF0066; margin-left: 7; padding: 1px} .tag .mainbg, .tag .skin_tbl_border {background-image: url('http://www.cantilux.net/uploads1/9637_ThuJul020819pm_Tagboard IF GIRL.jpg'); background-repeat: repeat}</style>");
logo = "URL1";
}
function skin2() {
document.write("<style>.mback {background-image: url(http://www.cantilux.net/uploads1/1454_ThuJul021444pm_IF_mbackGREEN.png); background-repeat: no-repeat; background-position: bottom} .transition {background-image: url(http://www.cantilux.net/uploads1/8572_ThuJul021535pm_Italian Fighters logo_Green.jpg); width: 850px; height: 280px} .board .bb .web a:link, .board .bb .web a:visited {border-left: 3px solid #6FFF00; margin-left: 7; padding: 1px} .tag .mainbg, .tag .skin_tbl_border {background-image: url('http://www.cantilux.net/uploads1/746_ThuJul021641pm_Tagboard IF GREEN.jpg'); background-repeat: repeat}</style>");
logo = "URL2";
}
function skin3() {
document.write("<style>.mback {background-image: url(http://www.cantilux.net/uploads1/4664_ThuJul021742pm_IF_mbackCYAN.png); background-repeat: no-repeat; background-position: bottom} .transition {background-image: url(http://www.cantilux.net/uploads1/9677_ThuJul021812pm_Italian Fighters logo_Cyan.jpg); width: 850px; height: 280px} .board .bb .web a:link, .board .bb .web a:visited {border-left: 3px solid #00FFE1; margin-left: 7; padding: 1px} .tag .mainbg, .tag .skin_tbl_border {background-image: url('http://www.cantilux.net/uploads1/6197_ThuJul021909pm_Tagboard IF CYAN.jpg'); background-repeat: repeat}</style>");
logo = "URL3";
}
function skin4() {
document.write("<style>.mback {background-image: url(http://www.cantilux.net/uploads1/8058_ThuJul022009pm_IF_mbackBLUE.png); background-repeat: no-repeat; background-position: bottom} .transition {background-image: url(http://www.cantilux.net/uploads1/5659_ThuJul022030pm_Italian Fighters logo_Blue.jpg); width: 850px; height: 280px} .board .bb .web a:link, .board .bb .web a:visited {border-left: 3px solid #0033FF; margin-left: 7; padding: 1px} .tag .mainbg, .tag .skin_tbl_border {background-image: url('http://www.cantilux.net/uploads1/662_ThuJul022117pm_Tagboard IF BLUE.jpg'); background-repeat: repeat}</style>");
logo = "URL4";
}
if (localStorage.getItem('skin') === null) {
localStorage.setItem('skin','def');
}
else if (localStorage.getItem('skin') === 'def') {
null
}
else if(localStorage.getItem("skin") == "skin1") {
skin1();
}
else if(localStorage.getItem("skin") == "skin2") {
skin2();
}
else if(localStorage.getItem("skin") == "skin3") {
skin3();
}
else if(localStorage.getItem("skin") == "skin4") {
skin4();
}
</script>
Come potrai notare, per ogni skin ho aggiunto una parte di codice, per essere precisiCODICElogo = "URL..."
in questa parte dovrai sostituire in contenuto delle virgolette con gli url dei loghi che vuoi mettere ad una certa skin. In questo caso il default dovrà essere l'url del logo attuale. Finita questa parte, dovrai sostituire il codice del logo che mi hai postato prima con questo:CODICE<div class="transition">
<a href="http://italianfighters.forumfree.it/"><script type="text/javascript">document.write("<img src='"+logo+"' /></script></a>
</div>
È abbastanza evidente il funzionamento, in pratica tramite una variabile impostiamo l'url del logo in base, appunto, alla scelta fatta dall'utente per la skin. -
Holden Caulfield.
User deleted
mi servirebbe una mano per inserirlo nel mio forum.. potresti per favore contattarmi in privato? grazie:) . -
The Ancient Angel of River….
User deleted
Scusate, ma se io volessi che la tabellina con le immagini del cambio skin scorresse insieme alla pagina, e che non rimanesse fisso, cosa dovrei modificare? . -
.Scusate, ma se io volessi che la tabellina con le immagini del cambio skin scorresse insieme alla pagina, e che non rimanesse fisso, cosa dovrei modificare?
Le icone seguono lo scroll della pagina già da adesso.. -
Xx_Ultima_Angelo_xX.
User deleted
(Seguo sempre il discorso di Ancient Angel) In realtà no, abbiamo provato a inserirlo in una skin di prova, ma invece che rimanere in fondo alla pagina la tabella, appena sotto la fine del container, resta fissa sullo schermo, e non riusciamo a modificarla. . -
The Ancient Angel of River….
User deleted
Io ancora non ho capito come bisogna fare per non tenerlo fisso sullo schermo... Aiuto <.< . -
.
Se non avete modificato nulla nei css basterà sostituire in colori e stili, all'interno di #switch, cioè il primo pezzo del codice, da position: fixed a position: absolute. Non sapendo la disposizione che hai utilizzato non posso darti informazioni più precise, nel caso non riesci linkami il forum così ti dico cosa sostituire di preciso . -
Xx_Ultima_Angelo_xX.
User deleted
Ci abbiamo provato, ma continua a restare là <.<
Il forum è questo:
Però volevamo metterlo centrato, (non laterale come ora), appena sotto la fine del container.. -
.
Prova in questo modo, in Colori e stili sostituisci: CODICE#switch {background: #000000; border: 1px solid #967645; position: fixed; padding: 5px; bottom: 10px; left: 10px; border-radius: 5px; -moz-border-radius: 5px}
Con:CODICE#switch {background: #000000; border: 1px solid #967645; position: absolute; padding: 5px; border-radius: 5px; margin-top: -25px; left: 50%; margin-left: -20px; -moz-border-radius: 5px}. -
Xx_Ultima_Angelo_xX.
User deleted
Con questo codice sta proprio dove volevamo.
Solo una cosa: è possiibile mettere anche una scritta all' interno della tabellina? All' inizio, del tipo: "Cambia qui la skin, ecc..."? O non è possibile aggiungere altro?. -
.
Sì, è possibile in questo modo: CODICE<div id="switch">
<div><div id="text">Non ti piace questa skin? Prova le varie versioni:</div><a href="" onclick="def();localStorage.setItem('skin','def')"><img src="http://i.imgur.com/hJDLj.png"></a><span>Default Skin</span></div>
<div><a href="" onclick="skin1();localStorage.setItem('skin','skin1')"><img src="http://i.imgur.com/Lwn6L.png"></a><span>Blue Skin</span></div><div><a href="" onclick="skin2();localStorage.setItem('skin','skin2')"><img src="http://i.imgur.com/Saerd.png"></a><span>Purple Skin</span></div></div>
Ora il testo che ho messo è "Non ti piace questa skin? Prova le varie versioni:", ovviamente potrai decidere tu il testo all'interno. Poi, per un corretto allineamento e spaziatura del testo aggiungi in Colori e stili:CODICE#switch #text {line-height: 20px; padding-right: 7px}
Infine, per centrare tutto quanto devi modificare il valore margin-left che trovate in #switch, al momento il valore è -20px, se avete intenzione di lasciare la frase che ho messo ora basterà impostarlo a -140px, così da centrare l'intero box.
Cambio Skin Dinamico |
