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 1327 sites
Le bandeau
Article mis en ligne le 5 février 2009
dernière modification le 19 janvier 2017

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Une noisette pour le bandeau des pages.

Nom du fichier inc-bandeau.html
pages concernées Toutes les pages
mots-clés aucun

Cette noisette affiche une image de bandeau mais cette image n’est pas libre de droits et ne peut être utilisée que par les établissements de l’académie de Lyon.

Pour la remplacer, 2 solutions :

  • on modifie cette image dans ce fichier
  • on remplace cette image par le logo du site. Le remplacement est automatique dès que vous avez téléchargé le logo du site dans l’espace privé de votre site.

Dans les 2 cas, l’image aura un lien vers la page d’accueil.

De plus, le nom du site (celui que vous mettez dans l’espace privé) est affiché mais cet affichage est commandé par une ligne de code dans chacun des fichiers principaux (sommaire, rubrique, articles et pages spéciales). L’intérêt de procéder ainsi c’est qu’on peut donner un titre différent selon le contexte.

Avec EscalV3, dans la page de configuration d’Escal de l’espace privé, sous l’onglet "généralités", vous pouvez choisir la présence ou l’absence d’un élément tel que

  • le nom du site
  • le slogan
  • le descriptif du site, (ceux que vous mettez dans l’espace privé)

De plus la taille des caractères en pixels est configurable.

Pour remplacer l’image, il suffit de la téléverser par ftp et d’en indiquer le chemin dans la page de configuration.


Forum
Répondre à cet article
inc-bandeau
Patrick Del Tedesco - le 22 février 2016

Bonjour,

Le slogan du site :
Le déplacer vers le bas

Le descriptif rapide :
Qui défile, est-ce possible de le faire sur toute la longueur du bandeau ?

Le site : http://limvelo-v5.le-pic.org/?lang=fr
Merci pour vos réponses
Patrick

inc-bandeau
Jean Christophe Villeneuve - le 22 février 2016

Bonjour

On peut déplacer le slogan en rajoutant ce code dans perso.css

#slogan-site-spip {
   padding-top: 150px;
}

par exemple mais à mon avis, il est toujours nettement préférable d’inscrire ce genre de texte directement sur l’image du bandeau comme tu l’as fait pour le titre du site. On est beaucoup plus libre dans le choix des positions, couleurs, polices, ...

Pour le texte qui défile, un
#titrepage
width : 100% ;

dans perso.css et hop ! (Mais bon sang que c’est moche ces textes qui défilent grâce à la balise marquee ! :-( )

Tu as vu cet article ?

inc-bandeau
Patrick Del Tedesco - le 22 février 2016

Bonsoir Jean Christophe,
En fait le site est en construction, non, je n’ai pas lu cet article, je vais de suite le consulter.
Merci
Patrick

inc-bandeau
david - le 20 mars 2015

Bonsoir voila j’ai changer la couleur du bandeau mes je voudrais mettre le titre sur le bandeaux car l’ecriture de basse et blanche alors que j’ai mis le bandeaux blanc je souhaite mettre l’ecriture en noir comment faire svp merci a vous

inc-bandeau
Jean Christophe Villeneuve - le 20 mars 2015

Hello

On peut surcharger presque tous les éléments avec un peu de css. Pour cela, on va :
- créer un dossier /squelettes à la racine du site spip
- dans ce dossier un crée un sous-dossier /styles
- enfin, on crée un fichier perso.css dans /squelettes/styles

Ensuite on peut mettre des règles css dans perso.css qui vont surcharger celles de Spip et d’Escal.

Dans ton cas, on va mettre dans le fichier perso.css ceci

#nom-site-spip{
color: #000000;
}

inc-bandeau
André Montagne - le 21 janvier 2015

Bonjour,

Je souhaiterais régler la hauteur du bandeau et l’ajuster par exemple à celle de l’image que j’y ai mise. Est-ce possible ? Merci

inc-bandeau
Jean Christophe Villeneuve - le 21 janvier 2015

Hello

Bah c’est automatique !

