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
Les cadres de couleur
Article mis en ligne le 4 février 2009
dernière modification le 23 mai 2017

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Les cadres de couleur qui sont sur les côtés, que ce soit dans la page sommaire, rubrique, article ou autre, sont aisément modifiables. Vous pouvez donc modifier ces pages à votre convenance très rapidement.

Tous ces cadres sont appelés de la même manière :

  1. <div class="cadre-couleur">
  2. <INCLURE {fond=inclusions/inc-fichier}>
  3. </div>

Télécharger

"fichier" correspondant au nom de la noisette appelée.

 Modifier leur position

Avec EscalV3, il suffit d’aller sur la page de configuration d’Escal et de choisir les noisettes qu’on garde et de les afficher où on veut et dans l’ordre souhaité.

Avec EscalV2

Il suffit de déplacer le code ci-dessus dans le bloc que vous voulez, soit dans le bloc navigation, soit dans le bloc extra.

On peut bien sur en mettre plusieurs à la suite

Ces fichiers sont appelés des noisettes ou fichiers inclus et se trouvent tous dans le dossier /inclusions.

Les noisettes disponibles sont décrites dans cette rubrique

Évidemment, rien ne vous empêche de concevoir vos propres noisettes.

 Modifier leur couleur

Avec EscalV3, une page de configuration dans l’espace privé permet de changer la couleur des noisettes (une seule couleur pour toutes les noisettes) .

Néanmoins, on peut changer l’aspect de chaque bloc individuellement en définissant ses propriétés CSS dans le fichier perso.css qui doit être placé dans le dossier /squelettes/styles.

Exemple : modifier l’aspect du bloc "Accès direct (inc-acces_direct)

  1. div h1.cadre.acces-direct {
  2. background-color: #CC0000;
  3. color: #ffffff;
  4. }
  5. div.texte.acces-direct {
  6. background-color: #E63939;
  7. border-color: #CC0000;
  8. color: #ffffff;
  9. }
  10. div.texte.acces-direct a{
  11. color: #ffffff;
  12. }

Télécharger

affichera un bloc rouge avec un texte blanc, même pour les liens.

A noter que les sélecteurs css correspondent au nom de la noisette concernée mais attention, en cas de nom composé, c’est bien le tiret du 6 qu’il faut employer, pas l’underscore (tiret du 8), comme pour cet exemple avec acces-direct.

Un autre exemple pour être plus clair avec le bloc "Dans la même rubrique" de la page article (inc-meme_rub) :

  1. div h1.cadre.meme-rub {
  2. background-color: #CC0000;
  3. color: #ffffff;
  4. }
  5. div.texte.meme-rub {
  6. background-color: #E63939;
  7. border-color: #CC0000;
  8. color: #ffffff;
  9. }
  10. div.texte.meme-rub a{
  11. color: #ffffff;
  12. }

Télécharger

Avec EscalV2

Il suffit de mettre la couleur que vous voulez à la place de couleur. Les couleurs disponibles actuellement sont :

  • vert
  • bleu
  • jaune
  • gris
  • rouge
  • marron

Encore une fois rien ne vous empêche d’ajouter de nouvelles couleurs.

Ça se passe dans le fichier general.css. Inspirez-vous de l’existant :

  1. div.cadre-vert h1.cadre{
  2. background-color: #51B169;
  3. }
  4. div.cadre-vert .texte{
  5. background-color: #D6EACA;
  6. border-bottom: 2px solid #51B169;
  7. border-left: 1px solid #51B169;
  8. border-right: 2px solid #51B169;
  9. }

Télécharger

 Supprimer bord et fond

Avec EscalV3, on peut choisir la même couleur que le fond qui se trouve en-dessous ou rajouter dans perso.css le code suivant :

  1. div.texte.evenements {
  2. background: none;
  3. border: none;
  4. }

Télécharger

