Doppia skin sul forum, automatico con barra!

<!-- INIZIO FUNZIONI CAMBIO SKIN -->
<script type="text/javascript">

function def() { document.body.className = "bodydef"; document.getElementById('waitbaralt').style.display='none'; document.getElementById('waitbardef').style.display='inline';
localStorage.setItem('skin','def'); }

function alt() { document.body.className = "bodyalt"; document.getElementById('waitbardef').style.display='none'; document.getElementById('waitbaralt').style.display='inline';
localStorage.setItem('skin','alt'); }

if (localStorage.getItem('skin') === null) {
localStorage.setItem('skin','def');
}
else if (localStorage.getItem('skin') === 'def') {
def();
}
else if(localStorage.getItem('skin') == 'alt') {
alt();
}
</script>

<!-- FINE CAMBIO SKIN -->

<!-- INIZIO CAMBIO SKIN CARICATO ALL'AVVIO -->
<script type="text/javascript">
window.onload=function()
{
document.getElementById('progbardef').style.width="100%";
document.getElementById('progbaralt').style.width="100%";

if (localStorage.getItem('skin') === 'def') {
timer1=setTimeout( function() {alt()}, 9000 );
}
else if(localStorage.getItem('skin') == 'alt') {
timer2=setTimeout( function() {def()}, 9000 );
}
document.getElementById('waitbardef').onclick = function() { clearTimeout(timer1); document.getElementById('progbardef').style.width="0"; }

document.getElementById('waitbaralt').onclick = function() { clearTimeout(timer2); document.getElementById('progbaralt').style.width="0"; }

}
</script>
<!-- FINE SKIN AVVIO -->

<!-- WAITBAR -->
<div id="waitbardef" ><div id="progcontainer" ><div id="progbardef">&nbsp;</div></div><h2 onclick="alt();" href=""><img style="float:right; height:70px; margin-top:-70px; margin-right:60px" src="LINK IMMAGINE PER PASSARE ALLA SECONDA SKIN"></h2></div>

<div id="waitbaralt" ><div id="progcontainer" ><div id="progbaralt">&nbsp;</div></div><h2 onclick="def();" href="" ><img style="float:left; height:70px; margin-top:-70px; margin-left:60px; " src="LINK IMMAGINE PER PASSARE ALLA PRIMA SKIN"></h2></div>
<!-- END WAITBAR -->

<br><br>

.bodyalt {background:url(LINK SECONDA IMMAGINE DI SFONDO); -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear}
.bodydef {background:url(LINK PRIMA IMMAGINE DI SFONDO); color: #555; -webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear}

/*PARTE IMPORTANTE: PRESTARE ATTENZIONE */
#waitbardef:after, #waitbaralt:after {content:"coded by ©JackGaunt"; font-size: 7pt; line-height: 90%; color: #666; text-align:left; margin-left: 400px}
#waitbaralt {display:none}
.bodydef #waitbardef {height: 50px; display:inline; background-size: auto 50px}
.bodyalt #waitbardef {display:none !important}
.bodyalt #waitbaralt {display:inline}
.bodydef #waitbaralt {display:none !important}
#waitbardef #progcontainer {border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 5px; background: url('http://i.imgur.com/gNe9B.png');
border-radius: 5px}
#waitbaralt #progcontainer {border: 2px solid rgba(0, 0, 0, 0.75); background:url(http://i.imgur.com/bz6Pf.png); border-radius: 5px}
#waitbaralt div #progbaralt {background: rgba(0, 0, 0, 0.4)}
#waitbardef div #progbardef {background:rgba(255, 255, 255, 0.4)}

#progbaralt, #progbardef {width: 0; margin: 0;
height: 30px;
background: transparent;
transition:width 12s;
-moz-transition:width 12s; /* Firefox 4 */
-webkit-transition:width 12s; /* Safari and Chrome */
-o-transition:width 12s}

#progcontainer {width: 600px}