lundi 16 novembre 2009

Elargir les colonnes de son blog

C'est sur BlogTuto que j'ai trouvé cette astuce pour élargir les colonnes de son blog dans Blogger, histoire d'être un peu plus à l'aise pour écrire et surtout pour insérer des images.

(Comme d'habitude, on pense à sauvegarder son modèle avant de le bidouiller, même si là on ne touche pas trop au code, et on peut s'aider de CTL F pour trouver l'endroit où il faut faire des modifications dans le modèle HTML, c'est pratique...)

La différence n'est pas visible à l'oeil nu mais je suis passée
d'une largeur par défaut de 660px à une largeur de 740px

Pour ma part, je m'arrange pour que la largeur de la colonne avec les articles + celle de la colonne de droite soit légèrement inférieure à la largeur totale du blog, histoire qu'il y ait un peu d'espace entre les colonnes.

Et si on veut que la bannière soit de la même largeur que le "corps" du blog, il faut aussi modifier la largeur de l'en-tête pour que sa valeur (définie par "width") soit la même dans "header-wrapper" et dans "outer-wrapper".


Ça donne, pour la largeur de l'en-tête :

#header-wrapper {
  width:740px;                     <-------------- largeur de l'en-tête
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}




A comparer à :

#outer-wrapper {
  width: 740px;
                     <-------------- largeur totale
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 460px;
                     <-------------- largeur de la colonne centrale
  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: 260px;
                     <-------------- largeur de la colonne de droite
  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 */
}


Au passage, vous noterez que 460 + 260 est bien inférieur à 740

(Tous mes tutoriels sont dans l'index "informatique")
Rendez-vous sur Hellocoton !

8 commentaires:

  1. Celui là j'y arriverai!!!
    D'autant plus que c'est un truc que je voulais faire en regardant la nouvelle mise en page de mon blog.

    D'ici la fin de la semaine,je me réserve une heure bidouille et je te crie un immense et fort SOS si jamais, ok?

    Merci pour ta réponse mais je n'ai pas eu le temps de réessayer, même si j'ai bien entendu ton conseil ;)

    RépondreSupprimer
  2. C'est exactement ce que je veux faire mais ça me paraît bien compliqué...

    RépondreSupprimer
  3. @Alice : Il faut faire à son rythme (ps. pour les commentaires, ça ne marche que si les commentaires sont affichés dans la page et pas dans une petite fenêtre)

    @Oum : Ça fait un peu peur au début mais c'est plus compliqué à expliquer qu'à faire. Il faut surtout penser à sauvegarder son modèle avant de bidouiller pour éviter les catastrophes

    RépondreSupprimer
  4. @Oum : Il se peut que les colonnes ne portent pas tout à fait le même nom dans tous les modèles. Dans le tien apparemment il faut changer la largeur dans #outer-wrapper et dans #content-wrapper pour la largeur totale du blog

    + dans #main-wrapper pour la largeur "centrale" et dans #sidebar-wrapper pour la colonne de droite

    Je ne suis pas sûre du résultat avec les arrière-plans mais il faut essayer ;-)

    RépondreSupprimer
  5. J'ai bidouillé la largeur des colonnes à plusieurs reprises, ai quelquefois malmené l'apparence de mon blog avec çà car je n'ai que de toutes toutes petites notions d'HTML, oubliant parfois la sauvegarde impérative avant tout bricolage, et puis j'ai adopté pour tous mes blogs le modèle Minima Strech qui s'étire en fonction des écrans qui l'affiche.
    il a une version colonne à gauche je crois .
    C'est très très confortable.

    RépondreSupprimer
  6. @Acodero : Perso j'aime bien aussi pouvoir limiter la largeur de mes colonnes quel que soit l'écran. Je trouve que c'est parfois plus difficile à lire quand la colonne est trop large, comme sur un journal ;-)

    RépondreSupprimer
  7. bien sur!
    c'etait juste pour dire qu'il y avait cette possibilité, car j'ai choisi au départ minima strech pour sa simplicité et ne me suis aperçue de l'effet "strech" qu'après

    RépondreSupprimer
  8. J'y suis arrivée:!!!!!!!!!

    Il m'a fallu du temps, de la concentration et surtout de l'optimisme mais enfin je trouve que la mise en page est moins étriquée!!

    Merci Myrtille!
    C'est fabuleux chez toi!
    Je viens lire, souvent et je garde dans un coin de ma mémoire pour me lancer!

    Merci!

    RépondreSupprimer