TUTORIEL COMPLET : plusieurs CSS au choix...

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : TUTORIEL COMPLET : plusieurs CSS au choix...

foxcssfox

The design of CSS...

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 :

<?php session_start();
if(!$_GET['color'])
{
$_SESSION['color']="couleur"; //par défaut prendre la CSS appelé //dans le repertoire Couleur et appelé Style.css
}
else
{
$_SESSION['color']=$_GET['color'];
}
?>

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

Code :

<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 :

<div id="choix-des-couleurs">
<div><a href="<?php echo $PHP_SELF ?>?color=bleu">
<img src="cssboutons/bleu.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleuflash">
<img src="cssboutons/bleuflash.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleuocre">
<img src="cssboutons/bleuocre.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleutresclair">
<img src="cssboutons/bleutresclair.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=couleur">
<img src="cssboutons/couleur.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=prune">
<img src="cssboutons/prune.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=vertflash">
<img src="cssboutons/vertflash.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=violet">
<img src="cssboutons/violet.png" alt=""/></a></div>
<p>Cliquez sur une couleur : le site sera peint en un temps record</p>
</div>

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

Code :

<?php session_start();
?>

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

Code :

<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

Publicité

freed102

Arayashiki

foxcssfox a écrit :

Code :

<?php session_start();
if(!$_GET['color'])
{
$_SESSION['color']="couleur"; //par défaut prendre la CSS appelé //dans le repertoire Couleur et appelé Style.css
}
else
{
$_SESSION['color']=$_GET['color'];
}
?>

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

Code :

<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 :

<div id="choix-des-couleurs">
<div><a href="<?php echo $PHP_SELF ?>?color=bleu">
<img src="cssboutons/bleu.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleuflash">
<img src="cssboutons/bleuflash.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleuocre">
<img src="cssboutons/bleuocre.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=bleutresclair">
<img src="cssboutons/bleutresclair.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=couleur">
<img src="cssboutons/couleur.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=prune">
<img src="cssboutons/prune.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=vertflash">
<img src="cssboutons/vertflash.png" alt=""/></a></div>
<div><a href="<?php echo $PHP_SELF ?>?color=violet">
<img src="cssboutons/violet.png" alt=""/></a></div>
<p>Cliquez sur une couleur : le site sera peint en un temps record</p>
</div>

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

Code :

<?php session_start();
?>

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

Code :

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

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

---------------
Freed102

bobe

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

yeffries

Merci beaucoup foxcssfox !

gm_superstar

Appelez-moi Super

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

Profil supprimé

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

gm_superstar

Appelez-moi Super

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 :

if (isset($_POST["selectedStyle"])) {
setcookie(style, $_POST["selectedStyle"]);
header("Location: ." );
}
$defaultStyle = (isset($_COOKIE["style"]) ? $_COOKIE["style"] : "default" );
$css = array();
if ($dir = @opendir("css" )) {
while($file = readdir($dir))
if ($file != "." && $file != ".." )
array_push($css, substr($file, 0, -4));
closedir($dir);
} else {
die("Impossible d'ouvrir le répertoire \"css\" !" );
}

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 :

foreach ($css as $v)
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 :

<form id="style" method="post" action=".">
<div>Choisissez votre style :
<select name="selectedStyle" id="selectedStyle">
<?
foreach ($css as $v)
echo " <option value=\"$v\"" . (strcmp($v, $defaultStyle) == 0 ? " selected=\"selected\"" : "" ) . ">$v</option>\n";
?>
</select>
<input type="submit" value="OK" />
</div>
</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 :

<script type="text/javascript">
<!--
function sendStyle() {
document.forms[0].submit();
}
function load() {
el = document.getElementById("selectedStyle" );
if (el.addEventListener)
el.addEventListener("change", sendStyle, false);
else
el.attachEvent("onchange", sendStyle);
}
//-->
</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

drasche

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)

pascal_

[:drapal]

FORUM HardWare.fr

Programmation

HTML/CSS

TUTORIEL COMPLET : plusieurs CSS au choix...

Sujets relatifs
[PHP] Upload photo + Galerie CSS XHTML [Résolu]	Une CSS au choix en cliquant sur un bouton img....
choix dans une liste et affecter les cellules	petit pb de css surement : page qui s'affiche pas tjs en entier
Verilog, un tutoriel ?	Aide sur les CSS
CSS et PHP : Quel est le probleme ?	CSS : avoir des blocs (DIV) fixes quelques soit la taille de la page
CSS - comment regler probleme de bordure entre FIREFOX et IExplorer 6
Plus de sujets relatifs à : TUTORIEL COMPLET : plusieurs CSS au choix...

Page générée en 0.107 secondes