Personnalisation CSS du blog de Divi

15 Sep 2017

Bonjour !

Depuis un moment je cherchais à améliorer l’affichage du blog de base de Divi…
Voilà qui est fait avec quelques lignes de CSS !
Et vous pouvez vous en rendre compte directement sur ce site 😉

Personnalisation CSS blog Divi

Opérations préliminaires

Pour obtenir ce rendu, il faut avant tout :

  • saisir « j M » (sans les guillemets) pour le format de date dans la page principale des options Divi,
  • afficher uniquement la date dans les meta-données de l’article (Options Divi, onglet Layout / Paramètres généraux).

Explications

  • float left, width et padding pour l’image afin de la réduire et de la placer à gauche avec un peu d’air
  • :after de article afin d’empêcher le float précédent (l’image) de dépasser du bloc article quand le texte est trop court (astuce du « clearfix »)
  • personnalisation du style de la date pour les listes et les pages d’articles via .post-meta
  • positionnement relatif de la date pour une page d’article simple afin de la décaler sur l’image
  • positionnement absolu de la date dans les listes d’articles pour la placer dans le coin de l’image, avec positionnement relatif du conteneur article, car le positionnement absolu d’un objet (ici, la date) est relatif (eh oui !) au premier ancêtre positionné (et si aucun, la page !)

A retenir car souvent source de confusion :
Le positionnement absolute est relatif à la position du premier ancêtre positionné. Le positionnement relative, lui, est relatif à la position de l’objet lui-même dans le flux s’il n’était pas repositionné.

Remarque

Ce code permet de personnaliser le blog avec du CSS uniquement… d’où utilisation du « clearfix  » et modifications limitées. Le but étant pour moi de ne pas créer de thème enfant avec du PHP modifié. Choix très personnel, bien évidemment 😉

Le code CSS

A ajouter au CSS personnalisé des options de Divi :

.blog .et_pb_post > a img, .category .et_pb_post > a img {
  max-width: 40%;
  float: left;
  padding: 0 30px 25px 0; }
.blog article:after, .category article:after {
  content: "";
  display: table;
  clear: both; }
#left-area .post-meta {
  width: 55px;
  text-align: center;
  line-height: 1em;
  font-weight: 900;
  font-size: 18px;
  color: white !important;
  background-color: #e61071;
  border-radius: 3px;
  padding: 7px 7px;
  margin: 0; }
.single-post #left-area .post-meta {
  position: relative;
  top: 35px;
  left: -15px; }
.blog article, .category article {
  position: relative; }
.blog #left-area .post-meta, .category #left-area .post-meta {
  position: absolute;
  top: -5px;
  left: -5px; }