Personnaliser le cadre des images et de la légende sur blogger

décembre 28, 2010
Cadre sur image et légende


En changeant de modèle, vous êtes souvent confronter à ce genre de problème : l'absence de cadre à vos images et de vos légendes. Aujourd'hui je vais vous montrer comment le personnaliser

1. Aller au panneau de configuration de blogger
2. Présentation
3. Modifier le code HTML
4. Télécharger le modèle dans son intégralité (avant toute modification sur votre blog, il est indispensable d'en sauvegarder une copie)

Ajouter un cadre aux images et aux légendes :

Pour avoir la même présentation que celle de mon blog,   il suffit, d'ajouter ce code au niveau de la partie .post { (après ou avant le code du blockquote).
.post img, table.tr-caption-container {
  background:#D4D2D5;
  padding:4px;
  border:1px solid #BEB39D;
  }
.tr-caption-container img {
  border: none;
  padding: 0;
}

Bien entendu, rien ne vous empêche de personnaliser ce code, vous pouvez :
  • soit choisir d'enlever l'arrière plan (donc vous aurez par défaut, l'arrière plan de votre post)
  • soit mettre une nouvelle couleur en changeant le code couleur

Pour choisir par défaut la même bordure que votre post, dans ce cas là veuiller mettre le code suivant :
  border:1px solid $borderColor;

Cadre seulement sur vos images 

Si vous ne souhaitez pas de cadre à votre image, veuillez enlever donc le code suivant
.tr-caption-container img {
  border: none;
  padding: 0;
}

Pour terminer, sauvegarder votre modèle.

6 commentaires:

  1. Coucou TJ !
    J'ai voulu essayer ta recette, mais...
    Tu dis :
    "il suffit, d'ajouter ce code au niveau de la partie .post { (après ou avant le code du blockquote)."
    Chez moi j'ai des :

    /* Posts
    ----------------------------------------------- */

    .post-outer {
    h3.post-title {
    .post-body {
    .post-header {
    .post-footer {

    mais pas de .post {
    bouuuuuuuuuuuuuuuuuuuuuuuuu !!!!!!!!! Ouinnnnnnnn

    RépondreSupprimer
  2. Je l'ai mis avant le blockquote..

    RépondreSupprimer
  3. ça tu l'as déjà dit mais je ne suis pas plus éclairée... Je ne vois aucun ".post {"

    RépondreSupprimer
  4. Tu cherches dans ton template :
    .post-body {
    .....
    }

    et tu le colles le code toute suite après.

    RépondreSupprimer
  5. Empreintes Inédites31/07/2011 04:53

    Merci TJ... J'ai fait, mais je ne dois pas être bien douée car je n'ai vu aucune différence à l'arrivée... pas grave...

    RépondreSupprimer
  6. essaie de virer
    .Image img,
    .BlogList .item-thumbnail img

    mais avant sauvegarde ton template

    RépondreSupprimer

Fourni par Blogger.