Mais tu utilises l’option 3 qui permet d’afficher une image sur toute la largeur du site et en-dessous les titre, slogan et descriptif du site si on veut les afficher.

inc-bandeau
André Montagne - le 21 janvier 2015

Pourtant ça n’a pas l’air de fonctionner, pour l’instant...

inc-bandeau
Jean Christophe Villeneuve - le 21 janvier 2015

Si si !
Tu as bien ton image et dessous le titre de ton site !

inc-bandeau
André Montagne - le 22 janvier 2015

Je préférerais avoir le le nom à côté.

inc-bandeau
Jean Christophe Villeneuve - le 23 janvier 2015

Pas possible avec cette option mais si tu choisis l’option 2 et que tu mets cette image comme logo du site, ça doit le faire.

Sinon, on verra ça mardi en formation ;-)

inc-bandeau
WILLOT Pierre - le 25 mars 2014

Bonjour,

Je suis impressionné par les possibilités proposées par le plugin Escal.
Je constate que le Nom du site et le descriptif se met au milieu du bandeau et j’aimerais le Nom du site commence juste après le logo éventuel.

Après des recherches sur le plugin et dans les forum je n’ai rien trouvé. Comment je peux faire ?

Merci
Piwi

inc-bandeau
Jean Christophe Villeneuve - le 25 mars 2014

Bonjour

Tu as une URL que je regarde ça précisément ?

inc-bandeau
Piwi - le 26 mars 2014

Merci pour la réponse.

Voici : http://ffeub.be

pour l’instant le titre principale est FFEUB mais quand je mets un texte plus grand comme Fédération Francophone d’Échasses Urbaines Belge, tous les mots s’aligne les uns en dessous des autres, ce qui n’est pas ce qui est rechercher.
Tout au plus on prend le titre complet sur deux lignes.

Merci

Piwi

inc-bandeau
Piwi - le 26 mars 2014

Bonjour,

l’url est : ffeub.be

  • Pour l’instant j’ai mis comme titre FFEUB mais j’aimerais mettre le titre complet Fédération Francophone des Échasses Urbaines Belge. Mais quand je met les termes au complet, le tout s’affiche en 5 lignes.

Merci
Piwi

inc-bandeau
Jean Christophe Villeneuve - le 26 mars 2014

ok, j’ai vu

Alors il faut que :

  • tu crées, à la racine de ton spip, un dossier "squelettes" dans lequel tu crées un sous-dossier "styles"
  • dans ce dossier /squelettes/styles, tu crées un fichier perso.css avec dedans
    #titrepage {
     width: 1200px;
    }
    #nom-site-spip {
     width: 1200px;
    }

    et ton titre s’affichera sur une seule ligne mais attention aux petits écrans, notamment si tu rajoutes un logo à gauche.

Je conseillerais plutôt de te faire une jolie image pour ton bandeau avec logo, titre du site et ce que tu veux et d’afficher uniquement cette image dans le bandeau. Comme ici, quoi.

inc-bandeau
Piwi - le 27 mars 2014

Merci beaucoup pour la solution.

Dans ce fichier perso.css , me peut-on pas dire au titre de se mettre à gauche sans pour autant fixé la largeur en pixel.
Ça permettrait d’être plus adaptable pour les différents écrans ?

Merci

Piwi

inc-bandeau
Jean Christophe Villeneuve - le 27 mars 2014

ok alors on remplace dans perso.css par

#titrepage {
width: 100%;
float: left;
}
#nom-site-spip {
width: 100%;
margin-left: 50px
}

et ça devrait le faire : titre à 50px du bord gauche sur une ou 2 lignes (ou plus) selon la taille de l’écran et du titre

inc-bandeau
Pierre WILLOT - le 1er avril 2014

Merci,
Ca marche, c’est génial

Bonne journée

Piwi

inc-bandeau
Pierre WILLOT - le 8 avril 2014

Bonjour,

Je reviens vers vous.
Le fichier perso.css mets bien le titre à gauche mais avec le logo le titre se met en dessous du logo et pas à côté sur la même ligne.
http://cheminsetmemoires.atimbli.net

