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

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.