pour enlever le fond et les bords du texte de la noisette "Évènements" ou

  1. div.cadre-couleur .texte {
  2. background: none;
  3. border: none;
  4. }

Télécharger

pour enlever le fond et les bords de toutes les noisettes.

Avec EscalV2

On peut aussi supprimer les bords et/ou le fond de la partie inférieure.

Pour cela, il suffit de rajouter sans-bord et/ou sans-fond à la couleur du cadre. (Voir des exemples Cadres et couleurs)

  1. <div class="cadre-couleur sans-bord sans-fond">
  2. <INCLURE {fond=inclusions/inc-fichier}>
  3. </div>

Télécharger

A vous de jouer !


Forum
Répondre à cet article
faire disparaître la bordure des noisettes
José SEGURA - le 10 février 2017

Bonjour Jean-Christophe,

Tout d’abord un grand merci pour ton squelette. J’étais un inconditionnel de sarka-spip depuis des années. Lors de la mise à jour de spip vers le 3.1, je me suis rendu compte que sarka n’est plus mis à jour (enfin sarka 4 pas très convaincant ni bien documenté). Je ne leur jette pas l apierre car je dais que la plupart, tout comme toi, êtes bénévoles pour cette création et ce suivi.
Heureusement, j’ai trouvé EscalV3 qui ne me dépayse pas et même présente des points positifs supplémentaire.
Je me suis donc lancé dans la migration et j’arrive à avoir un site qui commence à tenir la route (même si j’hésite encore sur l aprésentation de la page d’accueil : http://pedagogie.ac-toulouse.fr/casnav/
Un petit souci que je n’arrive pas à résoudre après avoir pourtant bien cherché :
Je veux supprimer le bord bleu du texte de mes noisettes latérales. Je n’ai a priori rien trouvé sur lea config de la partie privée qui ne concerne que les fonds et les textes (ou bords mais pas pour les noisettes).

J’ai donc créer le fichier perso.css que j’ai intéfré dans un dossier "styles" dans le dossiers "squelettes".
J’ai gardé le code proposé dans l’article :

/***********************************************
/noisettes latérales cadre blanc et fond blanc
/**********************************************

div.cadre-couleur .texte {
   background: none;
   border: none;
}

j’ai vidé cache, recalculé page...Rien n’y fait.
Qu’est-ce que j’ai mal fait ?
Merci par avance.

José

faire disparaître la bordure des noisettes
Jean Christophe Villeneuve - le 10 février 2017

Bonjour

Ton code était bon mais pour les css, c’est le cache du navigateur qu’il faut vider. Ou simplement ré-afficher la page (avec F5 en général), ce qui est différent de recalculer.

Mais bon c’est vrai qu’Escal avait déjà prévu cette option ;-)

bords des cadres résolu
José SEGURA - le 10 février 2017

Je réponds à mon message précédent pas encore validé, je suppose. J’ai trouvé comment faire disparaître les bords des noisette : congig "paramètres des blocs latéraux" et "titres et contenus" puis cocher "non" dans "bords des cadres présents"..ben ouais, logique...

José

Couleur forum article
Lael - le 2 février 2016

Bonjour,

J’ai Escal V3 depuis peu sur spip 3.1 et j’en suis plutôt content, merci !

J’essaye sans succès de modifier la couleur du cadre du "formulaire" de forum_article qui par défaut est la même que celle des titres de noisettes et du menu vertical déroulant. Sur votre site, ça rend bien, sur le mien pas vraiment, la couleur étant trop foncée.

J’ai essayé de mettre différents codes dans un perso.css rangé dans squelettes/styles/ (j’ai aussi essayé dans squelettes/css/), mais rien ne bouge. Le dernier essai en date :

#forum-article{
   background-color : #D8C290 ;
   border: none;
}

Pouvez-vous m’éclairer ?
Merci encore

PS : la balise "code" ne marche pas, j’ai du ruser pour qu’on voit les accolades

Couleur forum article
Jean Christophe Villeneuve - le 2 février 2016

Hello

Si, si, la balise code fonctionne très bien. D’ailleurs, je viens de la mettre dans ton message. Tu avais du faire une erreur.

Sinon, pour ton souci, essaye avec
#formulaire_forum div
au lieu de
#forum-article

Couleur forum article
Lael - le 2 février 2016

Merci,

Ça marche effectivement avec :

#formulaire_forum div{
   background-color : #D8C290 ;
   color : #000000
   border: none;
}

Par je voulais le texte en noir, mais la couleur est "écrasée" par le blanc qui est indiqué dans le fichier /spip.php ?page=config.css

Je croyais que perso.css s’imposait à tout ?

Couleur forum article
Jean Christophe Villeneuve - le 2 février 2016

Oui, parfois, on doit forcer la propriété : ça devrait fonctionner avec

color: #000000 !important;

Couleur forum article
Lael - le 2 février 2016

Oui, ça marche !
Je retiens l’usage du " !important"...

Merci !

Les cadres de couleur
Didier Welsing - le 31 mai 2015

Bonsoir Jean-Christophe,
J’essaie de changer la couleur de fond du cadre des rubriques (cadre-rubrique)
Dans mon perso.css j’ai rajouté :
/********************/
/* la page rubrique */
/********************/

div cadre-rubrique
background-color : #3a9512 ;

Rien ne change
où est mon erreur ?
Je te remercie d’avance de ton aide
Didier

Les cadres de couleur
Jean Christophe Villeneuve - le 31 mai 2015

Hello

tu dois mettre

#cadre-rubrique{
background-color : #3a9512 ;
}

