[SRC] Style switcher

**Bisûnûrs** · 18/07/2007, 15h02

Je ne sais pas si un style switcher a déjà été proposé, mais je porpose le mien que je viens de créer vite fait :

http://josselin.willette.free.fr/cod...styleswitcher/

L'utilisation de Javascript et non pas d'un langage serveur pour switchter les styles permet d'éviter le rechargement de la page.

J'ai mis en place un système de cookie qui permet de retrouver le style choisi à la prochaine reconnexion (ainsi qu'au rechargement de la page étant donné que rien n'est géré côté serveur

)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/bleu.css" type="text/css" />
<link rel="stylesheet" href="css/rouge.css" type="text/css" />
<!--
Mettre un lien vers toutes les feuilles de style permet de les charger dans
le cache du navigateur et ainsi éviter le clignotement au changement du style.
Seule la dernière balise link sera modifiée par le Javascript, alors ne pas
mettre le main.css en dernier.
-->

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* Récupération du cookie */
var cook = getCookie("style");
 
/* Si un cookie existe on affiche la feuille de style sauvegardée dans le cookie,
   sinon on met une feuille de style par défaut (ici rouge.css) */
if(cook == undefined)
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/rouge.css";
else
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + cook + ".css";
 
function setCookie(name, value, expire){
   var timestamp = new Date(expire);
   document.cookie = name + "=" + escape(value) + "; expires=" + timestamp.toGMTString();
}
 
function getCookie(name){
    var cookies = document.cookie.split(/;/);
 
   for(var i = 0; i < cookies.length; i++){
      var mycook = cookies[i].split(/=/);
      if(mycook[0] == name)
         return unescape(mycook[1]);
   }
}
 
function styleSwitcher(css){
   document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + css + ".css";
 
   /* Création du cookie */
   setCookie("style", css, (new Date(2010, 12).getTime()));
}
 
function setSelected(){
   var options = document.getElementById('style').getElementsByTagName('option');
   var n = options.length;
 
   for(var i = 0; i < n; i++){
      if(options[i].value == cook)
         options[i].selected = true;
   }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<body onload="setSelected()">
 
<div id="main">
   <h1>Mon site</h1>
&nbsp;&nbsp;&nbsp;&nbsp;
   <select onchange="styleSwitcher(this.value)" id="style">
      <option value="rouge">Rouge</option>
      <option value="bleu">Bleu</option>
   </select>
 
</div>
 
</body>

Suggestions ? Améliorations ?

**FremyCompany** · 18/07/2007, 16h26

Moi je suis plutot partisant de ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.green a {
  /* Style pour les liens quand html est green */
}
 
.red a {
  /* Style pour les liens quand html est red */
}

couplé avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function changeStyle(color) {
   /* documentElement == <HTML> */
   document.documentElement.className=color;
}

Mais je reconnais que ton code semble de très bonne qualité !

**Bisûnûrs** · 19/07/2007, 14h51

Ta solution implique une seule feuille de style, ce qui peut être gérable pour les petits sites qui ne proposent que deux choix de couleur, mais vite bordélique si on veut passer à 3, 4 voire 5 couleurs et encore plus un sur gros site.

Après évidemment c'est un choix de programmation comme un autre et je conçois que certains s'y retrouveront mieux avec une seule feuille de style. ^^

**FremyCompany** · 19/07/2007, 16h18

Ben pas du tout, je peux avoir autant de feuille de style que je veux

green.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.green body {
  background-color: green;
  background-image: greenGradient.png;
}

red.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.red body {
  background-color: red;
  background-image: redGradient.png;
}

**Bisûnûrs** · 19/07/2007, 16h44

Ah, oui, je vois ce que tu veux dire.

Tu fais comme moi au début, tu charges toutes les feuilles de style, mais ta méthode a l'avantage de ne pas modifier le lien de la dernière feuille de style et donc permet de les déclarer n'importe comment sans une rigueur définie.

J'aime bien, je regarderai ça.

**Bisûnûrs** · 21/07/2007, 14h58

Hop, voilà j'ai modifié à la manière de FremyCompany.

Ca alourdit un poil les CSS mais ça simplifie énormément le Javascript pour les néophytes.

On peut donc mettre les feuilles de style dans n'importe quel ordre (ne pas oublier de toutes les mettre pour les charger dans le cache du navigateur et ainsi améliorer le switch) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<link rel="stylesheet" href="css/bleu.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/rouge.css" type="text/css" />

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* Récupération du cookie */
var cook = getCookie("style");
 
/* Si un cookie existe on affiche la feuille de style sauvegardée dans le cookie,
   sinon on met une feuille de style par défaut (ici rouge.css) */
if(cook == undefined)
   document.documentElement.className = "rouge";
else
   document.documentElement.className = cook;
 
function setCookie(name, value, expire){
   var timestamp = new Date(expire);
   document.cookie = name + "=" + escape(value) + "; expires=" + timestamp.toGMTString();
}
 
function getCookie(name){
   var cookies = document.cookie.split(/;/);
 
   for(var i = 0; i < cookies.length; i++){
      var mycook = cookies[i].split(/=/);
      if(mycook[0] == name)
         return unescape(mycook[1]);
   }
}
 
function styleSwitcher(css){
   document.documentElement.className = css;
   /* Création du cookie */
   setCookie("style", css, (new Date(2010, 12).getTime()));
}
 
function setSelected(){
   var options = document.getElementById('style').getElementsByTagName('option');
   var n = options.length;
 
   for(var i = 0; i < n; i++){
      if(options[i].value == cook)
      options[i].selected = true;
   }
}

Et donc dans le CSS on a :

rouge.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.rouge body{
   background:#e52c18 url(rouge/fond-rouge.gif) repeat-x;
}
 
.rouge select{
   background:#e52c18;
}
 
.rouge h1{
   color:#e52c18;
   text-align:center;
}

bleu.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.bleu body{
   background:#20b9e5 url(bleu/fond-bleu.gif) repeat-x;
}
 
.bleu select{
   background:#20b9e5;
}
 
.bleu h1{
   color:#20b9e5;
   text-align:center;
}

main.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
select{
   border:1px solid #a7a7a7;
   color:#fff;
   font:normal 11px verdana;
}
 
#main{
   width:600px;
   margin:0 auto;
}

**sambalec** · 07/07/2008, 01h37

Bonsoir tout le monde,

Je cherche désespérément un tuto semblable à celui-ci mais je voudrais juste charger des fichiers css complets différents selon le select mais sans prendre en compte la classe ou autre dans le css. Quelqu'un aurait'il pour moi le code javascript à modifier avec les bon cookies a inclure.

Je m'arrache les cheveux depuis deux jours... Fouine sur la toile et ne trouve rien de bien complet.

Merci de votre aide

Samba

**sambalec** · 09/07/2008, 03h24

Bonsoir merci j'ai trouvé mon bonheur en fouillant un peu plus

**troumad** · 15/07/2008, 21h30

Et bien, donne ta solution

nb : en vacances, loin d'internet, je ne regarde pas les forums

**kunpen** · 30/01/2009, 17h49

Bonjour !

Je viens de trouver ce post après avoir posté le mien et
j'ai un souci d'affichage d'image bannière à 100% de largeur
avec plus ou moins le même script de changement de thème.

Plus de détails ici:
http://www.developpez.net/forums/d68...s/#post3983164

Votre aide serait la bienvenue.

[SRC] Style switcher

Contribuez

Vue hybride

Discussions similaires

Partager

Partager