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 ;-).
Commentaires Forum fermé