comment puis-je régler ce petit problème

Merci
Piwi

inc-bandeau
Jean Christophe Villeneuve - le 8 avril 2014

Ah ben oui c’est normal, y’a plus la place. Donc on remplace par

#titrepage {
width: 80%;
float: right;
}
#nom-site-spip {
width: 100%;
}

et si ton logo grossit, diminue la valeur du width pour titrepage

inc-bandeau
david berland - le 4 février 2010

Bonjour,

bon alors une nouvelle question pour toi aujourd’hui : j’ai décidé de modifier inc-bandeau pour avoir à la place d’une image une animation en flash. J’ai trouvé du code sur le net, je l’ai appliqué, je l’ai un peu modifié mais je n’arrive pas à visualiser mon animation :/
Est ce que tu pourrais m’aider stp ?

Le site : http://laplumemusique.free.fr
l’animation est dans le dossier image du plugin (oui, oui, je sais, je devrais créer un dossier squelettes ;-) ).

inc-bandeau
david berland - le 4 février 2010

ahaahhhh, ça avance, j’arrive à faire afficher une partie de l’animation, il y avait un problème dans le chemin d’accès. Par contre il me manque une partie de l’animation, je trouve ça bizarre parce que quand je l’ouvre toute seule avec Firefox elle est en entier ... une idée ? ;-)

inc-bandeau
Jean Christophe Villeneuve - le 8 février 2010

Moi je vois un diamant qui tourne entre 2 cercles.

Et quand j’ouvre .../images/logo2.swf j’ai pareil.

Il manque quoi ?

Et oui, je confirme, fais toi un dossier /squelettes !!!:-((

inc-bandeau
nova06 - le 7 décembre 2009

Bonjour,
j’ai installé votre squelette sous spip 2.0.10. Tout fonctionne très bien y compris la personnalisation.
J’ai cependant une question :
je souhaite faire disparaitre du bandeau le nom du site que j’ai indiqué dans la configuration de spip, sans le faire disparaitre des onglets du navigateur.
J’ai cherché dans inc-bandeau du squelette puis dans inc-entête de spip et j’ai toujours le nom qui apparait, même après avoir vidé le cache.
Pouvez-vous me dire où chercher s’il vous plait pour que je puisse avoir la même chose que votre site ?
Merci

inc-bandeau
Jean Christophe Villeneuve - le 7 décembre 2009

très simplement en rajoutant

#titrepage {
       display: none;
}

dans le fichier perso.css, à créer dans le dossier /squelettes si ce n’est déjà fait.

Et hop, le titre a disparu sur toutes les pages ;-)

inc-bandeau
- le 8 décembre 2009

Merci beaucoup pour l’info.

inc-bandeau
papyhm - le 28 septembre 2009

Bonjour et merci pour ce joli squellette sur lequel je me fais les "dents". Je suis sur un site local, spip 2.03, et le premier pas a été de faire l’image bandeau. J’ai réalisé une image que j’ai nommée bandacad.jpg et, oh surprise, c’est toujours l’ancienne qui s’active,elle est bien dans le repertoire /squelettes/image/bandacad.jpg
et si je supprime ce fichier, alors sur le bandeau apparaît un petit cadre avec un croix...vraiment, c’est à ne rien y comprendre.
La taille du fichier jpg est-elle limitée ? Par ailleurs, je vous signale qu’en cliquant sur "contact" au bas de page, j’ai une page d’erreur. Merci de m’éclairer, c’est sympa.
Cordialement Papyhm

inc-bandeau
Jean Christophe Villeneuve - le 28 septembre 2009

Un papy qui se fait les dents ... :-))

Bon pour la page contact, c’est sans doute un paramètre de php ou d’apache qui faut changer mais là, ça dépasse mes compétences. En ligne, ça devrait marcher. Tu as bien renseigné l’adresse du webmaster dans l’espace privé ?

Pour l’image de bandeau, as-tu vidé le cache spip, le cache navigateur et recalculé la page ?

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