Les cadres de couleur
Didier welsing - le 31 mai 2015

J’avais déjà essayé rien ni fait, mêê le padding ne change pas

J’ai essayé en copiant directement dans general.css je vois la modif dans les outils de dev de firefo ; elle est coché mais barrée (fig1), si je décoche le bacground pour les groupe de cadre au dessus je vois apparaitre ma couleur modifiée (fig2)
Avec uniquement le perso.css modifié je ne vois la modif (point vert) dans les outils forefox

Didier

Les cadres de couleur
Jean Christophe Villeneuve - le 1er juin 2015

Hello

Tu peux donner une URL pour voir ?

PS : Il faut absolument éviter de toucher aux fichiers d’escal.

Les cadres de couleur
Didier - le 1er juin 2015

Le relooking du site est en local, mais je progresse :
j’ai vidé le perso.css en laissant background-color pour le cadre-rubrique et ça marche !
Donc probable conflit avec les autres éléments qui étaient présents dans le css, je vais les réintroduire un/un et on va bien voir.

Pour les modifs du general.css c’était temporaire juste pour voir s’il y avait une différence.

Merci encore
Didier

Ps : je porterai le résultat

Les cadres de couleur
Marc - le 28 avril 2013

J’ai perdu mes couleurs après un upgrade vers 70.64 :-O
la rubrique centrale reprend la couleur bleue et le fonds des côtés et autres blocs est transparent... ou blanc ?

Les cadres de couleur
Marc - le 29 avril 2013

bon le matin c’est mieux, je devais tout reprendre dans la config.... il reste des choses à peaufiner tt de même (voir mon mp)

Les cadres de couleur
hossein - le 23 avril 2012

Bonjour,

Vous indiquez que les appels de cadres se font de cette sorte :

div class="cadre-couleur sans-bord sans-fond"
INCLURE fond=inclusions/inc-fichier
/div

alors qu’en réalité c’est :

div class="cadre"
INCLURE fond=inclusions/inc-fichier
/div

pourtant firebug m’indique que c’est bien "cadre-couleur" (bleu en l’occurrence) qui est pointé dans la feuille de style

Si je modifie la copie du fichier inclusion/inc-fichier dans squelette en mettant cadre-gris par exemple, je n’ai plus de style ?

Pouvez-vous m’indiquer à quel niveau se situe le tour de passe passe entre cadre et cadre-bleu svp.

