Bienvenue sur PHP Débutant

Site multi-couleurs

Tuto écrit par Manico, revu en août 2004 par Molokai et Raf

Le but de ce cours est de vous apprendre comment avoir un site en plusieurs couleurs grâce au PHP comme ici sur PHPDébutant.

Principe

Une feuille de style (css) pour chaque couleur.
Un cookie qui garde en mémoire la couleur choisie par le visiteur pour la prochaine visite.
Le logo et les images qui s'accordent bien sûr avec les couleurs comme ici, un logo pour chaque couleur.
Les différents paramètres impossibles à intégrer dans la feuille de style sont dans le fichier PHP inclus en début d'exécution de la page.

Création

1 . Les feuilles de style

Vous devez donc créer autant de feuilles de style qu'il y aura de couleurs pour votre site. En reprenant le principe de PHPDébutant pour cet exercice, le nom de vos feuilles de style sera du style "css_blue.css", "css_red.css"... Ces feuilles de style auront bien sûr toutes le même contenu à l'exception des couleurs des éléments pour votre site.

Feuille de style - Exemple : css_blue.css

/* Barre de défillement (Internet Explorer >= 5.5 uniquement) --- */
BODY
   {
   scrollbar-face-color: #0F648B;
   scrollbar-shadow-color: #000000;
     scrollbar-highlight-color: #FFFFFF;
     scrollbar-3dlight-color: #000000;
     scrollbar-darkshadow-color: #000000;
     scrollbar-track-color: #094865;
     scrollbar-arrow-color: #81C7E7;
   }

/* Style des Liens ------------------------------------ */
A:link    {font-family:verdana; font-size:8pt; text-decoration: none; color: #000000;}
A:visited {font-family:verdana; font-size:8pt; text-decoration: none; color: #000000;}
A:active {font-family:verdana; font-size:8pt; text-decoration: none; color: darkblue;}
A:hover   {font-family:verdana; font-size:8pt; text-decoration: underline; color: blue;}

Vous pouvez insérer autant d'éléments que vous voulez de façon très simple. Par exemple pour les formulaires, les balises TEXT attribut "tx1" : vous insérez sur la feuille de style :

TEXT.tx1 {/* vos attributs de style */}

Dans votre page web votre balise sera du type : <INPUT TYPE="text" CLASS="tx1">.

Pour plus d'informations sur les feuilles de styles css, n'hésitez pas à aller faire un tour dans la rubrique Ressources

2 . Passons maintenant au fichier inclus en début de votre script PHP qui va déterminer les couleurs des éléments non répertoriés sur la feuille de style et également la feuille de style à utiliser.

Ce fichier va comporter en fait plusieurs conditions pour vérifier la valeur du cookie $DESIGN (notez que plus le nombre de couleurs possibles augmente, plus la structure switch est recommandée pour remplacer les if-elseif-else), ce fichier peut porté le nom "design.php".

Code PHP - Exemple : design.php

<?php

// On récupère la variable de contenues dans le cookie
if(isset($_COOKIE['DESIGN'])) $DESIGN=$_COOKIE['DESIGN'];
else $DESIGN="";

if($DESIGN=='blue') // DESIGN BLEU
{
$bordure = '#000000';
$color_titre_menu = '#B1D6E7';
$background = '#003E5B';
}
elseif($DESIGN=='red') // DESIGN ROUGE
{
$bordure = '#F79393';
$color_titre_menu = '#F0AF10';
$background = '#281616';
}
else
{
// les couleurs par défaut (le visiteur n'a pas encore choisi)
$bordure = '#000000';
$color_titre_menu = '#B1D6E7';
$background = '#003E5B';
}

//détermination de la feuille de style et du logo
if($DESIGN!='')
{
$css = 'css_'.$DESIGN;
$logo = 'logo_'.$DESIGN.'.gif';
}
else
{
// la feuille de style et le logo par défaut
$css = 'css_default';
$logo = 'logo_default.gif';
}
?>

Remarques :

La variable $DESIGN n'est pas encore définie tant que le visiteur n'a pas choisi ses couleurs car en fait celle-ci est contenue dans le cookie créé lors du choix.

On n'est pas obligé de séparer la selection de la feuille de style et du logo, ceci peut très bien être intégré aux conditions précédentes, mais dans le cas présenté, les feuilles de styles et les logos ont tous un nom de la même forme (css_couleur et logo_couleur).

3 . Mettons en place les couleurs dans vos pages

Le fichier design.php doit être inclus en tout début de votre page index.php, il faudra un lien vers la feuille de style dans la partie <HEAD></HEAD>, et mettre les attributs que vous avez définis dans design.php en place dans le html (voir exemple ci-dessous)

Notez bien que les feuilles de style permettent de définir beaucoup de paramètres, par exemple,le résultat de l'attribut bgcolor de la balise body utilisé dans l'exemple ci-dessous peut etre obtenu a partir de la ligne adéquate dans une feuille de style. Il est donc très important de bien explorer les possibilité des feuilles de style avant de vous lancer dans l'application de ce que vous aurez appris dans cet exercice pour votre site :)

Remarquez aussi que ce système vous oblige à mettre toute les pages utilisant le système en php, puisqu'il est nécessaire d'utiliser un code php pour insérer les attributs définis dans design.php

Code PHP - Exemple : index.php

<?php
include('design.php'); // On inclut le fichier design.php
?>
<html>
<title>On n'oublie pas son titre</title>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo $css.'.css'; ?>"> 
</head>
<body bgcolor="<?php echo $background; ?>"> 
Votre texte :)
</body>
</html>

4 . Enfin le fichier d'enregistrement du choix dans le cookie "send_design.php".

Code PHP - Exemple : send_design.php

<?php
$expire=365*24*3600; // 1 an
setcookie("DESIGN","$color",time()+$expire); //enregistrement du cookie au nom de DESIGN repris dans design.php

echo "<script language=\"JavaScript\">\n";
echo "alert('Nouveau design sélectionné !\n\nN\'hésitez pas à rafraîchir la page si les couleurs n\'apparaissent pas.');";
echo 'window.location="',getenv('HTTP_REFERER'),'"'; //retour à la dernière page visitée du site avec les nouvelles couleurs
echo "</script>";
?>

Sur votre page d'accueil, les boutons présentant les différentes couleurs auront comme URL de lien : http://www.votresite.com/send_design.php?color=couleur.

Et voilà le cours est fini, vous pouvez désormais créer votre site en plusieurs couleurs pour le plus grand plaisir de tous :-).

Netsliver - Manico