Geekissimo

Guida: come avere più CSS [style/grafica] in un solo sito e cambiarlo con un click

 
Andrea Guida (@naqern)
17 Agosto 2007
2 commenti

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:

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:

Orange

per passare ad un tema aggiuntivo, e

Default

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.
Categorie: Css, Guide, Internet, Wordpress
Tags: Css,  Guide,  Internet,  Wordpress, 
Potrebbe interessarti anche
Articoli Correlati
Come visualizzare una lista dei post recenti nei blog WordPress anche quando il tema utilizzato non lo permette

Come visualizzare una lista dei post recenti nei blog WordPress anche quando il tema utilizzato non lo permette

Come ribadito in più di un’occasione da queste stesse pagine, uno degli elementi fondamentali di un blog, subito dopo la qualità dei contenuti, è l’aspetto grafico, che deve essere gradevole […]

Come utilizzare lo stile capolettera in blog e siti web

Come utilizzare lo stile capolettera in blog e siti web

Come è noto (e non bisogna certo essere dei geek per saperlo), così come nel resto della nostra società, anche nel mondo del web l’occhio vuole la sua parte. Di […]

Blog WordPress, come utilizzare una home page diversa da quella predefinita

Blog WordPress, come utilizzare una home page diversa da quella predefinita

Da bravi geek avrete sicuramente notato che le home page dei milioni di blog presenti sul web sono quasi tutte impostate nello stesso modo: l’elenco degli articoli più recenti comparsi […]

Blog WordPress, come separare i commenti dai trackback

Blog WordPress, come separare i commenti dai trackback

Ed ecco che anche oggi torniamo a dare una mano a tutti coloro che, per un motivo o l’altro, hanno deciso di aprire un blog utilizzando come piattaforma l’ottimo WordPress […]

72 risorse gratuite “Must Have” per il web-design

72 risorse gratuite “Must Have” per il web-design

Si sa, la vita da web design non è certo la più facile in cui orientarsi per trovare risorse valide. Noi di Geekissimo, come sempre, pensiamo a tutti i nostri […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

  • #1CRG – Maxter

    E in WordPress come si fa ad implementare uno styleswitcher?

    22 Ago 2007, 6:13 pm Rispondi|Quota
  • #2Zanzibar991

    E molto interessamte questa questione, ma io provando non sono affatto riuscito…Innanzi tutto credo che i link debbano essere caricati nel file header.php e non index.php. ma a parte questo, siamo sicuri che lo script funzioni?Rispondete grazie!

    4 Set 2007, 12:24 pm Rispondi|Quota