Paramétrage du bandeau supérieur.
Le bandeau supérieur peut prendre plusieurs formes. Cet article vous explique comment ajouter un titre ou un logo et un ou des bandeaux dans le fond.
Mon site SPIP
Par défaut, si votre site est neuf, vous obtenez un "Mon site SPIP" en lieu et place du titre que vous souhaitez. Changez le nom de votre site en interne dans la configuration de SPIP. Ajoutez par la même occasion une description de votre site.
Des bandeaux-background css
Si vous êtes avez sélectionné le mode saisons, il prendra la couleur et l’image de background des quatres saisons : En ajoutant des css de surcharge, vous pouvez ajouter 4 bandeaux-background (un par saison). Si le mode saison n’est pas validé, alors un seul bandeau-background est à ajouter.
#header{
background-image:url(../../squelettes/images/fonds/mon-image.jpg)
}
un bandeau pour les rubriques, les articles
Vous pouvez ajouter une image bandeau particulière à chaque rubrique ou article. Vous devez au préalable autoriser l’ajout de documents aux articles / rubriques (configuration / contenu du site / Documents joints / Autoriser les documents dans les articles / rubriques). Ensuite, ajoutez une image à votre rubrique dans SPIP. Faites de même dans l’article si vous souhaitez le personnaliser. Dans l’article, si votre image est grande, elle sortira automatiquement du portfolio. Si elle est trop petite, vous devrez la sortir manuellement du portfolio. L’image se fixera en background du header et remplacera l’image du bandeau ajouté en css ci-dessus.
Une image/nom de site calculée
Le nom du site que vous voyez apparaitre est une image calculée et dessiné par SPIP (image typographique GD2). Vous pouvez changer la police d’écriture de cette "image/nom de site" en ajoutant un fichier "police.TTF" au répertoire "polices". Votre police d’écriture se doit d’être true type (TTF). Vous trouverez de nombreuses polices d’écritures GPL sur le Net [1].
Un logo de site
Si vous ajoutez un logo au site dans la configuration de SPIP, l’image/nom du site sera empillée par dessus les fonds en background. La description du site s’affichera dans le commentaire de survol du logo lors du passage de la souris. Jouez sur la transparence du logo si vous souhaitez voir les images ou les couleurs de fond.
Un empilement de couleurs et d’images.
Il est possible de jouer avec un empilement de couleurs et d’images. A titre d’exemple vous pouvez empiller de la couleur la plus en dessous au logo le plus au dessus :
Une couleurs de fonds à ajouter dans les css de surcharges de couleurs ou de saisons.
Un background css transparent tel un gif qui pourrait venir par dessus les couleurs précitées. La couleur de fond passant au travers du gif.
Une autre image pour la rubrique ou l’article, prioritaire sur le background css, toujours avec une zone de transparence laissant apparaître les couleurs du dessous.
Un logo ou un titre de site transparent qui s’affichent par dessus le tout.
A titre d’exemple sur cet article, vous voyez affiché les couleurs par défaut des css, une image transparente ajoutée sur l’article, et un logo transparent dessiné par SPIP. A noter que l’on n’a pas encore la transparence offerte par le behavior sur les fonds dans le header. Si le background du header est un png, il ne sera pas transparent sous Ie6. Un logo png sera par contre bien transparent sous ie6.
Graphicobidouillez bien. Bonne créa.