Cordialement, Hossein.

Les cadres de couleur
Jean Christophe Villeneuve - le 23 avril 2012

Bonsoir

Je maintiens : pour changer la couleur du cadre, on ne touche pas au fichier inclus mais uniquement à son appel dans le fichier sommaire.html ou rubrique.html ou autre.

Relis bien l’article et suis les consignes.

Et regarde aussi cette page.

Les cadres de couleur
- le 24 avril 2012

Bonjour Jean Christophe,

AAAAAGH !! j’ai lu trop vite encore une fois, effectivement c’est plus clair maintenant.

merci.

changement de couleur
- le 9 décembre 2011

Bonjour,

je veux changer de couleur sur tout le site et tout les menus si vous voulez plus d’info allez voir sur formationjulien.perso.sfr.fr

Changer les couleurs
Jean Christophe Villeneuve - le 9 décembre 2011

On peut bien sur mais il faut passer par les différentes feuilles de styles.

Si tu n’es pas trop pressé, j’ai l’intention de restructurer mes feuilles de styles pour que ce type de changement soit plus rapide et simple à faire.

Changer les couleurs du monde ....
Jean Christophe Villeneuve - le 14 décembre 2011

Et hop !

Mets Escal à jour et lis ces quelque lignes

Les couleurs, c’est top ?
Régis - le 5 janvier 2012

Bonjour, et merci pour ce squelette adaptable que j’utilise depuis 4 ans.
Je viens de faire la dernière mise à jour, et je n’ai plus de couleurs dans mes cadres, plus rien. :’-)):’-))

http://se-unsa44.org/

Merci d’avance pour votre aide.

si si c’est top !
Jean Christophe Villeneuve - le 6 janvier 2012

Tu n’as plus de couleurs parce que tu as fait une copie de inc-head.html pour le personnaliser.

Il te suffit donc de rajouter cette ligne dans ta copie et tout rentrera dans l’ordre ;-)

<link href="#CHEMIN{styles/couleurs.css}" rel="stylesheet" type="text/css" />

Les couleurs, c’est top...
Régis - le 10 janvier 2012

Merci pour la réponse rapide. Je n’avais pas pensé à la personnalisation...
C’est super et simple comme cela, et bravo pour le suivi...

Mise à jour d’Escal aujourd’hui
Régis - le 10 janvier 2012

Bonjour,
Je viens de faire la dernière mise à jour aujourd’hui de mon site. Il était pourtant nickel...
Patatras, j’ai du rose partout, derrière les boîtes, et les cadres "identification" et "menu" que j’avais supprimès sont revenus...
http://se-unsa44.org/

Pourtant, j’ai bien mis les fichiers personnalisé dans le dossier squelette/inclusions...

Merci de me donner une piste... http://se-unsa44.org/

Cordialement

J’ai trouvé une partie du problème...
Régis - le 11 janvier 2012

J’avais activé le couteau suisse. Je l’ai retiré, et plus de problème avec le rose... Surprenant...

Par contre, j’ai bien vérifié que dans "sommaire" les cadres identification et menu étaient retirés...
Pas moyen de les enlever !

Qu’est ce qui pourrait bloquer ?

Merci d’avance.

Changer les couleurs
Jean Christophe Villeneuve - le 11 janvier 2012

Sans doute un paramètre du couteau suisse qui intervient ?

Pour les cadres qui apparaissent, c’est forcément qu’ils sont appelés dans ton fichier sommaire. Tu es sur d’avoir une copie sans l’appel à ces fichiers ?

Avec toutes mes excuses
Régis - le 12 janvier 2012

J’avais placé la copie du sommaire personnalisé dans squelettes/inclusions, il y avait peu de chance que cela fonctionne... C’est bon maintenant.
Désolé pour la demande plutôt farfelue et merci pour tout ce travail qui me fait progresser... (Il y a encore du boulot...)

Cordialement



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