Jouer avec les couleurs
Article mis en ligne le 16 mars 2013
dernière modification le 23 janvier 2020

par Jean Christophe Villeneuve

Une page de configuration dans l’espace privé permet de choisir les couleurs pour l’ensemble du site : fonds, textes et bordures mais on peut avoir envie de jouer un peu plus.

Jouer avec le fond

Selon la langue

Si on utilise le multilinguisme, on peut définir un fond en fonction du contexte de langue dans le site.

Pour cela, il suffit de

  • créer un fichier css pour chaque langue, Escal s’occupant du reste. Ces fichiers doivent s’appeler XX.css où XX correspond au code de langue (fr, en, de, es, it, ....) et doivent se trouver dans le dossier /squelettes/styles
  • mettre dans ces fichiers le code suivant
div#conteneur {
	background-color: couleur;
}

couleur sera la couleur choisie pour chaque secteur. Cette couleur pourra être

    • une couleur en code hexadécimal -> exemple : #0000FF
    • une couleur nommée -> exemple : grey
    • une couleur en code rgb -> exemple : rgb(24,125,255)

On peut évidemment définir d’autres règles CSS dans ces fichiers lang.css

Selon le secteur

On peut aussi définir le fond des pages en fonction du secteur dans lequel on se trouve.

Pour cela, il suffit de

  • créer un fichier css pour chaque secteur, Escal-V3 s’occupant du reste. Ces fichiers doivent s’appeler secteurXX.css (où XX correspond au numéro du secteur) et doivent se trouver dans le dossier /squelettes/styles
  • mettre dans ces fichiers le code suivant
div#conteneur {
	background-color: couleur;
}

couleur sera la couleur choisie pour chaque secteur. Cette couleur pourra être

    • une couleur en code hexadécimal -> exemple : #0000FF
    • une couleur nommée -> exemple : grey
    • une couleur en code rgb -> exemple : rgb(24,125,255)

On peut évidemment définir d’autres règles CSS dans ces fichiers secteurXX.css

Jouer avec les cadres

Dans Escal, tous les cadres latéraux ont une class spécifique. On peut donc personnaliser les couleurs de chacun d’entre eux. Tout est expliqué dans cet article.

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article194