mercredi 21 janvier 2009

Blogger - Largeur de la page.





Dans sa version standard, la zone de texte de Blogger est plutôt étroite. Avec l'arrivée des grands écrans le format mérite d'être modifié.

La manip n'est pas très compliquée.


  • Allez dans le tableau de bord de votre blog.

  • Direction Mise en Page.

  • Cliquer sur "modifier le code html". Bon là il est préférable de ne pas faire n'importe quoi ! Au besoin copier l'ancien code et le sauvegarder sur une page à part.

  • Chercher dans tout ce blabla incompréhensible la série des "#..... wrapper". Voici une copie de la zone de codage à retrouver. Il faut dans cette zone modifier les différentes données chiffrées, je vous les ai mises en rouge. Moi je l'ai fait par tatonnement et voilà les données qui correspondent au look du blog de Lulu Sorcière.



#outer-wrapper { width: 890px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }
#main-wrapper { width: 650px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }
#sidebar-wrapper { width: 210px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}


Ensuite, il faut vérifier si ça vous convient en cliquant sur "aperçu" et enfin enregistrer les modifications.

Et le tour est joué !
Un p'tit plus pour le tout
Autre astuce bien plus performante qui vous permet d'adapter la zone de rédaction à la largeur de n'importe quel écran, sans rogner la page.
On bidouille toujours le code html et là il faut remplacer les valeurs en pixels par des pourcentages.
#outer-wrapper {margin:0;padding:10px;text-align:left;font: normal normal 100% Georgia, Serif;}
#main-wrapper {margin-left: 5%;width: 60%;float: left;display: inline; /* fix for doubling margin in IE */word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
#sidebar-wrapper {margin-right: 5%;width: 20%;float: right;display: inline; /* fix for doubling margin in IE */word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
/* Headings



5 commentaires:

  1. yes, I can !!
    Ca y est, j'ai presque fait tout bien. Ca bugue encore pour la photo de titre, à cause des dimensions mais aussi parce que le fond ne me satisfait pas... Je recherche.

    Merci encore à la sorcière aux doigts de fée ;-)

    RépondreSupprimer
  2. Ca y est, c'est fait ! J'ai dû changer quelque chose d'autre qui était différent chez moi : sur "outer-wrapper" il y avait aussi une "width" en pixels que j'ai supprimée. Et là, miracle, ça marche !

    RépondreSupprimer
  3. Vu, c'est impeccable ! Je suis contente que mes explications soient à peu près claires !

    RépondreSupprimer
  4. Ah j'ai réussi moi aussi grâce à vos explications !!

    merci

    RépondreSupprimer
  5. J'en suis ravie Priscilla ! Et merci pour ton abonnement aux Bois de Prinçay !

    RépondreSupprimer