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 1291 sites
Jouer avec le bandeau
Article mis en ligne le 15 mars 2013
dernière modification le 22 février 2017

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

 L’image du bandeau

 Pour tout le site

Elle peut évidemment être remplacée par celle que vous avez amoureusement concoctée.

Avec EscalV3, la page de configuration dans l’espace privé permet d’insérer votre image dans le bandeau.

Tous les conseils et les détails dans cet article.

Avec EscalV2

Il faut

  • mettre votre fichier image dans le dossier /squelettes/images
  • copier inc-bandeau.html de /escal/inclusions vers /squelettes inclusions
  • dans ce fichier inc-bandeau.html remplacer
  1. (#LOGO_SITE_SPIP
  2. |sinon{<img src="[(#CHEMIN{images/bandacad.jpg})]" alt="<:escal:bandeau:>" />}
  3. |image_reduire{950})

Télécharger

par

  1. [(#CHEMIN{images/fichier.ext}|balise_img{<:escal:bandeau:>}|image_reduire{950})]

fichier.ext étant le nom de votre fichier avec son extension

NB2 : Votre image doit faire au moins 950px de large pour remplir toute la largeur du bandeau.

 En fonction du secteur

On peut vouloir un bandeau différent pour tel ou tel secteur (rubrique de premier niveau). Pour cela, il faut avoir choisi l’option 3 "affichage d’un bandeau personnalisé" dans la configuration d’Escal-V3 partie "Généralités" puis "Bandeau". Il suffit ensuite de nommer une image rubriqueXX.jpg ou rubriqueXX.png où XX est le numéro du secteur et de placer cette image dans un dossier /squelettes/images/bandeau.
Bien sur, les sous-rubriques et leurs articles hériteront de ce bandeau.

Attention à garder une cohérence graphique entre les différents bandeaux !

 En fonction de la langue

On peut aussi s’amuser, aussi bien avec Escal-V3 qu’avec Escal-V2 à changer l’image du bandeau en fonction de la langue de la rubrique.

Pour cela, on va

  • copier inc-bandeau.html de /escal/inclusions vers /squelettes inclusions
  • dans ce fichier, remplacer tout le code existant par ceci
    1. <div id="bandeau">
    2.  
    3. <dl class="image_fluide">
    4. <dt>
    5. <a href="[(#URL_SITE_SPIP|parametre_url{lang,#ENV{lang}})]" title="<:escal:accueil:>" >
    6. [(#CHEMIN{images/bandeau/bandeau-#LANG.jpg}|balise_img{<:escal:bandeau:>}|image_reduire{#CONFIG{escal/config/largeurlayoutbase,950}})]
    7. </a>
    8. </dt>
    9. </dl>
    10.  
    11. <div id="titrepage">
    12. <div id="nom-site-spip">
    13. [(#NOM_SITE_SPIP)]
    14. </div>
    15.  
    16. <div id="slogan-site-spip">
    17. [(#SLOGAN_SITE_SPIP|?{#SLOGAN_SITE_SPIP,Slogan du site})]
    18. </div>
    19.  
    20. <div id="descriptif-site-spip">
    21. [(#DESCRIPTIF_SITE_SPIP|?{#DESCRIPTIF_SITE_SPIP,Descriptif du site})]
    22. </div>
    23. </div>
    24.  
    25. </div>
    26.  
    27. <div class="nettoyeur"></div>

    Télécharger

  • créer un bandeau par langue appelé ainsi bandeau-XX.jpg où XX correspond au code de langue (fr, en, de, es, it, ....)
  • déposer ces images dans un dossier /squelettes/images/bandeau (à créer s’il n’existe pas).

 Le titre du site

Avec EscalV3, une page de configuration dans l’espace privé permet de supprimer ce titre et/ou le slogan et le descriptif du site en quelques clics. Cette page se trouve dans

  • Squelettes → Escal
  • Généralités → Bandeau

Avec EscalV2

Pour supprimer ce titre s’il ne convient pas à votre charte graphique, ben ... virez cette ligne du fichier en question. Ou encore plus simple, on rajoute la propriété display : none ; dans le style #titrepage. Autrement dit, on écrit ce code dans le fichier perso.css que l’on met dans le dossier /squelettes/styles.

  1. #titrepage {
  2. display: none;
  3. }

Télécharger

et le titre disparaît.

Forum
Répondre à cet article
bandeau pour sous rubriques
Christian voillemont - le 6 avril 2016

Bonjour sur mon site, j’ai faune, flore, je peux y mettre un bandeau de rubrique spécifique.

J’ai ensuite des sous rubriques, batraciens, reptiles, oiseaux... j’aimerai donc pour les doter d’un bandeau personnalisé comme pour les rubriques.

Comment faire ?

Merci pour les conseils

bandeau pour sous rubriques
Jean Christophe Villeneuve - le 6 avril 2016

On doit pouvoir y arriver en faisant ceci :

  • copie du fichier inc-bandeau.html de /plugins/escal/inclusions vers /squelettes/inclusions
  • dans cette copie, remplacer #ID_SECTEUR des lignes 54 et 57 par #ID_RUBRIQUE

Ainsi, s’il existe une image rubriqueXX.jpg dans /squelettes/images/bandeau (où le XX correspond au numéro de la rubrique ou de la sous-rubrique, cette image sera affichée, sinon, ce sera l’image choisie par défaut dans l’option 3

bandeau pour sous rubriques
Christian voillemont - le 6 avril 2016

Super, merci, ca marche

Jouer avec le bandeau
Jean Remond - le 25 décembre 2015

Bonjour,
Je déploie un 2eme site avec Escal V3 sous spip 3.1 et je souhaiterai que l’image du bandeau soit en background des autres éléments (logo compris).
Je crois me souvenir qu’un fil en avait discuté, mais je ne retrouve plus le bout (du fil).
Si une piste s’ouvrait, je la suivrais nez au sol pour tenter d’aboutir ;-)

Bravo pour la permanente évolution du squelette.
Bonnes fêtes de fin d’année.

Amicalement Jean.

Jouer avec le bandeau
Jean Christophe Villeneuve - le 26 décembre 2015

Tu peux le faire en mettant ton image de fond dans /squelettes/images/bandeau par exemple et en mettant dans un fichier perso.css (placé dans /squelettes/styles) le code suivant :

#bandeau {
background-image : url(../images/bandeau/monimage.jpg) ;
height: 100px;
}

si ton image s’appelle monimage.jpg et fait 100px de hauteur

Jouer avec le bandeau
Jean Remond - le 27 décembre 2015

Merci beaucoup Jean-Christophe pour cette idée.
Je vais faire demain, aujourd’hui c’est repas de famille ;-)
Je te redis quoi.

Amitiés.

Jouer avec le bandeau
Christian voillemont - le 5 janvier 2016

Bonjour,

J’ai suivi les conseils pour mettre un bandeau en background
pour avoir le logo incrusté dessus. Je n’ai pas mis les titres slogan... Pour des raisons de lisibilité, les ai ajouté a l’image avec des contours pour les rendre plus lisible.

cela va t il nuire à mon indexation ?

Jouer avec le bandeau
Jean Christophe Villeneuve - le 5 janvier 2016

Clairement non !

L’indexation par les robots se fait sur l’ensemble du contenu maintenant et sur quelques éléments dans le head des pages.

Jouer avec le bandeau
Elisabeth Durrmann - le 9 mars 2015

Bonjour,

Je fais des essais avec votre squelette ( pas mal du tout ).
Pour la bandeau, je voudrais mettre un bandeau image que j’ai fabriqué et en-dessous le titre du site.
Pb, le bloc de couleur qui contient l’affichage du nom de site est trop haut, je voudrais le rétrécir. J’ai tenté de le faire dans une css perso avec
#entete
height : 250 ;

mais ça n’a pas l’air d’être ça parce que ça ne fonctionne pas.
Merci d’avance pour votre aide

Jouer avec le bandeau
Jean Christophe Villeneuve - le 9 mars 2015

Hello

Bienvenue parmi les utilisateurs d’Escal.

Pour ta question, j’aurais tendance à dire qu’il est préférable d’inclure le titre de ton site dans ton image de bandeau. Tu pourras ainsi utiliser la police que tu souhaites et faire un joli titre bien intégré dans l’image.

Sinon, tu peux jouer sur la hauteur de #titrepage et sur le padding-top de #nom-site-spip

Jouer avec le bandeau
Sandrine MARINOT - le 10 mars 2015

Bonjour,

J’ai effectivement inclus le texte du titre dans l’image. J’ai aussi opté pour un layout fixe (1120 pixels) pour éviter les "blancs" (que je trouvais très laids) autour du bandeau.

Bonne chance pour ton site.

Jouer avec le bandeau
Jean Christophe Villeneuve - le 10 mars 2015

Attention car il existe encore beaucoup d’écrans en 1024px de large donc 1120px = ascenseur horizontal !

Pense à regarder ce que donne ton site avec des écrans moins larges que le tien ;-)

Jouer avec le bandeau
Elisabeth Durrmann - le 15 mars 2015

Merci pour ces réponses.
Mon pb venait en grande partie du fait que pour la mise en forme précédente, j’avais fait précéder le nom du site de 3 sauts de ligne.
J’ai quand même intégré une css perso pour cadrer le titre à gauche, et je vais peut_être intégré le titre du site au bandeau, ça permettra de limiter la hauteur.
Mon site est en ligne sous http://citoyendemaville.fr/

Jouer avec le bandeau
Jean Christophe Villeneuve - le 15 mars 2015

N’hésites pas à faire une image plus large, elle sera retaillée à ta largeur de layout et cela évitera les 2 bandes vides sur les côtés de ton image

Jouer avec le bandeau
olivier dehorter - le 20 mai 2014

Bonjour

Tout d’abord, merci pour ce plugin. Apres divers test, je me suis arrete sur ESCAL :-)

Mais evidemment j’aurais toutes une série de questions à vous poser pour bien en maitriser les tenants et aboutissant ;-)

en voici une :
sur notre ancien site, il y avait une série de raccourcis au niveau du bandeau.
Comment peut on faire cela sous escal ?

merci
olivier

Jouer avec le bandeau
Jean Christophe Villeneuve - le 20 mai 2014

Bonjour

Escal n’a pas ptévu ce cas de figure, il va donc te falloir toucher un peu au code.

Mais avant, peux-tu me dire quel type de raccourcis tu voudrais ?

Jouer avec le bandeau
dehorter olivier - le 20 mai 2014

merci pour cette réponse hyper rapide

il y en a de 2 types :
* certains font références à des articles du sites.Ce sont des raccourcis, ex : "vous avez trouvé ...’
* d’autres sont les liens vers les sites web d’unité de recherche ou de programmes de recherche : ex "Unité de recherche" ou "vigie nature"

merci

Jouer avec le bandeau
Jean Christophe Villeneuve - le 20 mai 2014

Alors il serait sans doute plus simple d’utiliser les blocs latéraux dédiés à ce genre d’usage comme "Accès direct" ou "Sites favoris" ou "Sur le web" ou un de blocs "Article libre"

L’idée est de mettre ces articles dédiés dans une rubrique cachée avec les mots-clés qui vont bien pour ne pas les voir ailleurs et dans ces articles, on met les liens qu’on veut.

Jouer avec le bandeau
olivier dehorter - le 21 mai 2014

bonjour

j’ai utilisé le mot-clé "acces-direct" comme proposé ;).
J’ai créé un nouvel article qui contient les raccourcis que j’ai intitulé "raccourcis" B-), et lui ai attribué le mot-clé "acces-direct", et hop :)

merci

Jouer avec le bandeau
Sandrine MARINOT - le 10 avril 2014

Bonjour,

Mon bandeau fait 1400 px, pourtant il ne remplit pas toute la largeur de la page. Pourquoi ? Comment modifier cet affichage ?

Notre site : http://www2.ac-lyon.fr/etab/colleges/col-69/duclos/

Merci d’avance !

Jouer avec le bandeau
Jean Christophe Villeneuve - le 10 avril 2014

Bonjour

En fait la largeur maxi de l’image du bandeau est définie par la valeur choisie pour la largeur du layout fixe (par défaut à 950px).

En plus, je te rappelle que tu peux centrer ton image dans la page de configuration du bandeau.

Jouer avec le bandeau
Vincent CORMARY - le 29 janvier 2014

Bonjour,

Comment peut-on rendre le bandeau ainsi que le menu horizontal parfaitement transparent de manière à voir l’image de fond ?
Je précise que lorsque j’utilise une image gif avec un fond transparent, c’est la couleur du menu horizontal qui s’affiche.
Merci par avance

Jouer avec le bandeau
Jean Christophe Villeneuve - le 29 janvier 2014

Désolé mais ça ne va pas être possible, sauf si tu veux tout le reste de tes pages transparent (sauf les blocs latéraux ou centraux)

Dans ce cas, un

#conteneur, #entete {
background: transparent !important;
}

