Changer la taille des modèles de Blogger
Blogger fournit plus d'une quinzaine de modèles (template) différents accessibles par Paramètres / Mise en Page / Sélectionner un nouveau modèle :
Les dimensions proposées consistent en une colonne principale d'environ 410 pixels et une colonne de liens et gadgets d'environ 220 pixels.
Nous allons modifier le modèle du blog, pour augmenter ces dimensions d'environ 150 pixels pour la colonne principale et d'environ 50 pixels pour la colonne des gadgets.
Sauvegarder le modèle
Avant de modifier le modèle, en faire une copie par Paramètres / Mise en Page / Modifier le code HTML et un clic sur Télécharger le modèle dans son intégralité.
Le Modèle Minima - Douglas Bowman
Les dimensions passent de 220 - 410 - 660 / 700 à 270 - 560 - 860 / 900.
Il n'y a pas d'images de fond à modifier.
Les corrections
#header-wrapper
{
width: 860px; /* 660 */
...
}
#header .description
{
...
max-width: 900px; /* 700 */
...
}
#outer-wrapper
{
width: 860px; /* 660 */
...
}
#main-wrapper
{
width: 560px; /* 410 */
...
}
#sidebar-wrapper {
width: 270px; /* 220 */
...
}
Le Modèle 897 - Douglas Bowman
Les dimensions passent de 254 - 460 - 744 à 304 - 610 - 944.
Il n'y a pas d'images de fond à modifier.
Les corrections
#outer-wrapper
{
...
width: 944px; /* 744 */
}
#main-wrapper
{
...
width: 610px; /* 460 */
...
}
#sidebar-wrapper
{
...
width: 304px; /* 254 */
...
}
Le modèle Rounders - Douglas Bowman
Les dimensions passent de 240 - 485 - 740 à 290 - 635 - 940.
Les images de fond doivent être modifiées, quant à leur taille :
corners_cap_bot.gif
corners_cap_top.gif
corners_main_bot.gif
corners_main_top.gif
corners_prof_bot.gif
corners_prof_top.gif
corners_side_bot.gif
corners_side_top.gif
rails_main.gif
Ces images doivent être enregistrées chez un hébergeur acceptant le format *.gif
Elles sont disponibles en téléchargement sur les Liens du Vin.
Les corrections
#outer-wrapper
{
width: 940px; /* 740 */
...
}
#main-wrap1
{
width: 635px; /* 485 */
...
background:#ffffff url("http://URL/corners_main_bot.gif") no-repeat left bottom;
...
}
#main-wrap2
{
...
background:url("http://URL/corners_main_top.gif") no-repeat left top;
...
}
#main
{
background:url("http://URL/rails_main.gif")
...
width: 635px; /* 485 */
}
#sidebar-wrap
{
width: 290px; /* 240 */
...
}
.main .widget
{
...
width: 618px; /* 468 */
...
}
.main .Blog
{
...
width: 634px; /* 484 */
}
#header-wrapper
{
background:#445566 url("http://URL/corners_cap_top.gif") no-repeat left top;
...
}
#header
{
background:url("http://URL/corners_cap_bot.gif") no-repeat left bottom;
...
}
#sidebartop-wrap
{
background:#ccddcc url("http://URL/corners_prof_bot.gif") no-repeat left bottom;
...
}
#sidebartop-wrap2
{
background:url("http://URL/corners_prof_top.gif") no-repeat left top;
...
}
#sidebarbottom-wrap1
{
background:#ffffff url("http://URL/corners_side_top.gif") no-repeat left top;
...
}
#sidebarbottom-wrap2
{
background:url("http://URL/corners_side_bot.gif") no-repeat left bottom;
...
}
#footer-wrap2
{
background:#445566 url("http://URL/corners_cap_top.gif") no-repeat left top;
...
}
#footer
{
background:url("http://URL/corners_cap_bot.gif") no-repeat left bottom;
...
}
body#layout #outer-wrapper
{
width: 930px; /* 730 */
}