dimanche 14 avril 2013

Plusieurs feuilles de style différentes

Voici comment permettre a vos visiteurs de choisir parmi différents habillage css pour votre site.

Premièrement il faut avoir différents css qui permettre d'habiller différemment votre site web. Par exemple pour ce site il y a plusieurs css pour chaque couleur d'habillage différent (bleu, orange, mauve, rouge , ...).

Pour ce site j'utilise un CSS global et des css pour chaque couleur d'habillage différent :

  • CSS Global ( http://www.phpascal.com/css/style_global.css)
  • CSS orange : http://www.phpascal.com/css/orange.css
  • CSS mauve http://www.phpascal.com/css/mauve.css
Une fois que vous avez plusieurs css de disponible il vous suffit de permettre aux visiteurs d'en choisir un en particulier.

Il y a plusieurs façon de procédé, une façon est d'utiliser une variable de session pour sauvegarder le choix du visiteur.

Pour ce faire il faut :
  1. Débuter une session au début de chacune des page su site
  2. Avoir une page qui recoie en paramètre le style a changé
  3. Enregistrer le choix du visiteur dans une variable PHP
  4. Avoir un haut de page qui affiche le bon fichier css selon la variable de session
Exemple du traitement pour faire marcher le tout :
Lien pour changer de css : index.php?style=mauve
Code source de l'include du haut des pages :
<?php
/* haut des pages du site */

if (!isset($_SESSION['debuter']))
{
session_start();
$_SESSION['debuter'] = 'oui';
}

// recuperer information et mettre dans variable de session
if (isset($_GET['style'])) $_SESSION['style'] = $_GET['style'];

// mettre dans la variable $style le style choisie et indiquer un style par defaut
if (isset($_SESSION['style'])) $style = $_SESSION['style'];
else $style = "bleu";
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
.....
<link href="http://www.phpascal.com/css/<?php print  $style; ?>.css" media="all" rel="stylesheet" />
....
</head>
<body>
....


Ceci permet d'avoir une feuille de style qui a le nom de la variable envoyer en GET. Exemple : index.php?style=rouge va mettre la feuille de style rouge.css sur le site.

Aucun commentaire:

Enregistrer un commentaire