CH1

Depuis la version 2.6 de WordPress,  il est possible d’ajouter un texte de légende (caption) sous les images. Cette nouvelle fonction cause fréquemment un problème d’affichage que nous vous proposons de résoudre.

La fonction “Caption” sert en fait à créer un cadre autour de votre image mais également à afficher une légende dans ce même cadre gris.

Malheureusement, il est fort possible que ce que vous voyez dans l’éditeur de texte ne ressemble pas à ce qui est affiché dans votre blog. Problème d’affichage, d’image qui ne se place pas au bon endroit, de déformation de chartes graphiques …

Pour palier à ce problème, La solution se trouve dans le CSS

Les classes css pour aligner les images et les blocks (DIV, P, TABLE, etc…) étaient intégrées dans les versions de WordPress jusqu’à la 2.5 : « aligncenter », « alignleft » et « alignright ».

A partir de la version 2.6. ces classes ne sont plus intégrées directement. Il faut donc les ajouter dans le code pour que les images se placent au bon endroit et que les légendes s’affichent correctement.

Ouvrez le fichier “style.css” qui se trouve dans votre dossier thème et copiez-y les lignes suivantes :

/* ———— legendes ————*/
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* —————– fin legendes—————–*/

A vous maintenant de modifier ce code selon vos préférences et le design de votre site.

Choix d'articles récents :

Tags : Wordpress