18041 sujets

Questions générales et questions de débutants

[Résolu]Tuto: Faire un Style switcher (changement d'habillage) en PHP

Bonjour,

Cela fait bien longtemps que je ne suis pas venue sur ce forum, et même si j'ai fait quelques progrès, je connais encore très mal PHP et je n'arrive pas à mettre en application le tuto pour changer de style en PHP.

Je sais le faire en javascript, mais tous les navigateurs ne supportant pas ce langage (ou certains utilisateurs l'ayant désactivé), j'aimerais savoir utiliser la méthode en PHP.

J'ai suivi ce qui était indiqué, mais j'ai plusieurs questions (très très basiques Smiley sweatdrop ) :

1. Faut-il conserver dans la balise <head> les <link rel="stylesheet" ...> et <link rel="alternate stylesheet"...> ?

2. Quelles sont les informations qu'il faut changer dans le tuto pour le personnaliser, ou plus présicément, à quel endroit doit-on indiquer l'adresse de nos feuilles de style ? (j'ai honte de ma question... Désolée... Smiley confused ).

3. Je vois où se place le script dans la partie xHTML, j'ai cru comprendre qu'il fallait mettre le script PHP à proprement parler au tout début de la balise <head>, mais où dois-je placer le petit bout de code pour faire appel à la feuille de style ? Toujours dans <head> je suppose, mais où ? En remplacement des balises habituelles (cf. question 1) ou en plus, ou après la balise <body> ?...

J'espère que vous saurez m'aider... Je vous assure qu'en général, quand on m'explique en détail, je comprend...

Merci par avance à qui voudra bien prendre le temps de comprendre ce qui cloche... Smiley ravi J'espère un jour pouvoir être en mesure de répondre sur ce forum plutôt que de toujours poser des questions... Smiley ohwell
Modifié par Armony (08 Mar 2007 - 10:07)
Salut,

a écrit :
2. Quelles sont les informations qu'il faut changer dans le tuto pour le personnaliser, ou plus présicément, à quel endroit doit-on indiquer l'adresse de nos feuilles de style ? (j'ai honte de ma question... Désolée... confused ).

C'est une réponse que j'aimerai avoir aussi, je me suis posé la question il y'a quelques mois déja, et j'avais demandé sur le forum, mais rien de ce qui ne m'avait été donné n'avait fonctionné. Par contre si tu suis précisément le tuto à la lettre, sans chercher à changer dans le code ce qu'il n'est pas spécifié de changer, il devrait fonctionner.
Pour ma part, le système d'avoir tous les répertoires de la feuille de style à la racine du site me dérange, et j'aimerai pouvoir regrouper tous mes design et leur feuilles de styles dans un sous répertoire.
J'attends donc avec toi une réponse à cette question, que tu as formulé bien plus clairement que moi !

Pour ta question 1 et 3, il ne suffit que d'avoir ce petit bout de code:
<?php
echo "		<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"".$css."/style.css\" />\n" ;
?>

entre tes balises <head> et le style switcher se chargera de remplacer la valeur $css par le nom du répertoire défini par le style choisi.
Il n'est donc pas nécessaire d'avoir d'autres appels de feuilles de style sauf bien évidemment pour d'autres médias.
Bonjour Armony et bienvenue sur le forum, Smiley smile

le tutoriel a écrit :
C'est en fait une liste à choix que l'on valide. Les valeurs de value ont été choisies arbitrairement, vous devrez créer un dossier par style portant le nom correspondant à la valeur de l'attribut value et nommer le fichier css, style.css (vous pouvez bien sûr changer selon vos préférences, mais pensez alors à changer le script PHP (que nous verrons juste après). (La valeur de value correspond en fait au nom du dossier contenant le fichier de style.)


Il faut donc créer autant de dossiers que de styles, chaque dossier (style1, style2, etc) contient une feuille de style nommée : style.css (chaque dossier se trouve à la racine du site, mais il est possible de le modifier)

Il suffit alors de modifier le formulaire proposé, en changeant les valeurs de l'attribut "value" de la balise "option", en indiquant le nom du dossier correspondant, ainsi que le nom que l'on veut voir afficher :

<select name="style">
				<option value="style1" selected="selected">Le style 1</option>
				<option value="style2">Le style 2</option>

				
			</select>


Est-ce plus clair ?
Modifié par Vero (06 Mar 2007 - 14:31)
Hello,

Mikachu a écrit :

Il n'est donc pas nécessaire d'avoir d'autres appels de feuilles de style sauf bien évidemment pour d'autres médias.


Conservez les appels de feuilles de styles alternatives. Ils sont nécessaires lorsque la page est consultée hors ligne. Et restent le mécanisme "normal" de styles alternatifs, dont les implémentations ne sont pas dépréciées, et dont le style switcher n'est qu'un pis-aller Smiley cligne
Modifié par Laurent Denis (06 Mar 2007 - 14:44)
Merci beaucoup pour toutes ces explications ! Smiley biggrin Je suis en train d'essayer de les appliquer, sans succès pour l'instant.

La précision de Véro touche un point auquel je n'avais pas suffisamment prêté attention : il faut donc créer des DOSSIERS et non pas des fichiers... Dont acte ! Problème : où suis-je censée les mettre ?... Smiley sweatdrop Oui, je sais, encore une question bête...

Voici le contexte :
J'ai acheté très récemment un hébergement et un nom de domaine chez OVH, j'ai laissé une page en index.html à la racine du site et j'ai installé divers CMS (spip, dotclear, wordpress, phpbb, wikini...) pour pouvoir les tester. Je pense que je vais opter pour le francophone et très respectueux des standards Dotclear pour transférer mon blog actuellement hébergé sur Canalblog.

- J'ai essayé de mettre les dossiers contenant les styles à la racine du site /www/ sans succès.
- Ensuite, je les ai mis dans le dossier themes de Dotclear /www/dotclear/themes/ , ça n'a pas marché non plus.
- Enfin, je les ai placés dans le dossier de Dotclear /www/dotclear/ et là, au moins s'est-il passé quelque chose : un avertissement : "Warning: Cannot modify header information - headers already sent by (output started at /home.8/a/d/m/admad/www/dotclear/index.php:50) in /home.8/a/d/m/admad/www/dotclear/themes/pssg/template.php on line 38"...
--> Pour info, "pssg" est un dossier que j'ai créé pour personnaliser l'apparence du blog, en touchant notamment aux fichiers style.css, layout.css, layout-gauche.css et template.php.

Voilà, j'espère que j'ai été assez claire pour vous permettre de me renseigner...

Une question au sujet de la réponse de Laurent Denis (répondant à Mikachu) :
Je comprends ce que tu veux dire, mais je pensais que le script en PHP devait permettre de ne pas charger toutes les feuilles de style au lancement et de rendre le chargement de la page plus fluide... Non ? Dans mon cas, je veux installer ce script pour pouvoir proposer aux visiteurs un mode texte (dans lequelle j'aurai attaché une feuille de style vierge, à destination notamment des personnes aveugles ou mal voyantes utilisant un appareil de lecture de texte) et un mode haut contraste (pour les personnes souffrant de daltonisme). Le "switch" a donc son importance et n'est donc pas un pis-aller...
Quelqu'un peut-il me dire la meilleure attitude à adopter dans ce cas ?

Merci beaucoup à vous tous en tous cas pour toutes vos savantes réponses !!! Smiley cligne En espérant que je ne vous découragerai pas de continuer à me répondre... Smiley langue
Armony a écrit :

Je comprends ce que tu veux dire, mais je pensais que le script en PHP devait permettre de ne pas charger toutes les feuilles de style au lancement et de rendre le chargement de la page plus fluide... Non ?


Les liens <link> vers les styles alternatifs sont totalement indépendants du style switcher PHP. Il s'agit de conserver le mécanisme "normal" (qui sera utile hors connexion) à côté du style switcher. Les quelques octets des feuilles de styles ne sont pas un problème.

Armony a écrit :
Le "switch" a donc son importance et n'est donc pas un pis-aller...


"pis-aller" visait le fait que les styles switchers sont une solution de remplacement (lourde) du mécanisme normal des styles alternatifs (basé sur les seuls éléments <link>).

Cela dit, les styles alternatifs "gros contraste" et "texte" ne sont pas des solutions d'accessibilité, mais plutôt des éléments de confort pour un nombre réduit d'utilisateurs (et généralement pas le public que tu cherches à viser). Voire un gadget, à vrai dire...
Modifié par Laurent Denis (06 Mar 2007 - 15:34)
Armony a écrit :
un mode texte (dans lequelle j'aurai attaché une feuille de style vierge, à destination notamment des personnes aveugles ou mal voyantes utilisant un appareil de lecture de texte)


je n'avais pas bien lu, je complète: il est totalement inutile d'attacher une CSS vierge visant les lecteurs d'écran.
Merci pour tes explications, Laurent Denis... En fait, je me suis basée sur le site de la ville de Cholet citée en exemple dans un reportage et j'ai vu qu'ils avaient attaché une feuille de style vierge dans leur mode texte... Smiley confus

Puisque ce n'est qu'un gadget, pourrais-tu m'indiquer la meilleure technique selon toi pour arriver au même résultat (en dehors des navigateurs tels que Firefox qui permettent la désactivation des feuilles de style) ?

Autrement dit, comment appeler une feuille de style dans le fichier xHTML sans passer par un script PHP ou JavaScript (par le biais d'un lien par exemple) ?

Si une telle technique est plus simple, autant utiliser celle-là. Mais j'aimerais dans tous les cas comprendre pourquoi je n'arrive pas à mettre en pratique le tutoriel... Smiley ohwell
a écrit :

Puisque ce n'est qu'un gadget, pourrais-tu m'indiquer la meilleure technique selon toi pour arriver au même résultat (en dehors des navigateurs tels que Firefox qui permettent la désactivation des feuilles de style) ?


Il n'est pas nécessaire ni particulièrement utile de faire quoi que ce soit. Ce qui est en revanche indispensable, c'est de suivre les directives d'accessibilité WCAG (via une méthode d'application, comme accessiweb actuellement par exemple). Sur cette base, ce sont les aides techniques (lecteurs, loupes, etc), les navigateurs et leurs utilisateurs qui assumeront leurs besoins spécifiques, en leur permettant d'adapter la présentation/le mode de rendu à leurs besoins.
Dans le tuto proposé, les dossiers sont censés être à la racine du site.

J'ai essayé d'adapter un peu le script pour choisir le chemin dans lequel se trouvent les répertoires, je te le propose.

Dans le code suivant, la variable $racine indique que les répertoires sont consignés dans un répertoire style, à la racine.
Cette variable peut-être modifiée par tes soins.



<?php

// Définir l'emplacement des dossiers

$racine = "./style/";



if(isset($_POST['change_style']))

// On vérifie que le formulaire a été soumis

{

	if(file_exists($racine.$_POST['style']."/style.css"))

	{

		// On fait un cookie d'une année de durée pour garder en mémoire le style choisi et le récupérer à la prochaine visite



		setcookie('style', $_POST['style'], time()+(365*24*3600)) ;

		// Si le fichier *.css existe on définit une variable $css correspondant au style choisi

		$css = $_POST['style'] ;

	}

}

elseif(isset($_COOKIE['style']))

// Si le formulaire n'a pas été soumis, on vérifie si le cookie style existe et si tel est le cas on définit une variable $css correspondant à ce style

{

	$css = $_COOKIE['style'] ;

}

else

// Si le cookie n'existe pas et que le formulaire n'a pas été soumis, on définit une variable $css correspondant au style par défaut, ici un_style.css par exemple

{

	$css = "defaut" ;

}

?>


Ensuite, il te faut faire l'appel de la feuille de style.

Deux méthodes :

Par import :


<?php

echo "	<style type=\"text/css\" media=\"screen\">\n" ;

echo "		@import url(".$racine.$css."/style.css) ;\n" ;

echo "	</style>\n" ;

?>


ou par link :



<?php

echo "		<link rel=\"stylesheet\" type=\"text/css\" media=\"screen\" href=\"".$racine.$css."/style.css\" />\n" ;

?>


Si je ne m'abuse, on sera obligé d'utiliser php, puisque les chemins sont des variables du script.
Mais ce n'est pas un problème.

La vrai question : quel méthode choisir pour appeler la feuille de style ?

Des réponses

Enfin, pour essayer d'apporter un semblant d'explication dans la nuance entre les feuilles de style alternatives et le styleswitcher, je dirais que ce dernier permet de changer la feuille de style à travers un média (en l'occurence, le media screen dans le tuto proposé).

Ceci étant, si tu souhaites utiliser un cms ou Dotclear, je te conseille d'utiliser un style switcher intégré.

Voir le plugin "Selecteur de Thème" dans la liste des plugins Dotclear


Smiley cligne
Vero a écrit :
Enfin, pour essayer d'apporter un semblant d'explication dans la nuance entre les feuilles de style alternatives et le styleswitcher, je dirais que ce dernier permet de changer la feuille de style à travers un média (en l'occurence, le media screen dans le tuto proposé).


Bien tenté, Vero. Mais, pour la petite histoire (puisque leur implémentation se réduit à peau de chagrin), les styles alternatifs peuvent être déployés par media Smiley cligne

(La manipulation est amusante, d'ailleurs).
Modifié par Laurent Denis (06 Mar 2007 - 16:47)
Merci beaucoup Véro, je vais essayer. A vrai dire, j'ai fait un tour sur ton blog (super joli !), et c'est exactement le résultat que je veux obtenir pour donner le choix du style, c'est-à-dire simplement, sans menu déroulant. As-tu utilisé la méthode en PHP ? Comme tu es sur Dotclear, as-tu utilisé un plug-in ou as-tu écrit le script toi-même ?

Quant à Laurent Denis, je me demandais ce qui pouvait t'amener à autant de mépris pour ce "gadget" ? C'est vrai que le changement de style peut se faire par le navigateur, mais beaucoup de gens que je connais ignorent cette fonction, et il me paraît beaucoup plus simple de proposer cette fonction par le biais d'un lien. Y a-t-il une raison particulière pour que tu rejettes cette méthode ou est-ce une simple question de goût ?... Je ne cherche pas du tout à polymiquer, juste à comprendre quels sont les enjeux du choix entre css alterné et le changement de style en PHP...

Dans tous les cas, merci à tous les deux pour vos réponses ! Smiley biggrin
Laurent Denis a écrit :


Bien tenté, Vero. Mais, pour la petite histoire (puisque leur implémentation se réduit à peau de chagrin), les styles alternatifs peuvent être déployés par media Smiley cligne

(La manipulation est amusante, d'ailleurs).


Je voulais juste aider Armony a retrouver ses petits dans l'ensemble des notions abordées ici, dans un but plus "pédagogique" que technique.

A chaque jour suffit sa peine !
Smiley biggrin

Et en le disant ainsi :

Le style switcher est un gadget permettant d'offrir à l'internaute, via l'interface du site, un moyen de changer d'habillage.

C'est mieux ?

Mais puisqu'on en parle, comment cela se présente t-il, en utilisant les styles alternatifs déployées par média (pour l'utilisateur) ?
Je viens d'aller sur le blog-and-blues de Laurent Denis et j'ai trouvé un article où tu développes ton point de vue :

a écrit :
Comme toute autre compensation côté auteur d'une insuffisance côté navigateur, ces style switchers ne devrait en fait pas avoir leur place dans le document HTML (dont ils contribuent à alourdir l'interface). A chacun de se déterminer en la matière et de faire son choix d'apporter ou non cette béquille discutable aux navigateurs actuels. Mais l'essentiel est, quelque-soit votre choix sur ce point, de ne pas recourir à une solution interdisant aux navigateurs tels Firefox et Opera d'utiliser les mécanismes normaux de styles alternatifs décrits ici : dans tous les cas, on veillera à utiliser ceux-ci en complément des styles-switchers.


Mais outre le problème des navigateurs, résolu avec la mise à jour sous FF ou IE7, reste le problème des internautes eux-mêmes, ne sachant pas forcément utiliser leur navigateur. Le choix du style, a fortiori quand il s'agit de laisser le choix entre plusieurs designs pour un meilleur confort visuel, ajoute tout de même à mon sens une touche de convivalité... Et tant que ça n'entrave pas la bonne conformité du site aux standards web, quand bien même ce serait un gadget, je ne vois pas pourquoi s'en priver... A moins que j'aie raté un argument ?
a écrit :
Ceci étant, si tu souhaites utiliser un cms ou Dotclear, je te conseille d'utiliser un style switcher intégré.

Voir le plugin "Selecteur de Thème" dans la liste des plugins Dotclear


Merci pour ta suggestion Véro, mais ce plug-in n'est plus valide... Toutefois, j'ai pu en installer d'autres intéressants également. Va donc bien falloir que je comprenne ce script PHP... Smiley rolleyes Mais avec toutes ces explications, je ne doute pas d'y arriver, il me faut juste un peu de patience. Et au pire des cas, je peux toujours utiliser la méthode en JavaScript... Smiley cligne

Mais au fait, faut-il préférer la méthode en PHP ou en JavaScript et pourquoi ?...
Merci pour ton adaptation de script Vero, je mets çà de côté et j'essaye dès que mes clients me laissent un peu bosser pour moi et non pour eux. Je croise les doigts pour que çà fonctionne !

J'avais fait pas mal d'essai de modification, et j'avais abouti à quelque chose comme çà. Sauf que je ne créais pas une variable que j'utilisais ensuite dans le <link>, mais directement le nom du dossier dans ce même <link>.
Malgré celà çà ne marchait pas. On va voir si ta solution a plus de succès. Smiley biggrin
Modérateur
Hello,

Armony a écrit :
Mais au fait, faut-il préférer la méthode en PHP ou en JavaScript et pourquoi ?...
mmh... les deux mon commandant ! Smiley lol

La méthode PHP garantie que le styleswitcher sera disponible quelquesoit le support vu que tout se passe côté serveur. L'inconvénient, c'est de faire une requête supplémentaire.

C'est la qu'on peut compléter par la méthode JS... afin de ne pas faire de requête. Smiley smile

Après, il faut aussi voir si tu considères le styleswitcher comme optionnel ou non. Si tel est le cas, tu peux te contenter du JS, tout comme tu pourrais te contenter du PHP si tu ne te préoccupes pas trop des ressources prises sur le serveur...

... donc on ne peut pas vraiment dire qu'une méthode est meilleure que l'autre... tout dépend de tes besoins et de tes exigences. Smiley cligne
Armony a écrit :

Quant à Laurent Denis, je me demandais ce qui pouvait t'amener à autant de mépris pour ce "gadget" ?


Aucun mépris de ma part. Les styles witchers peuvent avoir toutes sortes d'utilités.

En revanche, et c'est là que je me place quand je parle de "gadget", ils n'ont aucun rapport avec l'accessibilité. Malheureusement, c'est une confusion qui est très fréquente... Smiley cligne
Merci infiniment à vous tous pour votre disponibilité et toutes vos réponses !!! Smiley biggrin

Avec toutes ces précisions, le style switcher n'a plus de secret pour moi Smiley cligne

A bientôt ! Smiley ravi
Modifié par Armony (08 Mar 2007 - 10:05)
Sujet clos
Aller à