Changer de feuille de style (css) à la volée

Afin d’ajouter un peu de fun, j’ai voulu permettre à l’utilisateur d’utiliser 2 styles différents pour le site des Voisins du Dessus. Comme le fond du site a des couleurs de ciel, l’idée d’avoir une version pour le jour et une version pour la nuit m’a semblé naturelle.

Les éléments qui changent entre le style « jour » et le style « nuit » ne seront pas nombreux. Il s’agit seulement du fond de la page et de la bannière en haut de page.

Graphisme

Pour le fond de page (le ciel), il suffit d’assombrir les couleurs du dégradé de départ, en vérifiant tout de même à ne pas être trop sombre dans le haut, histoire de voir encore les silhouettes dessinées en noir sur la bannière.

Pour la bannière, j’ai voulu montrer une façade de nuit avec des fenêtres éclairées. j’ai donc assombrit l’ensemble de la bannière, sauf les zones des fenêtres que j’ai éclaircies. Afin d’avoir une touche plus romantique, j’ai rajouté une belle lune dont j’ai forcé le contraste et sur laquelle j’ai rajouté un peu de jaune/orange.

Voici une image qui vous montrent les deux bannières :

La partie CSS

Les images sont insérées dans la page à l’aide des attributs css backround. On utilisera 3 fichiers différents : le fichier style.css qui contient l’ensemble des règles css pour le site, le fichier jour.css qui contiendra les spécifications pour le style diurne, et le fichier nuit.css pour le style nocturne. On pourrait utiliser deux fichiers seulement en recopiant tout le css dans les deux, mais je prefère charger 3 fichiers dont 2 très petits que 2 gros fichiers.

Code du fichier jour.css :

body {
background:#dff1fd
url(images/fond_jour.jpg)
top left repeat-x;}

#head {
background:transparent
url('images/banniere_top_creuse.png')
bottom  center  no-repeat;}

#head #banniere_plein {
background:transparent
url('images/banniere_top_plein.png')
bottom left no-repeat;}

Code du fichier nuit.css :

body {
background:#004fa8
url(images/fond_nuit.jpg)
top left repeat-x;}

#head {
background:transparent
url('images/banniere_top_creuse_nuit.png')
bottom center no-repeat;}

#head #banniere_plein {
background:transparent
url('images/banniere_top_plein_nuit.png')
bottom left no-repeat;}

Passage du jour à la nuit

Pour activer l’une ou l’autre des feuilles de styles, on va utiliser le language javascript.
On ne va pas ré-inventer la roue, vous pouvez trouver un petit script très bien fait pour effectuer cette tâche sur le site A list apart[an]. Une fois le script chargé avec le code

<script type="text/javascript"
src="/scripts/styleswitcher.js">
</script>

à mettre en entête de votre page, il suffit d’écrire des liens contenant l’instruction javascript pour effectuer le changement de feuille de style. Exemple pour activer le mode nuit :

<a href="#"
onclick="setActiveStyleSheet('nuit');
return false;">Nuit</a>

où ‘nuit’ correspond au nom du fichier nuit.css.
 

Ressources

Les ressources utilisées dans ce billet sont :
-le styleswitcher de A list Apart
-une photo de la lune prise par Galileo trouvée sur son blog via une recherche sur Google images

Merci à Galileo de nous avoir autorisé à utiliser sa photo.