• Look graphique d'un blog via CSS

    Petit guide pour modifier graphiquement son blog.


    I) Accéder au fichier CSS


    - Ouvrir son blog en mode Admin
    - Aller dans le second menu horizontal "Modification de mise en page"
    - Aller dans la dernière option du menu vertical orange "Modifier fichier CSS"
    - Le fichier CSS s'affiche dans la fenêtre de texte à droite.


    II) Modifications dans le fichier CSS


    => Pensez toujours à sauvegarder (par un copier-coller dans le bloc-notes par exemple) le texte de la fenêtre CSS AVANT toute modification !

    => NE PAS MODIFIER les valeurs du fichier CSS par les formulaires de saisie proposés, cela remet à zéro toute votre personnalisation !

    1) Bandeau de titre :

    Pour insérer l'image, après l'avoir hébergée sur internet, modifier le bloc cadretitreblog suivant comme suit :

    - #cadretitreblog { indique le début du bloc
    - la ligne Width indique la largeur de l'image (ici 740 pixels, à adapter à votre image)
    - la ligne Height indique la hauteur de l'image (ici 131 pixels, à adapter à votre image)
    - la ligne Background-image indique la localisation de l'image hébergée

    Comment connaître les dimensions (hauteur / largeur) de votre image ?
    - utiliser un programme d'image : voir sur mon blog ici :
    http://www.blogg.org/blog-1780-date-2005-02-27-billet-111205.html
    ou
    - si l'image est affichée dans votre navigateur web, un clic droit sur l'image, puis choisir l'option "Propriétés". Dans la fenêtre qui s'affiche, la rubrique "Dimensions" vous indique ces deux valeurs en pixels.

    #cadretitreblog {
    width: 740px;
    height:131px;
    background-image: url("http://mon_image_titre.jpg ou gif ou png");


    2) Titre et sous-titre:

    Le titre :
    bloc #titreblog{

    Si le titre est dans le graphique, il faut "neutraliser" le titre sous forme de texte, mais sans le supprimer pour garder le référencement dans Blogg.org

    - la ligne #titreblog{ indique le bloc à repérer et à modifier
    - la ligne color indique la couleur des caractères (none = aucune)
    - la ligne font-size indique la taille des caractères (0 = la plus petite)

    #titreblog{
    color: none;
    font-size: 0px;


    Idem pour le sous titre : bloc #soustitre{

    #soustitre{
    color: none;
    font-size: 0px;

    3) Posts :

    Vous pouvez également mettre une image en fond de vos posts, le texte venant au-dessus :

    - bloc .post{
    - la ligne width indique la largeur du bloc central des posts (ici : 545 pixels. Ne pas prévoir une image plus large que le bloc !)
    - la ligne Background-image indique la localisation de l'image hébergée

    .post{
    width:545px;
    background-image: url("http://mon_image_post.jpg ou gif ou png");

    4) Menus :

    Une image en fond de menu est possible, il faut identifier les blocs concernés :

    #moblog{
    #themes{
    #source{
    #archives{
    #liensthemes{
    #liensthemesbas{
    #glossaire{
    #ecran{

    pour chacun, insérer deux lignes comme suit, pour indiquer :

    - la ligne width indique la largeur de la colonne des menus (ici, 190 pixels. Ne pas prévoir une image plus large que la colonne !)
    - la ligne background-image indique la localisation de l'image hébergée

    width:190px;
    background-image: url("http://mon_image_menu.jpg ou gif ou png");

    => Pensez toujours à sauvegarder (par un copier-coller dans le bloc-notes par exemple) le texte de la fenêtre CSS AVANT toute modification !

    => NE PAS MODIFIER les valeurs du fichier CSS par les formulaires de saisie proposés, cela remet à zéro toute votre personnalisation !

    </font />Les valeurs indiquées ci-dessous en pixels (740, 131, 545 et 190) sont celles de ce blog (Charmeur-Mutin).
    Vous devez les remplacer par les valeurs correspondant à votre blog, bien entendu !

  • Commentaires

    1
    Mercredi 9 Mars 2005 à 09:43
    titre
    bonjour j'avais tout réussi, si si mais lorsque j'ai modifié la taille de la police du titre, ben mon imagne l'est devenue toute petite ! tu sais pourquoi ?
    2
    Timounch
    Mercredi 9 Mars 2005 à 09:58
    AU secours Charmeur !!
    C'est de pire en pire !! Ma bannière ne s'installe pas comme je voudrais : HELP
    3
    Charmeur
    Mercredi 9 Mars 2005 à 10:21
    Tim, Nuage...
    Avez vous indiqué correctement les dimensions de l'image ?
    4
    Timounch
    Mercredi 9 Mars 2005 à 10:26
    Charmeur de mon coeur
    là je ne sais plus.. J'ai dû merder quelques part... Bref je verrais ça ce soir.. là ça ressemble à rien
    5
    nuage
    Mercredi 9 Mars 2005 à 11:30
    dimension
    ben vi, il me semble ! tant pis j'essaierai une autre fois...
    6
    restekool
    Jeudi 16 Juin 2005 à 11:03
    probleme image fond
    Est -il possible de redimensionner mon image de fond dans le fichier CSS où je l'ai intégré dans une TD#image { background-image: url(...); background-repeat: repeat-x; } Merci de votre réponse ;p
    7
    restekool
    Jeudi 16 Juin 2005 à 11:06
    probleme image fond
    bah ça y est désolé du dérangement ..lol
    8
    Charmeur
    Jeudi 16 Juin 2005 à 12:16
    Ok Restekool
    Je constate que vous avez apparemment pu solutionner votre problème. A mon avis, la réponse à votre question est "oui", tant que les dimensions de votre image n'excèdent pas celles de la zone dont elle illustre le fond. Bon courage à vous.
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :