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é