dans /squelettes/styles/perso.css fera l’affaire

Jouer avec le bandeau
Vincent CORMARY - le 29 janvier 2014

re bonsoir,

Merci beaucoup pour ta réactivité.
Cela semble fonctionner pour l’image du bandeau mais pas pour le menu horizontal.
Je teste encore.

Jouer avec le bandeau
Jean Christophe Villeneuve - le 29 janvier 2014

ah oui, le menu, j’avais zappé !

alors ce sera

#conteneur, #entete, ul#menu, ul#menu li a {
background: transparent !important;
}

Jouer avec le bandeau
bazelot - le 26 novembre 2013

Je souhaiterais qu’en cliquant l’image du bandeau, celle-ci me dirige vers l’adresse d’un autre site (autre que le mien)
Merci

Jouer avec le bandeau
Jean Christophe Villeneuve - le 26 novembre 2013

Quelle idée ?
Et cela va à l’encontre de ce qu’on trouve sur tous les sites. Tu risques donc de déboussoler tes visiteurs.

Mais si tu y tiens, tu peux :

  • copier le fichier inc-bandeau.html de /plugins/auto/escal/inclusions vers /squelettes/inclusions (à créer si pas existant)
  • remplacer dans cette copie toutes les occurrences de
    #URL_SITE_SPIP
    par l’adresse du site cible

