Bien que tout soit bien expliqué sur ce site, je vais résumer la façon de mettre en place un changement dynamique de CSS sur son site en me concentrant sur les détails techniques.
Définir ses styles
Tout d’abord, il faut créer les différentes feuilles de style dont on a besoin, choisir laquelle sera utilisée par défaut puis les déclarer toutes dans le head de nos pages.
A cet étape, il y a un choix à faire:
- Soit on souhaite changer complètement l’aspect de son site.
Dans ce premier cas, on crée des feuilles CSS complètement différentes, on déclare le style par défaut comme préféré en définissant son attribut title et les styles alternatifs avec la valeur alternate stylesheet pour l’attribut rel: - Soit on souhaite uniquement modifier certains paramètres de style comme par exemple le jeu de couleurs utilisé.
Dans ce cas-ci, on crée d’abord un style de base et on redéfinit certains de ses paramètres dans les feuilles de style alternatives. Pour déclarer le style de base comme persistant, on ne définira simplement pas l’attribut title:
Importer les fonctions javascript
Une fois cela fait, il suffit de déclarer le script javascript disponible ici.
Attention, il faut le faire après que les styles aient été défini.
Ce script va gérer pour nous le changement de style en modifiant l’attribut rel des déclarations et sauvegarder l’information dans un cookie histoire de ne pas se retrouver avec le style par défaut à chaque changement de page.
Définir ses boutons
Et voila, il ne reste qu’à définir quelque-chose de « cliquable » et d’y appeler la méthode de changement du style courant:
Style par défaut
Style bleu
Style rouge
