[Script JS] Changer de style à la volée

[Roworll]

Un petit truc que j'ai utilisé sur quelques-uns de mes sites permettant de changer le skin du site sans recharger la page.

Les fichiers CSS se trouvent sans les divers tags link du document HTML.
Avec un peu de JS, il est possible de les changer à la volée.

L'exemple qui suit suppose que les css sont organisés par thème.
Ainsi, on aura

theme/defaut/css/general.css
theme/defaut/css/forum.css
theme/defaut/css/map.css

theme/bleu/css/general.css
theme/bleu/css/forum.css
theme/bleu/css/map.css

theme/rouge/css/general.css
etc

Code PHP :

<?php 

<script type="text/javascript">

function switchTheme(newStyle){

    //Récupération des 'links'

    var aLinks = document.getElementsByTagName("link");         

    var oldStyle='';

    

    //Parcours du tableau

    for(var i=0;i<aLinks.length;i++){

        //Test pour voir si c'est une feuille de style

        if(aLinks[i].rel.toLowerCase()=='stylesheet'){

            //oldStyle est une chaine contenant le nom du style précédent

            //Elle est utilisée pour les remplacements et n'est initialisée que si elle est vide

            if(oldStyle==''){

                oldStyle=aLinks[i].href.substr(aLinks[i].href.lastIndexOf('/theme/')+7);

                oldStyle=oldStyle.substring(0,oldStyle.lastIndexOf('/css/'));

            }

            aLinks[i].href=aLinks[i].href.replace('/theme/'+oldStyle+'/css/','/theme/'+newStyle+'/css/');

        }

    }



    //Sauvegarde du nouveau thème dans les préférences du visiteur

    //J'utilise de l'Ajax avec des objets fait maison pour y parvenir

    // Mais chacun employer sa propre méthode

    var _xhr= new HTTPObject();

    _xhr.addArg('site_theme',newStyle);

    _xhr.setLoader(false);

    _xhr.sendMode='POST';

    _xhr.get('./include/tools.php5');

}

</script> 

[Ter Rowan]

c'est bien intéressant ton truc

le système est il compatible pour tous les navigateurs ?

merci en tout cas

[keke]

Hum ... ca existe depuis longtemps il me semble ^^. Mais c'est sympa de partager.

Dans le "style" je sais pas si vous connaissez ce site :
http://www.csszengarden.com/

Le principe est simple : une même page ... et des milliers de style différent.
Attention, ça décoiffe pas mal ! (http://www.csszengarden.com/tr/francais/...css&page=0)

kéké

[Roworll]

le système est il compatible pour tous les navigateurs ?

Testé avec succès sur Safari, IE7, FF3 et Opera 9

Je suis conscient que dans l'exemple donné, c'est purement gadget. J'ai quelques sites ou je me sers de ce système pour customiser le menu, certaines parties du site, etc. Le gros plus (à mon sens) est le changement sans rechargement.

[Ter Rowan]

ouaip, je ne suis pas sur que ce soit purement gadget justement

on peut imaginer :

css pour des versions de langue (quand il y a des images de fond avec du texte)

css pour accessibilité (exemple adapté pour les daltoniens, ...)

css pour les changements de statut du personnage (exemple : abus d'alcool, de drogue ==> css plus "psychadélique", blessure suite à combat ==> css plus "sanguignolent", message urgent reçu via ajax ==> css plus "clignotant" )


donc tant en gameplay qu'en accessibilité au sens large, je trouve ça très bien, et je ne savais pas par où commencer, si jamais, un jour, me prenait l'envie de rendre dynamique le changement de css, donc merci