Rendre la structure de son blog élastique

Cette article est le pendant de celui-ci : Rendre un modèle de Design 2XX élastique qui correspondait à la version 1.4
La question de modifier les dimensions d'un des nombreux modèle de base ayant des dimensions fixes dans la version 2 d'over-blog revient très très régulièrement sur le forum d'aide technique, un petit tutoriel s'impose donc.
Attention, bien lire les avertissements et précisions à la fin de l'article.

Dans cet exemple, j'utilise le modèle Ethnic Japan à 3 colonnes mais bien-sûr, la technique est adaptable à tous les autres modèles, toutes les autres structures.

Pour ceux qui débutent avec la version 2 ou ne sont pas à l'aise avec les modifications du CSS, il y a plusieurs articles à lire: Changement dans la gestion du CSS et Eléments les plus couramment modifiés dans le CSS


La stucture d'un blog est définie par les CSS structures de ces modèles, correspondant aux cases Feuille de structure générique et feuille de structure propre au template.

Si ces case sont cochées, le blog a la structure du modèle de base. Et donc, si on veut modifier cette structure, il fut décocher les 2 cases et valider. Dans son onglet original apparaît alors la partie du CSS de base s'appliquant à la structure. Il suffit alors de copier ces lignes dans l'onglet Mon Style puis de modifier les largeurs.
Exemple : ci-dessous, le modèle de base Japan dont la structure n'a pas été modifiée.

elle correspond à la structure :

Structure de base du modèle Japan à 3 colonnes

/* ////////////////////////////// */
/* Feuille de structure générique */
/* ------------------------------ */

body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}

/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1    {margin:0 10px 0 10px; width:440px; padding:5px;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}

Et ci-dessous, le modèle de base Japan dont la structure a été modifiée pour s'adapter à la largeur de l'écran.

elle correspond à la structure :

Structure modifiée du modèle Japan à 3 colonnes

 

/* ////////////////////////////// */
/* Feuille de structure générique */
/* ------------------------------ */

body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 100%;}
.ln {clear:both;}
.cl {float:left;}

/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:18%;}
#cl_1_2 {margin:0; width:18%;}
#cl_1_1    {margin:0 1% 0 1%; width:60%; padding:1%;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}

Bien évidemment, ceci n'est qu'un exemple, les variations sont nombreuses, on peut juste modifier les largeurs sans rendre le blog élastique par exemple pour donner la même largeur aux 2 colonnes de modules ou pour élargir uniquement la colonne des articles.
Autre article à lire :  Comprendre la structure de son blog

Important

Pour ceux qui sont en mode simple, cette modification de structure s'applique à toutes les pages, y compris celles des albums, ce qui provoque ceci:

il vaut donc mieux soit rajouter ceci #general #cl_1_0 { width:100%;}  dans sa CSS si on reste en mode classique, soit  passer en mode avancé si l'on souhaite modifier la structure de son blog et que l'on a des albums photos que l'on veut pouvoir personnaliser. De plus :

Important

Pour ceux qui sont en mode avancé, il faut modifier les CSS article et accueil si l'on veut que cette nouvelle structure s'applique sur l'accueil et sur les pages d'articles. Ne pas ajouter ces lignes dans l'onglet global sinon cela sera pris en compte pour les pages d'albums photos avec le même effet que ci-dessus

alors que si la modification de la structure n'est pas faite dans l'onglet global mais uniquement pour l'accueil et les articles, on obtient bien des pages d'album et de photos normales:

Si vous avez des questions, allez les poser sur le forum ou utilisez les commentaires