Guida: come avere più CSS [style/grafica] in un solo sito e cambiarlo con un click
Oggi, come sempre, noi di Geekissimo pensiamo atutti gli amici che gestiscono un sito/blog e vogliono abbellirlo in modo originale senza troppe difficoltà. Che ne dite di uno stile grafico CSS intercambiabile con un click? Già, è davvero una bella idea.
Grazie a questa guida potrete creare stili differenti che i vostri visitatori potranno scegliere e switchare a loro piacimento, magari scegliendo un tema sul blu piuttosto che uno verde. Ecco come avere più fogli di stile in un solo sito e dare la possibilità di cambiarli con un click:
Scaricate questo javascript.
Adesso inserite e linkate il file appena scaricato, andando nel vostro file “index.php” ed inserendo quanto segue appena prima del tag /head:
<script type="text/javascript" src="styleswitcher.js"></script>
A questo punto, mettendo come esempio che abbiate un file CSS dal nome “style-orange.css”, createne delle copie e modificatele come più preferite (cambiando colori, layout ecc.).
Ora, tornate nel file “index.php” e, aggiungete quanto segue, appena sotto il codice javascript precedentemente inserito (per il tema principale):
<link rel="stylesheet" type="text/css" href="style.css" title="default" />
Inserite, invece quest’altra linea per tutti gli altri temi aggiuntivi (ogni linea corrisponderà ad uno stile grafico differente):
<link rel="alternate stylesheet" type="text/css" href="style-orange.css" title="orange" />
A questo punto, non vi resta che inserire i link per passare da un tema all’altro nella vostra pagina:
per passare ad un tema aggiuntivo, e
per tornare al tema di default, ricordando che la parte di codice “setActiveStyleSheet(’orange’);” deve rispecchiare il titolo del tema.
Ecco fatto! Adesso avete un sito/blog con grafica intercambiabile e, sia voi che i vostri visitatori vi divertirete di più nel visitarlo.