22 mars 2013

Ajouter un séparateur d'articles

Je vous avais proposé il y a longtemps (le 22 décembre 2009) une astuce permettant d'insérer une image à la fin de chaque article (voir Un séparateur d'articles). On peut bien sûr obtenir le même résultat en modifiant le HTML mais c'est plus ardu et surtout pourquoi se priver d'utiliser un moyen simple : modifier quelques lignes de la feuille de style (en mode avancé).

Cette astuce est devenue pratiquement obsolète avec la possibilité d'ajouter ou non "une barre de partage en fin de message" et/ou "une barre de vote à la fin de chaque message" (voir dans le tableau de bord le menu "paramètres", "options d'affichage"). Que ces deux barres apparaissent ou non au gré de votre humeur, il faut que l'image utilisée pour séparer les articles soit à sa place .

Au lieu de donner à la propriété height du sélecteur .blogbody.itemfooter une valeur fixe calculée en fonction de la hauteur de l'image choisie, on lui donne la valeur auto qui permet au bloc de se dimensionner en fonction de son contenu (en fait, c'est ce qui se passe par défaut !) :

 

.blogbody.itemfooter {
    ...
    height: auto;
}

 

Ensuite on définit une marge intérieure inférieure (padding-bottom) d'une hauteur un peu plus grande que l'image. Par exemple, si l'image fait 50px de haut, on prend 70px et on écrit :

 

.blogbody.itemfooter {
    ...
    height: auto;
    padding-bottom: 70px;
}

 

Et enfin on ajoute l'image en spécifiant sa position (bottom center) et si elle doit être répétée ou non (no-repeat) :

 

.blogbody.itemfooter {
    ...
    height: auto;
    padding-bottom: 70px;
    background: url(adresse de l'image) bottom center no-repeat;
}

 

Ainsi on pourra choisir d'afficher les barres de partage et de vote puis de les cacher ou de n'en afficher qu'une et l'image sera toujours à la bonne place. Un exemple tiré du design NEW NEW CIRCUS :

 

divider-article-2013affichage des barres de partage et de vote

 

divider-2-article-2013sans les barres de partage et de vote

Posté par Michal53 à 10:02 - - Permalien [#]
Tags : , , , , , , , ,