[FAQ]Du texte dans ma bannière
Une question de Demolite: Comment mettre du texte dans sa bannière?
Et d'abord pourquoi mettre du texte dans sa bannière?
Après tout, la bannière étant une image, on pourrait tout à fait mettre du texte sur l'image. Oui mais... Si on ne fait pas attention lors de l'enregistrement ou lors du passage sur Canalblog, l'image est mal compressée.
D'ailleurs, le Saviez vous?
CanalBlog, lorsque vous uploader une image, il se permet parfois de la recompresser ou de la redimensionner. Moi, au début, je n'arrivait pas à mettre mes bannières et autre sans que ce maudit site ne les redimensionne. C'est pour ça que toutes mes images sont hébergées sur un autre site. J'aime pas ne pas avoir le contrôle de ce que je fais.
Si vous aviez mis du texte, genre description détaillée du site, avec une police assez petite, les caractères apparaîtront flou, moche. Demolite qui refait le design de son site s'en est rendu compte et je lui avait suggéré de le remplacer par du vrai texte. Oui mais comment faire?
On pourrait faire comme pour ma FAQ. Pour cette dernière, j'ai créer une <div id="FAQ"> et je l'ai fixé dans le coin supérieur gauche du site grâce à l'attribut position: absolute; . Néanmoins, ce n'est pas la méthode la plus propre. On va faire ça dans les règles.
Tout d'abord, allons sur la page d'accueil en mode avancée, et voyons les div qui concernent la bannière. Nous en avons 3. tobar-logo, qui représente l'image, logolink qui représente le lien et topbar, qui est l'affichage du titre du blog et de sa description entrée dans les préférences.
Constatez que logolink et inclut dans tobar-log et qu'ensuite vient la div topbar. Cette méthode est un peu bancale. En effet, je trouverai plus logique de permettre à l'utilisateur de mettre non plus une couleur de fond, mais une image de fond. Et le texte se superposerai. Qu'importe, nous allons le faire !
Coupez la ligne qui ressemble à:
<div id="topbar">
<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1> <h2><$BlogDescription$></h2>
</div>
Et Collez là juste avant le <div class="logolink">. Le texte est donc dans la bannière.
Ajoutez votre texte/description dans dans cette div (en supprimant ou non ce qu'il y'avait avant). Mettez le dans une balise <p>...</p> pour que cela soit plus propre.
Validez. Voila, c'est fait.
Il ne vous reste plus qu'a créer la classe #topbar dans la feuille de style générale, et de l'implémenter pour l'afficher. Pour positionner le texte, utilisez margin-right, margin-left, margin-top, margin-bottom. pour que votre texte soit à gauche, centré ou justifié, utilisés text-align: left/center/right/justify;. Choisissez la couleur qui le fera bien ressortir grâce à l'attribut color. Et choisissez sa taille avec font-size. jetez un coup d'oeil ici et ici pour voir tous les attributs imputable à un texte.
Après libre à vous de l'encadrer ou d'en faire n'importe quoi.
valaaaa.
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)