Un logo dans le bandeau...

... en bidouillant la feuille de style
jeudi 1er décembre 2005
par  _Sylvain_
popularité : 28%

À propos

- Compatibilité

  • version de SPIP : toutes
  • version de Sarka-SPIP : 1.1.1

- Fichiers ou dossiers à créer

  • mon-logo.gif/.png/.jpg/.truc

- Fichiers ou dossiers à modifier

  • style.css

Objectif

De (très) nombreux utilisateurs du squelette ont exprimé leur souhait d’insérer un logo dans le bandeau en tête de page. Je reconnais qu’une petite image perso dans l’en-tête peut être du plus bel effet...

A terme, je compte modifier le squelette pour afficher dans le bandeau l’image définie comme "logo standard des rubriques" depuis l’interface privée de SPIP [1]. En attendant, je propose ici une solution simple à mettre en oeuvre : un seul fichier (style.css) doit être modifié.

Mise en oeuvre

- Création d’un répertoire /images et chargement du logo

Vous pouvez créer un nouveau dossier dans lequel sera chargé votre logo : par exemple /images, dans le répertoire /squelette-sarka-spip. Dans la suite, nous supposons que vous avez chargé l’image mon-logo.gif dans ce dossier.

- Modification de la classe a.bandeau

Seule la classe a.bandeau doit être modifiée dans le fichier style.css pour que votre logo s’affiche dans le bandeau. Il s’agit d’imposer l’image mon-logo.gif comme image de fond (backround-image) de cette classe, de la positionner correctement, et d’ajuster la taille du bandeau :

a.bandeau {
  /*bandeau contenant le titre du site*/
  background-image: url(../images/mon-logo.gif);
  background-position: 5px 5px;
  background-repeat: no-repeat;
  background-color: #6262A4;
  height: 110px;
  margin: 0px;
  font-family: Verdana,Helvetica,Arial,sans-serif;
  padding: 0px 10px 0px 0px;
  font-size: 50px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: right;
  display: block;
}

Ce code doit être adapté à la hauteur de votre logo. Ici, pour un logo dont la hauteur est de 100 pixels et une marge de 5 pixels entre le cadre et l’image (background-position : 5px 5px ;), il faut imposer une hauteur de bandeau à 110 pixel (height : 110px ;).

Donc, à vous d’adapter :

  • background-position suivant les marges souhaitées
  • height suivant les marges imposées et la hauteur du logo

Voili voilou. Bonne intégration ;-).


