18 novembre 2007 à 21:21

[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.

- FAQ - Commentaires [3] - Permalien [#]

Commentaires

    Quelle rapidité !

    Un grand merci !
    ça y est je l'ai mis en place
    j'ai ajouté #topbar dans ma feuille de style et aussi quelques lignes à
    c'est nickel !

    Par Demolite, 19 novembre 2007 à 10:02
  • Au fait...

    En passant par "insertion d'image" dans Canalblog, au dessus d'une certaine taille les images sont redimensionnées, pas pratique pour les bannières et fond d'écran ;-( mais en passant par "insertion d'un document" on évite ce problème

    Par Demolite, 19 novembre 2007 à 10:05
  • chui baba

    devant tous ce mots inconnus pour moi.
    Moi qui voudrais faire toutes ces jolies choses, mais pour moi, c'est pire que du chinois.Je suis admirative, je sais chacun son truc, mais toute seule ds mon coin, c'est pas facile, même avec l'aide virtuelle. Tant pirrr, ca va être du "petits pas à petits pas" (si tu passes sur mon blog , qui est tjrs en standard, ne critique pas la bannière STP (rires), je sais elle très moche, c'était y a 1 an,depuis j'ai progressé, mais pas le temps de trouver de quoi y mettre.A BIENTOT

    Par annick, 29 novembre 2007 à 13:36

Poster un commentaire