TUTORIEL COMPLET : plusieurs CSS au choix...

TUTORIEL COMPLET : plusieurs CSS au choix... - HTML/CSS - Programmation

Marsh Posté le 12-05-2004 à 15:14:04    

Comme j'ai pas mal galéré pour arrivé au resultat escompté, je vous propose un tutoriel super simple et COMPLET pour faire choisir une CSS à l'internaute, valable pour la consultation de tout le site....
(ps : toutes les pages doivent avoir l'extension .php)
 
1>>> DANS MA PAGE INDEX :
Tout en haut de ma page :  

Code :
  1. <?php session_start();
  3. if(!$_GET['color'])
  4. {
  5. $_SESSION['color']="couleur"; //par défaut prendre la CSS appelé  //dans le repertoire Couleur et appelé Style.css
  6. }
  7. else
  8. {
  9. $_SESSION['color']=$_GET['color'];
  10. }
  12. ?>


 
J'appelle la CSS de la façon suivante :

Code :
  1. <link rel="stylesheet" href="<?php echo "styles/". $color . "/style.css"; ?>"/>


 
 
Puis dans ma page je présente quelques petites images de couleur : en cliquant dessus, l'internaute choisira sa CSS...

Code :
  1. <div id="choix-des-couleurs">
  3. <div><a href="<?php echo $PHP_SELF ?>?color=bleu">
  4. <img src="cssboutons/bleu.png" alt=""/></a></div>
  5. <div><a href="<?php echo $PHP_SELF ?>?color=bleuflash">
  6. <img src="cssboutons/bleuflash.png" alt=""/></a></div>
  7. <div><a href="<?php echo $PHP_SELF ?>?color=bleuocre">
  8. <img src="cssboutons/bleuocre.png" alt=""/></a></div>
  9. <div><a href="<?php echo $PHP_SELF ?>?color=bleutresclair">
  10. <img src="cssboutons/bleutresclair.png" alt=""/></a></div>
  11. <div><a href="<?php echo $PHP_SELF ?>?color=couleur">
  12. <img src="cssboutons/couleur.png" alt=""/></a></div>
  13. <div><a href="<?php echo $PHP_SELF ?>?color=prune">
  14. <img src="cssboutons/prune.png" alt=""/></a></div>
  15. <div><a href="<?php echo $PHP_SELF ?>?color=vertflash">
  16. <img src="cssboutons/vertflash.png" alt=""/></a></div>
  17. <div><a href="<?php echo $PHP_SELF ?>?color=violet">
  18. <img src="cssboutons/violet.png" alt=""/></a></div>
  20. <p>Cliquez sur une couleur : le site sera peint en un temps record</p>
  21. </div>


 
1>>> DANS TOUTES MES AUTRES PAGES :
Mettre ce morceau de code en HAUT de toutes les autres pages de tout le site :

Code :
  1. <?php session_start();
  2. ?>


 
N'oubliez pas non plus de recopier la ligne de code pour aller cherche la CSS selectionnée :

Code :
  1. <link rel="stylesheet" href="<?php echo "styles/". $color . "/style.css"; ?>"/>


 
Rappel : toutes les pages doivent avoir pour extension : .php
 
Voila, je crois que j'ai terminé... SI vous souhaitez l'ameliorer, n'hésitez pas à me faire des propositions, j'espère que les débutants comme moi, arrivenont à la faire...
FOXCSSFOX


---------------
"Nous sommes tous dans le caniveau, mais certains d'entre nous regardent les étoiles" Oscar Wild
Reply

Marsh Posté le 12-05-2004 à 15:14:04   

Reply

Marsh Posté le 12-05-2004 à 15:23:20    

foxcssfox a écrit :

Comme j'ai pas mal galéré pour arrivé au resultat escompté, je vous propose un tutoriel super simple et COMPLET pour faire choisir une CSS à l'internaute, valable pour la consultation de tout le site....
(ps : toutes les pages doivent avoir l'extension .php)
 
1>>> DANS MA PAGE INDEX :
Tout en haut de ma page :  

Code :
  1. <?php session_start();
  3. if(!$_GET['color'])
  4. {
  5. $_SESSION['color']="couleur"; //par défaut prendre la CSS appelé  //dans le repertoire Couleur et appelé Style.css
  6. }
  7. else
  8. {
  9. $_SESSION['color']=$_GET['color'];
  10. }
  12. ?>


 
J'appelle la CSS de la façon suivante :

Code :
  1. <link rel="stylesheet" href="<?php echo "styles/". $color . "/style.css"; ?>"/>


 
 
Puis dans ma page je présente quelques petites images de couleur : en cliquant dessus, l'internaute choisira sa CSS...

Code :
  1. <div id="choix-des-couleurs">
  3. <div><a href="<?php echo $PHP_SELF ?>?color=bleu">
  4. <img src="cssboutons/bleu.png" alt=""/></a></div>
  5. <div><a href="<?php echo $PHP_SELF ?>?color=bleuflash">
  6. <img src="cssboutons/bleuflash.png" alt=""/></a></div>
  7. <div><a href="<?php echo $PHP_SELF ?>?color=bleuocre">
  8. <img src="cssboutons/bleuocre.png" alt=""/></a></div>
  9. <div><a href="<?php echo $PHP_SELF ?>?color=bleutresclair">
  10. <img src="cssboutons/bleutresclair.png" alt=""/></a></div>
  11. <div><a href="<?php echo $PHP_SELF ?>?color=couleur">
  12. <img src="cssboutons/couleur.png" alt=""/></a></div>
  13. <div><a href="<?php echo $PHP_SELF ?>?color=prune">
  14. <img src="cssboutons/prune.png" alt=""/></a></div>
  15. <div><a href="<?php echo $PHP_SELF ?>?color=vertflash">
  16. <img src="cssboutons/vertflash.png" alt=""/></a></div>
  17. <div><a href="<?php echo $PHP_SELF ?>?color=violet">
  18. <img src="cssboutons/violet.png" alt=""/></a></div>
  20. <p>Cliquez sur une couleur : le site sera peint en un temps record</p>
  21. </div>


 
1>>> DANS TOUTES MES AUTRES PAGES :
Mettre ce morceau de code en HAUT de toutes les autres pages de tout le site :

Code :
  1. <?php session_start();
  2. ?>


 
N'oubliez pas non plus de recopier la ligne de code pour aller cherche la CSS selectionnée :

Code :
  1. <link rel="stylesheet" href="<?php echo "styles/". $color . "/style.css"; ?>"/>


 
Rappel : toutes les pages doivent avoir pour extension : .php
 
Voila, je crois que j'ai terminé... SI vous souhaitez l'ameliorer, n'hésitez pas à me faire des propositions, j'espère que les débutants comme moi, arrivenont à la faire...
FOXCSSFOX


 
Mmmmeuuuuh !! c moi qui l'a fait !  :heink:


---------------
Freed102
Reply

Marsh Posté le 12-05-2004 à 18:07:11    

Intégralement géré avec le DOM, c'est mieux:
http://dev.webnaute.net/Applications/Switcher/


Message édité par bobe le 11-07-2004 à 17:38:10
Reply

Marsh Posté le 12-05-2004 à 19:52:12    

Merci beaucoup foxcssfox !

Reply

Marsh Posté le 12-05-2004 à 21:45:15    

Pourquoi passer par les sessions ? Surtout pour n'enregistrer qu'un seul paramètre autant mettre ce paramètre directement dans un cookie.


Message édité par gm_superstar le 12-05-2004 à 21:45:28

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-05-2004 à 21:51:28    

voir dans les preference de l'user si tu a un systeme de membre :)
 
perso si le gars est un  
guest => theme par default
enregistré => $preference->theme
 
ca roule tout seul comme ca
 
et oui GM a raison, un cookie serait plus approprié je pense :)


Message édité par Profil supprimé le 12-05-2004 à 21:52:31
Reply

Marsh Posté le 12-05-2004 à 21:53:13    

Bon sinon je poste la méthode employé pour la FAQ blabla@Prog qui est dans ma signature ( http://djailles.free.fr/hfr/prog/faq/ )
 
Le script se contente de récupérer les fichiers CSS qui sont dans le sous-répertoire css/ et de remplir tout seul le <select> avec les noms des fichiers
 
Si un nouveau style est sélectionné, le nom du style est posté et le cookie est mis à jour (c'est ce qui est fait au tout début).
 

Code :
  1. if (isset($_POST["selectedStyle"])) {
  2.   setcookie(style, $_POST["selectedStyle"]);
  3.   header("Location: ." );
  4. }
  6. $defaultStyle = (isset($_COOKIE["style"]) ? $_COOKIE["style"] : "default" );
  8. $css = array();
  10. if ($dir = @opendir("css" )) {
  11.   while($file = readdir($dir))
  12.     if ($file != "." && $file != ".." )
  13.       array_push($css, substr($file, 0, -4));
  14.   closedir($dir);
  15. } else {
  16.   die("Impossible d'ouvrir le répertoire \"css\" !" );
  17. }


 
Ici on crée l'élément <link> qui va bien pour insérer la feuille de style sélectionnée. Les autres feuilles de styles sont toujours disponibles en feuilles de style alternatives :
 

Code :
  1. foreach ($css as $v)
  2.   echo "    <link rel=\"" . (strcmp($v, $defaultStyle) == 0 ? "" : "alternate " ) . "stylesheet\" type=\"text/css\" href=\"css/$v.css\" media=\"screen\" title=\"$v\" />\n";


 
Le formulaire avec son <select> :
 

Code :
  1. <form id="style" method="post" action=".">
  2.         <div>Choisissez votre style :
  3.           <select name="selectedStyle" id="selectedStyle">
  4. <?
  5. foreach ($css as $v)
  6.   echo "            <option value=\"$v\"" . (strcmp($v, $defaultStyle) == 0 ? " selected=\"selected\"" : "" ) . ">$v</option>\n";
  7. ?>         
  8.           </select>
  9.           <input type="submit" value="OK" />
  10.         </div>
  11.       </form>


 
 
Et en bonus le JavaScript pour poster le formulaire dès qu'on change de style avec le <select> (pour pas avoir à appuyer sur OK)
 

Code :
  1. <script type="text/javascript">
  2.     <!--
  3.    
  4.     function sendStyle() {
  5.       document.forms[0].submit();
  6.     }
  7.    
  8.     function load() {
  9.       el = document.getElementById("selectedStyle" );
  10.      
  11.       if (el.addEventListener)
  12.         el.addEventListener("change", sendStyle, false);
  13.       else
  14.         el.attachEvent("onchange", sendStyle);
  15.     }
  16.    
  17.     //-->
  18.     </script>


Message édité par gm_superstar le 12-05-2004 à 21:56:11

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 12-05-2004 à 22:19:52    

que voilà un sujet bien intéressant [:blueflag]
ça m'intéresse pour mon forum :ange:


---------------
Whichever format the fan may want to listen is fine with us – vinyl, wax cylinders, shellac, 8-track, iPod, cloud storage, cranial implants – just as long as it’s loud and rockin' (Billy Gibbons, ZZ Top)
Reply

Marsh Posté le 12-05-2004 à 22:50:12    

[:drapal]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed