Voilà maintent plusieurs jours que les blogueurs chevronnés attendent les nouveaux albums over-blog (cf. article).
Comme la mise à jour commence à traîner et que le problème de la mise en forme des albums photos est problématique, voici une simple astuce !!!


Tout d'abord il faut savoir que si l'affichage de vos albums photos est catastrophique, il faut commencer par passer en mode avancé (cf. article sur le mode classique et sur le mode avancé).
Si vous étiez en classique, sauvegardez votre css de Global pour le coller sur tous les autres onglets : global, accueil, article, page, album et photo seule.



Pour les onglets album et photo seule, il faut légèrement modifier la structure. C'est elle qui déforme l'affichage des albums.

La structure des colonnes #cl_0_0, #cl_1_0, #cl_2_0 doit être modifiée par celle-ci :

                  #cl_0_0 {width:100%;}
                  #cl_1_0 {width:80%;}
                  #cl_2_0 {width:100%;}


Et magie, ça marche...


EDIT du 16 février 2009 :
Si ça ne marche toujours pas, tentez cette solution

Le calendrier d'over-blog n'a pas pour seule utilité de monter quel jour nous sommes. Il permet aussi de donner accès aux articles du blog qui l'affiche selon une date précise sans avoir à passer par la pagination.

Le module du calendrier comporte plusieurs classes. Ca peut-être intéressant de les configurer comme bon nous semble.

La cellule qui contient le mois actuel :

.calendarTop1

Je veux par exemple, que le mois soit écrit en arial, en 10px, en jaune, en gras, sur un fond vert et que le texte soit centré :

.calendarTop1 {font-family: Arial; font-size: 10px; color: #FFFF00; font-weight: bold;  background-color:#00FF00; text-align:center;}

La cellule qui contient le jour actuel :

.calendarToday1

Je veux par exemple que le jour soit écrit en Helvetica, en 10px, en bleu, sur un fond de couleur rouge, qu'il soit centré et en gras :

.calendarToday1 {font-family: Helvetica; font-size: 10px; color:#0000FF; background-color:#FF0000; text-align: center; font-weight: bolder; }

Les chiffres des jours du mois  :

.calendarDays1

Je veux par exemple que les chiffres soient espacés de 50px de large, 15px de haut pour que ce soit lisible. Puis je veux que le texte soit écrit en verdana, de 10px, en noir et centré.

.calendarDays1 {width:50px; height: 15px; font-family: Verdana; font-size: 10px; color: #000000; text-align:center;}

La cellule qui contient les premières lettres des jours de la semaine :

.calendarHeader1

Je veux par exemple qu'elles soient en arial, de 12px, en blanc sur un fond noir. Je veux que chaque case soit dissociée par une bordure rouge continue de 1px d'épaisseur :

.calendarHeader1{font-family: Arial; font-size: 12px; color:#FFFFFF; background-color: #000000; border: 1px solid #CC0000;}

La cellule qui contient le calendrier en entier :

.calendarTable1

Je veux par exemple qu'elle ait une bordure jaune de 3 pixels d'épaisseur en pointillés :

.calendarTable1 {border : 3px dashed #FFFF00 ; }

Lorsqu'on se sent vraiment perdu avec le css et qu'on a une âme sensible sujette à la panique, il vaut mieux éviter de modifier la structure de son blog sous peine d'avoir une frayeur en voyant son blog totalement déstructuré avec les modules en bas ou en haut, les articles disparus (pas effacés...)... bref un blog tout cassé qui donne l'impression d'avoir tout perdu !

Ce n'est pas une raison pour s'empêcher de découvrir toutes les libertés disponibles avec le css. Il a juste quelques précautions à prendre : prendre le temps de sauvegarder son css par exemple... ! Si vous êtes en mode classique il n'y a que dans global et certainement les cinq cases : Définitions d'affichage basiques, Définitions d'affichage du template, Définitions d'affichage de la variation, Définitions de structure de la variation, Définitions de structure du template.

Ensuite, il faut s'aider de l'article : modifier les largeurs du blog et/ou des colonnes et identifier quelles sont les colonnes de son blog et à quelles parties du blog elles correspondent.

- Qu'est-ce qu'un blog élastique  ?

Un blog élastique c'est un blog qui, quelque soit la résolution d'écran du visiteur, adaptera sa largeur.

Ainsi pour un blog comme http://photo.graph.over-blog.com si vous jouez avec la taille de la fenêtre, vous verrez que les largeurs de la colonne des modules et de la colonne des articles se rétrécissent (jusqu'à un certain point... j'ai indiqué un minimum) ou s'agrandissent.

- comment rendre son blog élastique ?

Le css de la structure du blog se trouve généralement dans « Définitions de structure de la variation » ou « définitions de structure du template » (les dernières cases dans l'administration d'over-blog/design/CSS).

C'est là qu'on trouve les éléments suivants :

#global

#cl_0_0

#cl_1_0

#cl_1_1

#cl_1_2

#cl_2_0

Il suffit alors d'indiquer les valeurs qui conviennent mais non pas en pixels mais en %. Car les pixels sont une dimension fixe, comme par exemple les centimètres. Avec les pourcentages,  le navigateur ajustera chaque colonne par rapport à la taille de la résolution d'écran et non pas avec des mesures fixes en pixels.

Il faut tout de même ne pas oublier quelques règles essentielles :

Il ne peut y avoir plus de 100% au total... sinon ça déborde et une colonne (ou plusieurs) se retrouvera en bas de la page !

Il ne faut pas oublier que les écarts (réalisés avec padding et margin) sont compris dans le total de la largeur du blog, il n'est donc pas rare d'avoir un total inférieur à 100%.

Prenons un exemple avec le thème Ethnic Celtic avec deux colonnes de modules (une à droite et une à gauche) et une colonne principale au milieu :

Voici le css qu'on trouve dans le css sans modification

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

#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;}

Voici ce que ça donne en mofiants les largeurs par des pourcentages :

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

#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;}

Un autre exemple ?

Voici avec le thème Ice cream pistache avec une colonne de modules à gauche et une colonne principale avec les articles à droite.

Voici son apparence sans modifications :

 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

#cl_0_0{width:100%; margin:0 0 15px 0;}

#cl_1_0{margin:0px; width:300px;}

#cl_1_1           {margin:0 0 0 10px; width:625px; padding:5px;}

#cl_2_0 {width:100%;}

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

Voici maintenant en pourcentages :

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

#cl_0_0{width:100%; margin:0 0 1% 0;}

#cl_1_0{margin:0px; width:26%;}

#cl_1_1           {margin:0 0 0 10px; width:70%; padding:1%;}

#cl_2_0 {width:100%;}

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

Comment donner un minimum de taille à un blog élastique ?

C'est comme pour ce blog http://photo.graph.over-blog.com, lorsque vous diminuez la fenêtre, il arrive un moment ou les colonnes ne se diminuent pas davantage.

Il suffit d'ajouter cette valeur : min-width:600px à l'élément.
Vous pouvez remplacer 600 par la largeur de votre choix.

Par exemple je veux que pour un blog à une colonne de modules à gauche et une colonne principale à droite que ma colonne principale ne soit jamais plus petite que 550px de largeur, j'indique :
 

#cl_1_1           {min-width:550px ;}

C'est pas plus compliqué que ça... !

Sauf que...

Les quelques petits problèmes qui peuvent être rencontrés :

Certains thèmes d'over-blog ne s'adaptent pas à ce procédé car les images employées sont trop petites (les backgrounds des titres par exemple dans les thèmes technologic), sont répétées et c'est pas très joli.

Il faut toujours s'assurer qu'il n'y ait pas de « contrordre » dans le css (c'est valable pour toutes les modifications dans le css pas seulement pour rendre son blog élastique). Vérifiez bien qu'il ne reste pas par-ci par-là quelques dimensions données en px pour une colonne. Si c'est le cas effacez-les !

Pas de panique si soudainement une colonne se trouve en dessous de la première, c'est simplement parce qu'un de vos pourcentage est trop élevé. Diminuez légèrement vos pourcentages et refaites  un test sans oublier de rafraichir la page (F5) !

Il y a deux façons d'organiser l'apparence de son blog : soit en mode classique soit en mode avancé.

Qu'est ce qui les différencie ?

Ce n'est qu'une question visuelle : en mode classique le blog garde le même aspect quelque soit l'affichage : l'accueil, une page, un album photo (et encore, ça va changer), un article seul avec ou sans ses commentaires et en mode avancé chaque affichage peut-être différent.

- comment passer du mode classique au mode avancé ou comment passer du mode avancé au mode classique ?

Allez sur l'administration de votre blog et allez sur « configurer ».

Il suffit alors soit de cliquer sur « avancé »si l'on est en classique et que l'on veut basculer,  soit de cliquer sur « classique ».

1 - Le mode classique :

- structure :

C'est certainement le plus simple. Surtout quand on débute avec son blog et dans le domaine du CSS, est de rester en mode classique.

Dans ce mode vous pouvez définir la structure de votre blog (colonnes, modules, bannière...) de cette façon :

Il suffit d'aller dans l'administration d'Over-Blog, puis dans « configurer », « mise en page ». (1) dans le schéma.

Pour définir la structure de base, il faut aller en bas de la page et placer la souris sur l'icône en dessous du texte « choix de la structure ». Un menu déroulant s'affiche, et vous pouvez choisir celle qui correspond. (2) dans le schéma.

Ensuite il suffit de choisir les modules par « glisser-déposer » avec la souris. (3) dans le schéma.

Par exemple, vous souhaitez une colonne principale qui contiendra les articles à gauche et une colonne secondaire qui contiendra les modules à droite.

Un simple « glissé-déposé » (un clic de souris sur l'élément sans relâcher et déplacement du curseur jusqu'à l'endroit désiré) permet de choisir ses modules, leur ordre, leur nombre...

- css et design :

Le mode classique permet alors d'avoir un blog identique quel que soit la page affichée. La page d'accueil est identique à un article affiché seul avec ou sans ses commentaires ou à une page seule. Par exemple : http://luluetberlu.over-blog.com

Si vous avez un blog qui fonctionne ainsi vous pouvez l'indiquer en commentaire !

Le mode avancé permet alors de ne modifier qu'une seule page de css pour avoir le résultat sur l'intégralité du blog.

2- Mode avancé :

- structure :

C'est le même principe que pour le mode classique, sauf que les colonnes, les modules, les bannières, les pieds de page sont à définir à chaque fois et qu'il est ainsi possible d'avoir un blog totalement différent tant par son aspect que par sa structure.

Il est tout a fait envisageable d'avoir une page d'accueil à trois colonnes et une grande bannière, les articles seuls affichés sans bannière et à deux colonnes avec différents modules, et les pages avec une autre couleur ou même qu'avec une seule colonne...

Comme par exemple sur ce blog : la page d'accueil a une grande bannière, les articles seuls (ou les catégories) s'affichent avec une petite bannière et les pages (pour voir une page, cliquez sur « sommaire » en haut de ce blog) n'ont qu'une colonne et aucun module.

Avec le mode avancé il faut savoir jongler avec les onglets : global, accueil, article, page (je ne parle pas des albums photos, puisqu'on ne pourra bientôt plus les modifier cf. article).

Global :

C'est un css général du blog, c'est là qu'on indique les grandes tendances du blog.

Accueil :

Comme son nom l'indique c'est l'accueil du blog. C'est là qu'on met le css de l'apparence désirée pour la page principale de son blog, celle qui correspond à l'adresse principale du type http://monblog.over-blog.com (ou .fr), comme pour ce blog : http://photo.graph.over-blog.com

Article :

C'est ici que l'on indique le css pour ce qui concerne l'apparence du blog lorsque l'on clique sur un lien de la page d'accueil et qu'on n'est plus sur la page principale. C'est soit un article seul comme avec le lien de cet article : http://photo.graph.over-blog.com/article-27611775.html

Ou sur une catégorie, comme la catégorie webdesign de ce blog : http://photo.graph.over-blog.com/categorie-10266575.html

Page :

C'est ici que l'on modifie le css pour avoir un affichage particulier pour ces pages de blog qui ne sont pas des articles. Comme pour ce blog, la page sommaire : http://photo.graph.over-blog.com/pages/Sommaire__Webdesign__Graphisme__Photographie__Desi-994442.html

3 - Quel mode choisir ?

Honnêtement, pour quelqu'un qui débute en css, le plus simple serait de choisir le mode classique... surtout lorsqu'on désire conserver la même apparence et la même structure pour son blog. D'autant plus qu'en mode classique il y a des classes qui permettent tout de même de différencier quelque peu selon l'accueil, les pages, ou les articles affichés seuls. Et ainsi, lorsqu'on modifie le css, on n'a pas à se poser la question de savoir dans quelle partie faire les changements.

Voici quelques éléments qui suffisent à faire ses modifications en mode classique :
     * Pour les articles seuls :

#articleSeul

     * Pour les pages :

.page

.pageContent

.afterPage

.divPageTitle

.divPageTitle h2

Par exemple :

Je souhaite que mon titre d'article soit rouge sur ma page d'accueil et soit bleu lorsqu'il est affiché seul, j'indique :

.titreArticle {color:#000066;}

#articleSeul .titreArticle {color:#CC0000;}

Si je veux que les titres soient identiques à la page d'accueil et lorsque les articles sont affichés seuls, alors je supprime l'identifaint #articleSeul du css.

Voici quelques précisions pour modifier l'apparence des articles de son blog en CSS chez Over-Blog...

Les généralités des articles :

#article

Et dans cette classe on y retrouve tout ce qui suit

Remarque : #articleSeul

C'est la même chose, mais seulement lorsque l'article est affiché tout seul (sans les autres articles) ou avec ses commentaires.

Tout l'article :

.article

Le haut des articles :

Ce qui contient tout le haut des articles (titre, date...)

.beforeArticle

L'apparence du texte du titre des articles :

.titreArticle

L'apparence du texte du titre des articles non survolé par la souris:

.titreArticle a

L'apparence du texte du titre des articles survolé par la souris:

.titreArticle a:hover

L'espace qui contient le titre de l'article

.divTitreArticle h2

La date

.date

Au milieu des articles :

Tout le corps des articles sans le haut (date, titre...) et sans le bas (ajout de commentaire, publié par...)

.contenuArticle

En bas des articles :

Toute la partie inférieure des articles qui contient l'auteur, le lien des commentaires...

.afterArticle

Les liens dans .afterArticle :

.afterArticle a

Les liens dans .afterArticle survolés par la souris :

.afterArticle a:hover

Publié par

.publishedBy

Publié dans (pour les catégories)

.topic

L'espace qui contient l'ajout de commentaire

.spanAddComment

Le texte de lien d'ajout de commentaire

.linkAddComment{}

Le texte de lien des commentaires

.linkComment{}

L'espace qui contient le nombre de commentaires (x) 

.spanLinkComment

L'espace qui contient le lien recommander

.spanRecommend

Le texte de lien pour recommander

.linkRecommend{}

Créer un trackback c'est inutile de le laisser, puisque Over-Blog a arrêté l'utilisation des trackbacks... je l'indique tout de même, on ne sait jamais !

.spanAddTrackback

Le lien des trackback :

.linkTrackback{}

Petits exemples pour la compréhesion : 
Je veux que la date de mes articles soit affichée en blanc, en arial, en 12px, soit alignée à droite...
.date {color:#FFFFFF; font-family:Arial; font-size:12px; text-align:right;}
 
Je veux que publié par ... soit écrit en rouge, en 16px et centré :
.publishedBy {color:#CC0000; font-size:16px; text-align:center;}

Je veux que mon titre d'article ait une image en fond :
.divTitreArticle
{background-image: url(http://adresseduneimage.gif);}