Des images de fond
Quelques sélecteurs de la page d'accueil et de la page des archives qui peuvent intégrer (de façon intéressante) un fond (surface ou image). On peut donc y ajouter la propriété "background" :
body (corps de la page)
container (conteneur principal)
content (conteneur des articles)
leftbar (colonne de menu de gauche)
rightbar (colonne de menu de droite)
topbar-logo (bandeau supérieur)
topbar (bandeau supérieur)
blogbody h2 (date des articles) :
blogbody h3 (titre des articles) :
blogbody .itemfooter (infra articles) :
navlinks title (titres du menu) :
navlinks ul (articles du menu) :
calendar (calendrier) :
Pour certains sélecteurs l'image n'est pas à proprement parlé une image de fond. Mais cette technique permet de façon simple d'ajouter une image à un élément.
Des fonds transparents
Si l'on choisit d'afficher une image en fond de page, le texte risque de ne pas apparaître avec suffisamment de relief.
Par ailleurs une surface améliorant la lisibilité du texte cacherait une grande partie de l'image.
Une astuce simple permet de concilier ces deux impératifs.
Il suffit de créer à l'aide d'un logiciel de graphisme une surface colorée transparente et carrée d'environ 100 pixels de côté. Cette image sera ensuite sauvegardée au format png.
copie d'écran Paint.Net V3.5
L'image ainsi créée sera intégrée en tant qu'image de fond à l'élément de la page où se trouve le texte, par exemple "container" :
#container { background: url(URL de l'image) repeat;}
Nota : on a utilisé ici le logiciel gratuit et téléchargeable Paint.Net V3.5, mais n'importe quel autre logiciel de graphisme gérant la transparence conviendrait.
Des colonnes de même hauteur (2)
Une technique simple permet d'obtenir des colonnes de même hauteur. Elle est toutefois soumise à condition.
On donne une couleur de fond à l'élément "container" et une autre à l'élément qui aura la hauteur la plus longue. Ainsi, l'élément auquel on n'aura pas attribué de couleur de fond se retrouvera avec celle du "container".
1- Si le "content" est toujours plus long que les colonnes de menu, on écrit par exemple :
#container { background: #FFFF99;}
#content { background: #56BBD0;}
#leftbar { background: transparent;}*
#rightbar { background: transparent;}
couleur du "content" : #56BBD0;
couleur des colonnes : #FFFF99; (celle du container)
Seulement deux couleurs possibles.
2- Si les colonnes de menu sont toujours plus longues que le "content", on écrit par exemple :
#container { background: #56BBD0;}
#content { background: transparent;}
#leftbar { background: #FFFF99;}
#rightbar { background: #FF6666;}
couleur du "content" : #56BBD0; (celle du container)
couleur des colonnes : #FFFF99; et #FF6666;
Trois couleurs possibles.
Nota : *On peut aussi ne pas indiquer la propriété "background", "transparent" étant la valeur par défaut.
Blues and sunset
Deux modèles qui n'ont peut-être en commun que la technique employée pour le fond. Il s'agit d'une image de largeur très réduite mais répétée sur la largeur et uniquement dans la partie supérieure de la page.
Le bandeau supérieur (3)
Deux images dans le bandeau supérieur du blog. On peut donc les placer l'une au-dessus de l'autre mais aussi l'une à côté de l'autre.
Il suffit d'ajouter la propriété "float" avec pour valeur "left" à chacun des deux sélecteurs "topbar-logo" et "topbar". De plus il faudra indiquer la largeur que doit occuper chaque image, soit en pixels soit en pourcentage.
illustration :
display: block;
background: url(URL de l'image);
height: Xpx;
width: Ypx;
float: left;
}
div .logolink a {
display: block;
width: Zpx;
height: Xpx;
}
#topbar {
display: block;
background: url(URL de l'image);
height: Xpx;
width: Ypx;
float: left;
}
Le lys orangé
personnaliser son blog
passez la souris sur les images
Le bandeau supérieur (2)
Il est tout à fait possible d'afficher deux images l'une au-dessus de l'autre dans le bandeau supérieur du blog (ou une image et un rectangle de couleur).
Pour cela il faudra provoquer l'affichage de "topbar-logo" et de "topbar", donc leur donner la propriété "display" avec pour valeur "block".
illustration :
1- Image dans le "topbar-logo" et rectangle dans le "topbar" :
#topbar-logo {
display: block;
background: url(URL de l'image);
height: Xpx;
}
div .logolink a {
display: block;
height: Xpx;
}
#topbar {
display: block;
background: #E49C0C;
height: Xpx;
}
Le lys orangé
personnaliser son blog
passez la souris sur les images
2- Rectangle dans le "topbar-logo" et image dans le "topbar" :
#topbar-logo {
display: block;
background: #E49C0C;
height: Xpx;
}
div .logolink a {
display: block;
height: Xpx;
}
#topbar {
display: block;
background: url(URL de l'image);
height: Xpx;
}
Le lys orangé
personnaliser son blog
passez la souris sur les images
Flowers and lovers...
Ces deux modèles, comme tous ceux qui suivront, ont des pieds de page. La technique utilisée pour les réaliser ne permet pas de changer (facilement) le bandeau supérieur.
Le bandeau supérieur (1)
On peut placer une image de fond dans les sélecteurs "topbar-logo" ou "topbar".
Il faudra tout d'abord provoquer l'affichage de l'élément qu'on aura choisi et interdire celui de l'autre en utilisant la propriété "display".
La propriété "display" de l'élément choisi aura pour valeur "block" et l'autre "none".
Dans le "topbar-logo" :
#topbar-logo {
display: block;
background: url(URL de l'image);
height: Xpx;*
}
div .logolink a **{
display: block;
height: Xpx*;
}
#topbar {
display: none;
}
passez la souris sur l'image pour voir le curseur changer
Dans le "topbar" :
#topbar-logo {
display: none;
}
div .logolink a {
display: none;
}
#topbar {
display: block;
background: url(URL de l'image);
height: Xpx;*
}
Le lys orangé
personnaliser son blog
passez la souris sur l'image pour voir où le curseur change
Les fonctionnalités disponibles varieront suivant le choix :
En insérant une image de fond dans "topbar-logo" le titre et le sous-titre que vous aurez entrés dans les paramètres du blog n'apparaîtront pas. Il faudra ajouter du texte au graphisme du bandeau pour avoir le même effet. En cliquant sur la totalité du bandeau on retournera à la page d'accueil.
En insérant une image dans "topbar", on pourra créer un bandeau dépourvu de texte. Titre et sous-titre s'afficheront par-dessus. Il faudra cliquer sur le titre du blog pour retourner à la page d'accueil.
Nota :
Si l'on écrit "display=none;" pour un sélecteur, inutile d'indiquer d'autres propriétés.
* Il est indispensable de préciser la hauteur du bandeau.
** "div .logolink a" va avec "topbar-logo".
Ajouter un pied de page
Les feuilles de style proposées par Canalblog ne comportent pas de pied de page. D'un point de vue esthétique, un pied de page permet d'équilibrer la page et éventuellement d'ajouter des indications.
Ajouter un pied de page est assez facile. Il suffit d'apporter quelques petites modifications à la feuille de style et aux pages HTML.
Voici la procédure à suivre.
1- Ajoutez dans la feuille de style les définitions des éléments "footer" et "footer p".
background: #CCCC55;
height: 100px;
width: 900px;
}
#footer p {
font-family: 'Trebuchet ms', Verdana, Arial, Helvetica, sans-serif;
color: #741a96;
font-size: 10pt;
font-weight: normal;
text-align: center;
padding-top: 50px;
}
(Les valeurs indiquées ici doivent être modifiées en fonction de vos besoins, elles ne sont pas toutes nécessaires et ne sont là qu'à titre d'illustration.)
2- Dans toutes les pages HTML, ajoutez la ligne suivante :
tout à la fin juste avant :
