Bien le bonsoir !
Alors je sais pas trop comment faire ça donc je l'ai mis en html mais je pense que ça va parler de php et de javascript donc bon...
J'ai fait mon site, en flat du coup une couleur très très présente (#ff6666 pour les curieux, qui n'est pas un rose, hein, je tiens à le préciser ^^ ), le fait est que du coup des personnes m'ont dit qu'un bleu serait mieux mais je trouve mon site moins bien... Donc pourquoi pas faire un site qui à deux couleurs, c'est là qu'est mon problème, je ne sais pas vraiment comment faire ça, a part si j'ai deux html différent alors n'y a t'il pas possibilité de basculer un css a un autre ou quelque chose dans le genre ?

J'ai voulu chercher sur notre ami Google mais en tapant "site change de couleur" il me propose des tutos sur les couleurs hexadécimale...

Bref, je vous remercie de porter de l'intérêt a mon sujet !

5 réponses


Il te faut passer par le CSS, tu mets des classes dans tes éléments, tu fais deux fichiers CSS différents, chacun pour une couleur en particulier et tu donnes la possibilité aux visiteurs et/ou membre, de choisir entre l'un ou l'autre.
C'est ce que l'on pourrait appeler 2 thèmes différents.
Comme ça, chaque utilisateur pourra choisir entre l'un ou l'autre.

Astor
Auteur

D'acc mais comment tu ferais ?
Je ferais 3 css, un style.css, un rose.css, un bleu.css ? Et je ferais comment parce que ça marche pas comme un lien normal je veux dire, faut que l'un passe sur l'autre ?

Pas con le terme de "thème" j'y avais pas pensé, je checker ça sur la toile !

Il faut que tu passe soit par les variables de sessions, soit par les cookies, soit tu en choisi un des deux selon pour qui tu autorise le changement ou les deux, à toi de voir.
Dans le header où tu déclares tes deux fichiers CSS, par défault tu choisis un des deux fichiers CSS et tu fais une condition soit par rapport à la session, soit par rapport au cookie de l'utilisateur, si tu arrives à lire un des deux, tu affiche l'un ou l'autre en gros.
Pour ce qui est du cas de la sélection par l'utilisateurs, tu fais une fonction pour traiter l'action, et dans la vue où l'utilisateur pourra choisir, tu fais par exemple un petit formulaire avec un input de type select et un bouton pour soumettre le formulaire qui enclenchera ta fonction qui fera en sorte d'écrire la valeur de la variable dans le cookie qui sera créé ou pour écrire une variable de session.
Voilà en gros.
Maintenant, à toi de faire tes choix et selon tes préférences de mettre le système en place.

S'il ne s'agit que d'une couleur a changer (et non pas plusieurs), perso je ferai plutôt 2 / 3 lignes javascript pour changer le style de la div concernée, avec stockage de la valeur choisie en localStorage. L'intéret que j'y vois:

  • Pas plusieurs css a maintenir sur le serveur
  • Pas besoin de recharger le css ou la page si le visiteur veux changer la couleur
  • Tu n'es plus limité par le nombre de choix possibles (qui nécessiteraient chacun leur css): dans un cas extreme tu peux meme mettre un colorpicker dans ta page et laisser l'utilisateur choisir vraiment ce qu'il veut.

OU

Si tu veux faire un thème un peu plus complexe avec {des elements rose-qui-n'est-pas-rose et d'autres un peu plus rose} / {des elements bleus et d'autres bleu clair}, je ferais un toggleClass pour passer facilement d'une classe .theme-bleue a une classe .theme-rose sur l'ensemble des éléments dont la couleur doit changer. C'est dynamique sans rechargement de page / class, c'est stockable en local storage, et il y a toujours un seul css a maintenir.

Astor
Auteur

Merci @Lartak11, mais ça m'a l'air super chaud, je connais seulement l'html/css et j'ai jamais vu comment exploiter les cookies ^^ Je vais surement y jeter un coup d'oeil !

Merci @Vallyvan, voici les liens pour ma version rose et ma version bleue. Donc y'a des color et des background à changer. Voilou, mais finalement, après plusieurs avis qui préfère le bleu donc je vais surement faire qu'une seule version ^^

Edit : Petit soucis sur les liens, c'est corrigé ! :)