RankSpirit.com. Elle proposée en licence GNU et peut donc être copiée, distribuée et utilisée librement à condition que sa source soit citée.Cette page est issue du site RankSpirit.com. Elle proposée en licence GNU et peut donc être copiée, distribuée et utilisée librement à condition que sa source soit citée.
Cette page est une page exemple destinée à démontrer comment vous pouvez mettre en place sur votre site un "design alternatif" permettant à vos visiteurs de choisir l'aspect général de votre site. Ce type de problème peut être réglé de plusieurs façon et notamment par une fonction javascript. Nous avons préféré l'utilisation de php qui permet d'enregistrer le style choisi par l'internaute dans une variable de cession afin de le conserver pour toutes les pages qu'il visitera par la suite.
Essayez cette fonction en cliquant sur les liens suivants : Design1 - Design2 - Design3
Attention : Cette page de démonstration ne fonctionnera que si vous l'avez copié sur votre serveur. Elle ne fonctionnera pas en local (à partir de votre PC) puisqu'elle comporte du Php.
Le code suivant doit être placé en tête de page, avant même la déclaration de doctype. Attention : pour que ce code puisse fonctionner, la page doit être enregistrée avec le suffixe ".php".
<?php ini_set("url_rewriter.tags","input=src");/* This line allow your pages to be W3C valid!!!! */
session_start();
$CSSStyle = 'alternative-css-styles/layout1.css';/* sets a default CSS file */
if (isset($HTTP_GET_VARS['cssfile'])) {
$CSSStyle = $HTTP_GET_VARS['cssfile'];/* get a CSS file from the URL if any */
$_SESSION['gloadcss'] = $CSSStyle;
}
else
{
if (session_is_registered("gloadcss")) {
if ($_SESSION['gloadcss']) {
$CSSStyle = $_SESSION['gloadcss'];;/* get a CSS file from the session if any */
};
};
};
?>
Ligne 1 : Cette ligne permet d'éviter une erreur de validation assez courant lors de l'utilisation de cession Php. Pour en savoir plus, vous pouvez consulter PeeWiki.
Lignes 3 à 5 : $CSSStyle est la variable dans laquelle nous allons stocker le style à appliquer à la page.
On commence par définir un style par défaut. Dans notre exemple, nous avons décidé d'enregistrer les feuilles de style dans un dossier nommé "alternative-css-styles", mais vous pouvez bien entendu indiquer l'adresse de votre choix.
Si l'internaute décide de changer de style, le nouveau style sera passé en paramètre à la page à l'aide d'une URL du type :
http://www.example.com/example.php?cssfile=alternative-css-styles/layout2.css
Si ce type d'URL a été utilisé pour accéder à la page, le nom du nouveau style sera stocké dans la variable $CSSStyle à la place du style par défaut.
Ligne 6 : La variable $CSSStyle est enregistrée en tant que variable de cession afin d'appliquer le nouveau style à toutes les pages qui seront visitées par la suite.
Ligne 10 à 12 : Si aucun style n'a été précisé dans l'URL, on récupère le contenu de la variable de cession (si elle existe) pour savoir quel style doit être appliqué à cette page.
Le code suivant doit être placé entre les balises <head> et </head> :
<link rel="stylesheet" type="text/css" href="<?php echo $CSSStyle; ?>" title="<?php echo $CSSStyle; ?>" media="screen">
Cette ligne est assez simple : elle va simplement charger en tant que feuille de style le document dont le nom a été stocké dans la variable $CSSStyle.
Pour notre exemple, nous avons créé 3 feuilles de style qui permettent simplement de changer la couleur du fond de page. Mais vous pouvez bien entendu charger des feuilles de style beaucoup plus complexes utilisant toute la puissance des CSS et permettant de changer totalement la présentation de vos pages. Nous avons choisi d'enregistrer ces feuilles de style dans un sous-répertoire baptisé "alternative-css-styles".
Pour donner à l'utilisateur la possibilité de choisir son style, il vous suffit de créer un lien ayant pour cible la page courante et ayant pour paramètre le nom du style à appliquer. Un lien tel que :
<a href="http://www.example.com/example.php?cssfile=alternative-css-styles/layout2.css">Design2</a>
fonctionnera très bien, mais vous préfèrerez sans doute cette formulation :
<a href="<?php echo $_SERVER["PHP_SELF"]. '?cssfile=alternative-css-styles/layout2.css' ?>">Design2</a>
que vous pourrez coller sur toutes vos pages sans avoir besoin de repéter le nom de la page dans le lien !
