WordPress : Comment styliser un widget avec un nombre de publications différent de celui sans nombre de publications

Publié par Jean-Michel le

J’ai une bordure sous mes éléments li dans les types de widgets wordpress qui seraient appropriés. L’élément a à l’intérieur est ensuite configuré pour bloquer afin de leur donner une belle largeur facile à cliquer.

Le problème, lorsque vous choisissez l’option « afficher le nombre de publications » lors de l’ajout d’un widget tel que des catégories ou des archives, il affiche le nombre de publications sous forme de texte brut après la balise a et parce que la balise a est bloquée, il pousse le texte du numéro de publication à la ligne dessous.

Que vous choisissiez d’afficher ou non le nombre de publications, cela vous donne toujours exactement le même identifiant d’élément, par exemple « widget_categories ». Alors, comment puis-je styliser le nombre de messages afin qu’il ne soit pas sur la ligne suivante tout en conservant les liens pour les éléments de liste sans nombre de messages sur toute la largeur?

Voici un exemple sur la barre latérale www.bbmthemes.com/themes/modular/blog-standard/

Solution n°1 trouvée

Afin de résoudre votre problème, vous devrez supprimer le

display:block;

pour le ul.widgets ul aet ajouter à sa place

line-height: 33px;

Ce que vous allez réaliser avec cela, c’est d’avoir le même effet visuel.

Ce que vous allez perdre en faisant cela, c’est que vos liens ne fonctionneront que sur le texte et non sur la « boîte ».

L’autre solution consiste à trouver d’où vient ce nombre de messages et à y apporter quelques modifications. Par exemple, modifiez le nombre de textes pour qu’il soit à l’intérieur d’un <span class="post_count">afin que vous puissiez appliquer une mise en forme CSS sur cette classe afin de résoudre correctement votre problème.

J’espère que cela t’aides

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *