Discussion :

[narvik]

Bonjour,

Je voudrais que ma page de connexion puisse être personnalisable. Pouvoir changer la couleur de l'en-tête, des boutons, du textes facilement.
Sans devoir changer toutes les valeurs en dur.

L'idée est que quand un client demande une personnalisation pour l'écran, les consultants aient à changer qu'une ou deux valeurs, que cela soit rapide et confortable. Et que lorsque qu'une mise à jour de la page est faite, ils n'aient pas à changer milles et une lignes !

Une idée de comment mettre en place cette solution ?

[Bovino]

Les variables n'existent pas (encore) en CSS.
Il y a cependant plusiseurs façons possibles de procéder.
Soit en utilisant un préprocesseur CSS, par exemple LESS (voir : Introduction à LESS), soit en générant le CSS dynamiquement côté serveur en fonction de paramètres utilisateur.
Dans le second cas, tu as aussi deux possibilités : appeler un fichier (par exemple css.php) avec un header indiquant qu'il s'agit d'un contenu CSS ou paramétrer le serveur pour que les fichiers CSS soient interprétés par PHP.

[narvik]

Merci pour ta réponse rapide !
Je pense que je vais me tourner vers la solution .less.
Je code depuis seulement 2 mois en web donc j'ai beaucoup à apprendre!
Pour le moment HTML5, CSS3 et petit à petit un peu de Jquery et donc je vais voir .less si j'arrive à mettre quelques choses en place.
Je suis en formation concepteur réalisateur web en alternance donc ça devrait bien avancer petit à petit entre l'école et l'entreprise.

Encore merci!

[narvik]

Je note la solution PHP elle m'a l'air pas mal également !
Par contre, je connais pas grand chose à PHP pour le moment.
Et puis l'idée n'est pas de demander à l'utilisateur c'est de définir les 3, 4 couleurs qu'il faut sur ma page dans des variables et les attribuer aux éléments qui vont bien!
Suivant la demande du client, on modifie les couleurs une fois qui se répercuteront sur les différents éléments.
C'est un travail en arrière plan que les consultants feront suivant les demandes.

[Invité]

On peut aussi modifier un thème plus complet/complexe (couleurs textes/background, mise en page,...) :
avec un formulaire proposant les themes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form method="post">
  <select name="theme">
    <option value="style-theme1.css">theme 1</option>
    <option value="style-theme2.css">theme 2</option>
    <option value="style-theme3.css">theme 3</option>
  </select>
</form>

On récupère le theme choisi, qu'on met dans une SESSION :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php session_start();
if(empty($_SESSION['theme'])){ 
   $_SESSION['theme'] = 'style-theme1.css'; // theme par défaut
}
if(isset($_POST['theme'])){
   $_SESSION['theme'] = $_POST['theme']; 
}

Puis dans la page :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="/css/<?php echo $_SESSION['theme']; ?>" />

[Invité]

Suivant la demande du client, on modifie les couleurs une fois qui se répercuteront sur les différents éléments.
C'est un travail en arrière plan que les consultants feront suivant les demandes.

Dans ce cas, la sélection (choix couleur(s) ou thème) peut aussi être enregistrée :

• dans une table "T_CONFIG_PERSO" en Base de Données
• ou dans un fichier texte config-perso.txt

[narvik]

Merci, je retiens !
Je vais dans un premier temps tester une solution avec Compass et un scss où je définie une ou plusieurs variables couleur et ça devrait me générer un css. Donc juste à changer les valeurs de mes variables quand on a un client qui veut personnaliser la page !

[Invité]

Bonjour,
avec un formulaire proposant les couleurs :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form method="post">
  <select name="couleur">
    <option value="#......">couleur 1</option>
    <option value="#......">couleur 2</option>
    <option value="#......">couleur 3</option>
  </select>
</form>

On récupère la couleur choisie, qu'on met dans une SESSION :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php session_start();
if(empty($_SESSION['couleur'])){ 
   $_SESSION['couleur'] = '#....'; // couleur par défaut
}
if(isset($_POST['couleur'])){
   $_SESSION['couleur'] = $_POST['couleur']; 
}

Puis dans la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<style type="text/css">
.couleur { color:<?php echo $_SESSION['couleur']; ?>; }
</style>

Enfin, mettre class="couleur" sur les éléments concernés.