Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Utilisé à ce jour dans 1408 sites
Jouer avec les couleurs
Article mis en ligne le 16 mars 2013
dernière modification le 26 mars 2016

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

 Avec EscalV3

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-V3 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
  1. div#conteneur {
  2. background-color: couleur;
  3. }

Télécharger

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
  1. div#conteneur {
  2. background-color: couleur;
  3. }

Télécharger

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 EscalV3, 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.

 Avec EscalV2

Tout se passe dans le fichier couleurs.css

Le bleu du site vous agresse les yeux ? Vous préfèreriez une autre couleur ?

Allez déjà voir cet article pour choisir une autre couleur parmi celles déjà disponibles pour les blocs latéraux et allez voir cette page pour avoir un premier aperçu.

Pour utiliser le rose fuschia ou le vert espérance que vous aimez tant, il faut aller dans le fichier /squelettes/styles/perso.css (à créer si ce n’est pas encore fait) et créer vos propres cadres en vous inspirant des modèles déjà présents.

Pour changer les couleurs du menu ou des blocs centraux ou ... il faut aller dans le fichier couleurs.css et repérer la règle css à modifier, que vous copiez avant dans perso.css, bien sûr !

Pour voir les couleurs utilisées par défaut dans Escal, vous pouvez ouvrir le fichier palette couleurs.png qui se trouve dans le dossier /images du plugin.

Pour vous aider, je vous conseille d’utiliser les extensions de Firefox présentées brièvement dans cet article


Forum
Répondre à cet article
palette qui coincée sous les champs
Christian voillemont - le 12 janvier 2016

bonjour,

pour mettre des couleurs plus facilement,j’ai le plugin palette.

Hélas, il est à peine visible, il passe sous le champ du dessous, voir image.

Je suis avec spip 3.1 et tout est à jour.

Que faire pour le rendre visible ?

Merci pour votre aide.

palette qui coincée sous les champs
spipfactory.com - le 12 janvier 2016

je confirme le pb .........
pour l’instant attendre qu’on trouve une solution ;)

palette qui coincée sous les champs
PACE - le 8 mai 2016

Essayez autre chose, installez le plugin "couleurs_spip
Répertoire :
plugins/auto/couleurs_spip/"et
plugins/auto/typoenluminee/v3.5.6/
Nécessite :
Porte plume ≥ 1.2.2

palette qui coincée sous les champs
Jean Christophe Villeneuve - le 9 mai 2016

Euh désolé mais aucun rapport ... Le plugin que tu cites permet de mettre en couleurs le texte d’un article. Alors que "Palette" permet choisir une couleur dans un champ de formulaire.

De toutes façons, le problème cité au-dessus a été réglé fin février. Merci quand même.

Jouer avec les couleurs
Jean Remond - le 18 avril 2016

Bonjour,

Je voulais jouer avec les couleurs de fonds avec des transparences partielles en utilisant des codification rgba.
Dans le formulaire ’configurer_escal_fonds.html’, la saisie est libre, le stockage est correct dans la table ’_meta’, le traitement de la page publique est correct.

Seul point handicapant : la restitution de la donnée dans le formulaire.
L’affichage est vide. Du coup, lors d’un autre changement, la valeur par défaut est replacée.

En dehors de créer des fichiers css spécifiques (toujours possibles mais avec maintenance bien moins agréable), ne peut-on réver d’une adaptation dans le formulaire ? ;-)

Amitiés Jean.

Jouer avec les couleurs
Jean Christophe Villeneuve - le 18 avril 2016

Hello

Utilise-tu le plugin "Palette"

Si oui, cela se passe-t-il mieux en le désactivant ?

Jouer avec les couleurs
Jean Remond - le 19 avril 2016

Bonsoir Jean-Christophe,

Bravo pour cette idée sublime.
Effectivement, en désactivant le plugin Palette, le résultat est excellent.
Palette travaille avec les valeurs héxa. C’est pour cela que c’était verrouillé donc.

Merci beaucoup pour cette solution. Je suis aux anges.
Je vais bien dormir.
Amitiés Jean.

Mots-clés associés



Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.48