[1toute la difficulté est de ne pas imposer à l’ensemble des rubriques ce logo par défaut, qui ne devra s’afficher que dans l’en-tête


Commentaires  forum ferme

Logo de Andrea
Affichage du bandeau selon résolution
lundi 14 juillet 2008 à 02h55 - par  Andrea

Bonjour,

Je ne sais pas si c’est le bon endroit pour poser ma question, je suis un peu perdue dans l’organisation des forums sous sarka-spip^^
Voilà : J’ai installé Spip 1.9.2d et sarka spip 2.0.2 et je trouve que c’est très réussi. L’arrière plan de mon bandeau est une photo, ce qui est du plus bel effet. Il est facile de paramétrer la hauteur du bandeau en pixel en fonction de la photo choisie (dans style.css). Par contre, il me faut adapter ma feuille de style en fonction de la résolution de l’écran du visiteur. Les paramètres qui doivent varier dans style.css sont l’image(background : url) et l’hauteur(height) du bandeau. Est-ce que le javascript est le meilleur outil pour ça ? Pouvez-vous m’aider avec des bouts de code, et l’emplacement exact où ils s’insèrent (je suis débutante) Merci pour votre aide.

Logo de patheo
mercredi 8 octobre 2008 à 11h26 - par  patheo

Salut !
merci pour la réponse à la première question.
pour la deuxième, je m’explique : le calendrier de l’agenda comporte une une ligne qui précise le mois en cours (ex octobre 2008) c’est la couleur de ce texte (octobre 2008) que je veux changer. Tout en espérant que j’ai su me faire comprendre, je te remercie

Logo de patheo
mercredi 8 octobre 2008 à 09h05 - par  _Eric_

Salut,

A la question 1 je réponds : ce n’est pas possible.

A la question 2 je réponds : de quelles couleurs parles tu, je ne comprends pas ?

++

Logo de patheo
mardi 7 octobre 2008 à 19h46 - par  patheo

salut j’ai deux problèmes : le premier c’est que je ne sais pas comment reduire l’affichage de mon site pour qu’il n’occupe pas tout l’écran.

Le second c’est que je veux changer la couleur nus mois de mon calendrier mais je n’y arrive pas. voici lien de mon site www.campussiens.webou.net

jeudi 17 juillet 2008 à 22h32

Salut Patheo,

Je crois qu’il existe un plugin mais relativement vieux et dont je ne connais pas la compatibilité avec Sarka. Par contre, il est possible de faire cela simplement avec un forum sur un article donné. Tu peux même définir une page spéciale en créant un squelette pour cet article.

A+

Logo de patheo
mardi 15 juillet 2008 à 18h11 - par  patheo

salut ! je veux ajouter un livre d’or à mon site conçu avec spip 1.9.2d et le plugin sarkaspip. comment faire ?

Logo de misterfourchette
Un logo dans le bandeau...
jeudi 10 avril 2008 à 21h19 - par  misterfourchette

Bonjour ;
Comment peut on mettre vers la droite ou centre le bandeau (image) par rapport a la page web.
merci d’avance

Un logo dans le bandeau...
jeudi 22 février 2007 à 14h34

Excellent ...ca c’est explique , ca fonctionne et on peut mettre en oeuvre immédiatement
FELICITATTIONS

Un logo dans le bandeau...
samedi 13 janvier 2007 à 19h56

Après avoir inséré un logo en suivant la manip ci-dessus exposée, j’aimerai centrer
en hauteur le nom du site.

Logo de nova06
Un logo dans le bandeau...
mardi 26 décembre 2006 à 14h48 - par  nova06

Bonjour,

après avoir avancé sur le site, j’aimerais si possible intégrer un bandeau animé soit en gif soit en swf.

Comment dois-je m’y prendre et quel format utiliser pour ne pas alourdir ma page d’accueil.

Merci de vos précieux conseils.

nova06

Logo de nova06
mardi 26 décembre 2006 à 17h35 - par  nova06

merci m’sieur.

Logo de nova06
mardi 26 décembre 2006 à 16h36 - par  _Eric_

Salut,

Sans hésiter j’utiliserais un gif animé plutôt qu’un swf étant donné que ce bandeau sera sur toutes tes pages.

Voila
A+

Logo de nova06
Un logo dans le bandeau...
lundi 18 décembre 2006 à 19h49 - par  nova06

Bonjour,

super géant votre squelette. Je viens tout juste de le mettre en ligne pour un ami.
J’ai deux questions, qui je crois n’ont pas été posées.

1- Que dois-je faire pour avoir le nom du site sur l’onglet de navigation, alors que je ne l’ai pas indiqué dans l’interface d’admin de spip ?

Pourquoi ? Parce que le nom du site apparaissait sur mon bandeau en jpg et que ça le rendait disgracieux.

Actuellement, j’ai le favicon + [] suivi du nom de la rubrique.

2- J’ai un problème avec les boutons d’admin "Modifier cette rubrique" et "Racalculer cette page" qui se trouvent très à droite de mon conteneur.

Comment puis-je les ramener au coin droit supérieur de mon bandeau ? Apparemment ce serait dans le fichier "spip_admin.css" mais je ne sais pas comment m’y prendre.

Merci de vos réponses.

Logo de nova06
lundi 18 décembre 2006 à 21h07 - par  nova06

Merci, en fait je viens de trouver l’astuce pour le 1er. j’ai fait exactement la même chose.

Pour le second, j’ai modifié le spip_admin.css en ramenant les deux boutons sur la gauche. Ca m’est utile lorsque je suis sur un portable.

Merci de ta réponse Xavier.

Logo de nova06
lundi 18 décembre 2006 à 20h42 - par  _Xavier_

Salut nova06

Une solution à ton 1er probleme peut etre la suivante :
1. Modifier le fichier inclusions/bandeau.html : met la ligne

<div class="nom-site">[(#NOM_SITE_SPIP)]</div>

en commentaire

2. remplir le nom du site dans l’espace admin

Pour le second problème : Est-ce vraiment un problème dans la mesure ou seul toi peux le voir ?

à bientôt

SarkARchimeD

Logo de Albenic
Le logo résiste
jeudi 9 novembre 2006 à 16h52 - par  Albenic

Bonjour,
Je suis sous spip 1.9 avec le squelette sarka-spip 1.2. J’ai suivi les instructions données et cela résiste.
J’ai édité depuis mon navigateur la feuille de styleset tout est bon, j’ai même tapé l’adresse où se trouve l’image et elle apparait parfaitement mais en revanche pas moyen de l’avoir dans le bandeau.
Si quelqu’un pouvait ne serait-ce que jeter un coup d’oeil pour me donner un début de piste de solution.
J’ai installé en local (avec wamp) spip 1.9 avec le squelette sarka-spip 1.9 pour voir si c’était mieux mais j’ai le même problème.
Par avance merci, Albenic.
mon site

Logo de Albenic
lundi 7 janvier 2008 à 07h53 - par  _Toufik_

Bonjour,

attention, là aussi il s’agit d’une ancienne version de sarka (non plugin)

Rendre SARKA paramétrable avec 30 mots-clés

Dans cette logique, pour certains utilisateurs, nous avons choisi le squelette SARKA (Version Sarka-SPIP 1.2.1c07 (rev52) installée avec SPIP 1.8.3)

tout ce qui concerne les mots-clés de la version sarka_spip 2.0.2 :

- Créer le groupe de mots-clés : squelette_habillage

- Dans l’espace privé :

  • Activer l’Interface complète
PNG - 4.8 ko
Interface
  • Cliquer sur : Edition puis sur Mots-clés
PNG - 4.9 ko
Accès au menu des mots-clés
  • Cliquer sur : Créer un nouveau groupe de mots
  • Les mots-clés de ce groupe peuvent être associés :
    • aux articles
    • aux rubriques
  • Les mots de ce groupe peuvent être attribués par :
    • les administrateurs du site
    • les rédacteurs (éventuellement)

- Dans ce groupe, créer les mots-clés :

  • Cliquer sur : Créer un nouveau mot-clé
  • Mots-clés nécessaires à SARKA-Spip :
Mot-clé Associé à Descriptif
Agenda une rubrique permet d’afficher l’agenda des événements
Album_une des articles permet de choisir l’album qui sera présenté dans la splickrbox
Annonce une rubrique permet d’afficher une annonce dans la page d’accueil
Edito des articles permet d’afficher l’édito sur la page d’accueil
Galerie une rubrique permet d’afficher la galerie des photos
Licence_site [1] - permet de définir la licence du site
PNG - 4.4 ko
Squelette habillage

- Effectuer un vidage du cache (Configuration >> Vider le cache)

- Pour aller plus loin :

Avec le mot-clé Licence_site, on peut ajouter un autre texte dans le footer (peut servir pour un site qui n’a pas de licence à ajouter).

PNG - 1.4 ko
Footer
Site web : MSLP-Dijon
Logo de jacques
dimanche 6 janvier 2008 à 23h29 - par  jacques

pas grave , je m’en doutais un peu
cependant une question reste en suspens
sur le site http://p7app.geneve.ch:8007/spip/article.php3?id_article=277 , on parle de la géométrie variable de sarka avec ses 30 mots clés,peut-on encore les utiliser sous sarka 2.0.2 comme p.ex le no_sommaire ou du moins,en cherchant un peu dans la programmation,sa philosophie,sans trop foutre le reste sans dessus dessous ? Car certaines idées nous convenaient pour notre site.

Logo de jacques
dimanche 6 janvier 2008 à 23h08 - par  _Toufik_

désolé mais en fait cet article n’est plus accessible et il est obsolète, c’était pour la version non plugin de sarka
il y a eu pas mal de changements depuis

Logo de jacques
dimanche 6 janvier 2008 à 23h01 - par  jacques

Je n’ai fait qu’un copy coller
à partir de mon naviguateur sans plus.

Logo de jacques
dimanche 6 janvier 2008 à 22h57 - par  _Toufik_

dans l’adresse que vous postez il y a 1 espace entre .php et ?

l’adresse est

http://site.sarka-box.net/spip.php?article202

Logo de jacques
dimanche 6 janvier 2008 à 22h49 - par  jacques

http://site.sarka-box.net/spip.php?article202

ici sur le site Sarka,pas ailleurs,
me donne une erreur 404
dans article sur sarka que vous mentionnez dans votre post et vers lequel vous me renvoyez.

Par contre le site de grenoble , il fonctionne tres bien , de plus très joli comme site

dimanche 6 janvier 2008 à 22h46

Non,malentendu,notre site n’a pas encore son logo,c’est ici sur le site sarka que j’ai relevé ce lien invalide d’ailleurs un autre l’avait vu aussi avant. Si ce lien fonctionnait, il m’aurait été utile.

dimanche 6 janvier 2008 à 16h54 - par  _Toufik_

Le lien "un logo dans le bandeau" donne une erreur 404 ...oups !

notre site est : www.estha.11vm-serv.net/htdocs/ toutefois ce probleme ne nous appartient pas ,cette errreur 404 est une erreur rencontrée sur le site de sarka lors de la consultation.

je ne vois pas l’erreur en accédant à votre site,

avez-vous téléchargé un logo pour votre site ?

- Espace privé
- Configuration
puis ajouter un logo (en haut à gauche)

@+

Site web : MS.LP-Dijon
Logo de _Toufik_
dimanche 6 janvier 2008 à 16h44 - par  _Toufik_

dans le post du 9.11.2006 le lien est invalide

S’il s’agit des posts du 09/11/2006 dans ce fil de discussion, ils ont l’air de fonctionner tous

site de grenoble

article sur sarka

@+

Site web : MSLP-Dijon
Logo de jacques
dimanche 6 janvier 2008 à 15h55 - par  jacques

dans le post du 9.11.2006 le lien est
invalide

Logo de jacques
dimanche 6 janvier 2008 à 15h54 - par  jacques

notre site est :
www.estha.11vm-serv.net/htdocs/
toutefois ce probleme ne nous appartient pas ,cette errreur 404
est une erreur rencontrée sur le site
de sarka lors de la consultation.

Logo de jacques
dimanche 6 janvier 2008 à 14h20 - par  _Toufik_

Bonjour

c’est possible d’avoir le lien du site ?

Merci

@+

Site web : MS.LP-Dijon
Logo de jacques
dimanche 6 janvier 2008 à 14h05 - par  jacques

Le lien "un logo dans le bandeau"
donne une erreur 404 ...oups !

Logo de domy22
mardi 14 novembre 2006 à 17h26 - par  domy22

Bonjour,

J’utilise aussi le squelette Sarka depuis quelques jour pour un site associatif, mais je n’ai pas retenu la même démarche pour intégrer un logo : je me suis inspiré de ce qui était dit pour le logo standard de SPIP 1.9.

En conséquence, j’ai simplement copié le contenu de inc-entete.htlm dans bandeaux.htlm, en remplaçant tout le code d’origine par celui copié.

J’ai aussi supprimé le formulaire de recherche prévu en fin des codes html, et ensuite il m’a fallu faire certains tests de taille de logo (jpg) pour occuper la totalité de la largeur.

en réso 1024, j’ai trouvé bon la taille de logo 965x150 pixels à 72 dpi, et ça fonctionne correctement (voir site http://www.sav-billard.org )

Par contre, question complémentaire que je ne sais pas traiter : si l’ordinateur est règlé en 1024, pas de pb, mais s’il est réglé sur une autre définition, le logo dépassera (cas 800x600) ou sera trop court (résos sup à 1024).

Existerait-t-il un moyen pour affecter dynamiquement dans la boucle d’affichage une donnée contextuelle à la fonction "image_réduire". C’est une idée ? qui vaut ce qu’elle vaut, mais je ne sais pas faire.

Autre application : quand j’ai testé le squelette pour la première fois il y a quelques jours, j’ai été surpris que les images que j’intégrais "centré" dans les articles apparaissaient tous en petit format et à gauche : c’est aussi "image_reduire" qui avait encore frappé dans la feuille article.html. Là aussi, j’ai modifié à 480 px de large maxi, ce qui va bien pour la largeur des articles.
Mais comme ci-dessus, si la réso du poste client est inf à 1024, les articles se décalent vers le bas pour pouvoir s’afficher dynamiquement en plus large que prévu. La même idée que décrite avant pourrait-elle s’appliquer ?

Et pis pareil pour imprimer.html peut-être ?

Salutations
Domy

vendredi 10 novembre 2006 à 20h27

Merci d’avoir pris le temps de lire le message et surtout de m’avoir donner ce lien.
Grace à lui, j’ai mon logo dans le bandeau. Merci encore, Albenic.

jeudi 9 novembre 2006 à 19h44

Salut,

Désolé pour tes efforts vains mais cette contribution est obsolète, donc tu n’y peux rien. On est en train de rafraichir le site petit à petit mais la route est longue.

Tout d’abord je te conseille d’utiliser la version 1.9.0 du squelette avec la version SPIP 1.9.1. Tu partiras sur une version à jour et maintenue. Nous devrions en outre sortir une version 1.9.1 de Sarka-SPIP d’ici 10 jours.

Ensuite pour ton logo la marche à suivre est donnée dans l’article Un logo dans le bandeau. Occupe toi uniquement du mot-clé et du logo, les fichiers squelette sont aujourd’hui codés comme indiqués dans l’article.

Voila
A+

Logo de triagoz
Un logo dans le bandeau...
mercredi 8 novembre 2006 à 14h57 - par  triagoz

Merci..super...mais on en demande toujours plus....y a t il un moyen pour que "mon-logo.gif" puisse me diriger vers un autre site. En bref créer un lien web sur cette image ???

Et tant qu’on y est, placer plusieurs images et donc plusieurs liens.....

Logo de triagoz
mercredi 8 novembre 2006 à 21h19 - par  _Eric_

Salut,

Dans le fichier d’include bandeau.html tu as le lien html suivant :

<a class="bandeau" href="#URL_SITE_SPIP" title="<:accueil_site:>" <BOUCLE_logo-site-taille(MOTS){titre=logo_site}>
[style="height:(#LOGO_MOT||hauteur)px;"]</BOUCLE_logo-site-taille>>

Il suttit de remplacer URL_SITE_SPIP par l’url de ton choix.

A+

Logo de Christian
Un logo dans le bandeau...
dimanche 30 avril 2006 à 21h00 - par  Christian

J’ai fait c’était indiqué et le résultat est satisfaisant.

Maintenant, je souhaite centrer le titre en hauteur dans le bandeau. Quelle commande dois-je intégrer ?

Merci de votre réponse

Logo de jpa
Un logo dans le bandeau...
dimanche 12 mars 2006 à 09h12 - par  jpa

SUPER BOULOT

j ai un petit souci,comment faire pour mettre le nom de mon site dans le bandeau
à doite à la place de "mon site spip" ?
merci
jpa

Logo de helias
lundi 12 février 2007 à 08h59 - par  helias

Il faut cliquer sur le bouton "configuration" lui même et non pas l’un des sous-boutons. °)

Logo de helias
vendredi 9 février 2007 à 19h20 - par  _Sylvain_

Bonjour,

Pour changer le titre du site, depuis l’espace privé, cliquer sur Configuration, et non sur les onglets qui apparaissent lors du survole.

Ensuite, indiquer le nom du site dans le champs... "nom de votre site".

Tout simplement ;-).

jeudi 8 février 2007 à 21h53

Bonjour,

Bien que connecté en tant qu’administrateur, je ne vois pas l’onglet permettant de modifier le tire du site. L’onglet "Configuration" se décline en "gestion des langues" "maintenance du site" et "vider le cache" mais c’est tout.

Existe-t’il un autre moyen pour changer le titre du site ?

Merci

cordialement

Yves

Logo de Smellup
mardi 28 mars 2006 à 21h12 - par  Smellup

Salut,

Il faut etre administrateur du site pour avoir le menu de configuration du site. Donc logue toi avec ton compte administrateur et tu le verras apparaitre.

Si tu as encore des problèmes n’hesite pas à renvoyer un message

A+

Logo de almax
mardi 28 mars 2006 à 18h55 - par  almax

Bonjour,

Je suis dans le même cas que JPA. Je ne trouve pas l’onglet de configuration du site !
J’ai récupéré le dernier SPIP et le dernier squelette SARKA.
Merci de votre aide.

Logo de jpa
dimanche 12 mars 2006 à 20h22 - par  jpa

c’est bon
euréka
merci

Logo de jpa
dimanche 12 mars 2006 à 14h59 - par  _Eric_

Tu dois être connecté en tant qu’administrateur pour voir cette partie de l’interface privée. Mais je me demande si on est sur la même longueur d’onde. Si tu patuges encore donne moi l’adresse de ton site ou ton adresse e-mail je t’enverrai l’image de l’onglet dont je parle.

A+

Logo de jpa
dimanche 12 mars 2006 à 12h46 - par  jpa

etrange cet onglet contenu du site dont tu parles n ’apparait pas
merci

Logo de jpa
dimanche 12 mars 2006 à 09h54 - par  _Eric_

Salut,

Le squelette utilise le nom du site que tu choisis dans l’interface privée, menu "Configuration", onglet "Contenu du site", item "Nom de votre site". Change la valeur ici avec le nom de ton site, retourne sur ta page, recalcule la et tu verras apparaitre le nom de ton site dans le bandeau.

A+

Logo de Pierre
Un logo dans le bandeau...
mardi 14 février 2006 à 03h35 - par  Pierre

Bonjour,

Cette modif est elle compatible avec la 1.1.2 ?
j’ai tenté une modif comme vous l’expliquez sur cette version mais elle ne semble pas fonctionner.

Merci

Logo de Pierre
dimanche 12 mars 2006 à 22h10 - par  _Toufik_

Voir cet article aussi :
Un logo dans le bandeau

Logo de _Toufik_
dimanche 12 mars 2006 à 22h07 - par  _Toufik_

Salut

oui ça fonctionne sans problème avec sarka 1.1.2

voir exemple

Site web : MSLP
Logo de aquadid
Un logo dans le bandeau...
mercredi 18 janvier 2006 à 13h00 - par  aquadid

Bonjour,
tout d’abord bravo pour Sarka :-)

J’ai qq petits soucis :

j’ai voulu utilisé le logo pour mettre une
image à la place du nom du site.
Le nom du site apparait par dessus mon bandeau image !
Comment faire pour le faire disparaitre ?

2eme point toutes les images que je colle dans mes articles apparaissent sous forme de vignettes !
Comment puis je faire pour avoir un affichage en taille réel de mes images

j’utilise spips 1.8.2e
et sarka 1.1.2 avec le correctif

merci

Logo de christine
lundi 23 octobre 2006 à 22h27 - par  christine

Une fois qu’on a réussi à mettre un premier logo, on en demande toujours plus... J’ai centré mon nom de site, mis un logo à sa gauche et j’en voudrais un à droite... C’est un peu gourmandise mais si vous pouviez m’aider...
Merci d’avance

Logo de christine
mardi 31 janvier 2006 à 21h43 - par  rosebud

bonsoir

je réponds à la question 1

apparement dans le tutorial plus haut il est dit de modifier la feuille de style en fonction de la taille de ton logo ici

à plus