Mais j’insiste, je déconseille une telle pratique !

Jouer avec le bandeau
bazelot - le 26 novembre 2013

Désolé, cela fait partie de la charte du site académique (Créteil)
Règles techniques particulières relatives à l’hébergement de sites web dans l’académie de
Créteil
La page d’accueil de tout site doit comporter les éléments suivants :
· un titre permettant d’identifier l’établissement ou la structure à l’origine du site (nom et adresse
postale) ;
· le logo officiel de l’académie de Créteil comportant un lien vers la page d’accueil du site web
académique (http://www.ac-creteil.fr/) ;
· le nom du directeur de la publication et celui du responsable de la rédaction (le
webmestre) ;

Jouer avec le bandeau
bazelot - le 27 novembre 2013

Voici l’url de mon site
http://lafontaine.hol.es/
Merci

Jouer avec le bandeau
Jean Christophe Villeneuve - le 27 novembre 2013

Ok alors ce que j’ai dit plus haut reste valable
Pour être plus précis, il faut remplacer les 5 occurences
{{}<@ href="[(#URL_SITE_SPIP|parametre_url{lang,#ENV{lang}})]" title="<:escal:accueil:>" >
par
<@ href="http://www.ac-creteil.fr/" title="Site de l"académie de Créteil" >
dans le fichier copié (les "@" sont à remplacer par des "a", bien sur)
et hop !

Jouer avec le bandeau
bazelot - le 27 novembre 2013

Merci mille fois, cela fonctionne à merveille (il faut aussi remplacer les " par ’ dans le mot l’académie)

Jouer avec le bandeau
Jean Christophe Villeneuve - le 27 novembre 2013

Ah oui mais ça c’était involontaire :-P

Bonne continuation

Jouer avec le bandeau
bazelot - le 26 novembre 2013

Je me suis mal exprimé dans le post précédent, il s’agit de cliquer sur le logo contenu dans le bandeau.Il Mène pour l’instant sur l’accueil de mon site mais je voudrais qu’il redirige vers le site académique(charte du site)
Merci d’avance

Jouer avec le bandeau
Jean Christophe Villeneuve - le 26 novembre 2013

oui, je l’avais bien compris comme ça.
Quelle est l’url de ton site ?

Jouer avec le bandeau
Jean-Luc GUY - le 14 novembre 2013

Bonjour,
Un petit souci avec le titre : il commence au milieu du bandeau, Quand j’augmente la taille il s’écrit sur deux lignes. Peut-on le déplacer un peu plus à gauche ? J’ai testé dans le general.css, aucun effet.
http://www.printempspoetique.org
Peux-tu me donner la manip ?

Merci par avance

Jouer avec le bandeau
Jean Christophe Villeneuve - le 14 novembre 2013

Euh là je vois ton titre à gauche ... ?

Sinon, tu peux essayer avec ça dans
/squelettes/styles/perso.css

#titrepage {
   width: 1000px; /* valeur à régler selon tes souhaits */
}
#nom-site-spip {
   width: 100%;
}

Jouer avec le bandeau
Jean-Luc GUY - le 15 novembre 2013

Merci Jean-Christophe,
C’était un sale coup du cache du navigateur !
Avec mes remerciements et mes excuses
Jean-Luc

Jouer avec le bandeau
David L. - le 25 septembre 2013

Bonsoir,

Je poursuis ma formation sur l’espace bandeau.
Avec le plugin EscalV2 j’avais réussi à mettre un bandeau, pas très intuitif pour un néophyte, mais avec votre tuto c’était passé.
Suite à d’autres problèmes de compréhensions vous m’aviez invité à utiliser EscalV3... ce que j’ai fait. Par contre j’ai un problème d’affichage du bandeau (950x229) sur mon site en local. Dans les paramétrages d’escal, la miniature est chargée mais elle ne s’affiche pas sur le site(après validation, vidage des cache spip et du cache navigateur firefox).
Merci d’avance.

Cordialement,

David

Jouer avec le bandeau
David L. - le 25 septembre 2013

Je m’arrache le cheveu depuis hier... et comme par hasard, après un ultime vidage autistique du cache... mon bandeau s’affiche.
Gardez votre énergie pour mes prochains casse-tête pour débutant.

David

Jouer avec le bandeau
Jean Christophe Villeneuve - le 26 septembre 2013

La prochaine fois que tu as un doute, pense à vider le cache en supprimant le contenu du dossier /tmp/cache car parfois la fonction intégrée dans spip ne vide pas complètement le cache.

Jouer avec le bandeau
patrice landrevie - le 16 octobre 2013

Bonjour jean-Christophe

arccyclo.spipfactory.com

Dans le bandeau j’ai intégré une image, avec logo, titre et slogan, tout va bien.

Par contre j’ai intégré aussi un descriptif rapide du site avec configuration, Identité du site, et que je peux cadrer dans Escal, Généralités, bandeau (comme l’image du bandeau donc, à droite, au centre ou à gauche. Mais je trouve que les lettres à droite sont trop proches du bord de la page, ne pourrait-on pas avoir une petite marge et éventuellement justifier le texte ? Je suis peut-être trop gourmand.

En tout cas Merci pour ce squelette super.
Patrice

Jouer avec le bandeau
Jean Christophe Villeneuve - le 16 octobre 2013

Un truc de ce genre dans perso.css devrait te satisfaire :

#descriptif-site-spip {
   margin-left: 30%;
   margin-right: 5%;
   text-align: justify;
}

Jouer avec le bandeau
patrice landrevie - le 17 octobre 2013

Bonjour,

Comme cela peut paraître simple lorsque le patron est compétent et ça fonctionne comme je voulais, merci.
Patrice

Jouer avec le bandeau
jpm - le 1er septembre 2013

Bonjour, je voudrais savoir si il est possible d’utiliser les logos rubrique et article comme bandeau, et si oui comment, au passage si on pouvais utiliser ce-luis du site pour le bandeau de sommaire ce serais top . merci d’avance de votre aide

Jouer avec le bandeau
Jean Christophe Villeneuve - le 1er septembre 2013

Pour les rubriques de premier niveau (=secteur), oui, c’est déjà prévu :

"Un bandeau en fonction du secteur ?
Si votre dossier /squelettes/images/bandeau contient une image appelée rubriqueXX.jpg où XX est le numéro d’un secteur, alors ce secteur, ses sous-rubriques et leurs articles afficheront ce bandeau. Les autres afficheront le bandeau défini au-dessus. "

Il te suffit donc de copier le logo d’un secteur dans /squelettes/images/bandeau et l’appeler rubriqueXX.jpg où XX est le numéro du secteur.

Pour le reste, il faudrait travailler sur le fichier mais est-ce vraiment judicieux d’avoir un logo de bandeau qui change pour chaque rubrique ou article ?



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.86.37