Divider between posts

Hi @johnhoston,

Yep, there’s a good chance you could use CSS for this. Can’t give you any specific recommendations though unless you share your site’s URL so I can see what these dividers look like there ??

Thanks for the reply @hcabrera

They are the simple/default wordpress dividers, just like the ones on the right sidebar of this page
——————–>

Yeah, I still need to see your website to provide more guidance. I have no idea how your website’s HTML structure looks like nor what settings you’re using with your popular posts list. Please share your site’s URL so I can have a look and tell you what exactly needs to be done.

@hcabrera the site is accessible only in the company’s intranet.

The HTML code of the sidebar widget containing the plugin is as follows:

<div id="block-122" class="sidebar-box widget_block clr"><div class="widget popular-posts wpp-ajax"><!-- cached -->
<ul class="wpp-list">
<li>
<a href="https://..." class="wpp-post-title" target="_self">...</a>
 <span class="wpp-meta post-stats"><span class="wpp-date">2 weeks ago</span></span>
</li>
<li>
<a href="https://..." class="wpp-post-title" target="_self">...</a>
 <span class="wpp-meta post-stats"><span class="wpp-date">1 week ago</span></span>
</li>
</ul>
</div>

We just need a simple divider between the {li} tags, hust like the latest posts widget.
I hope this helps.

• This reply was modified 3 years, 2 months ago by johnhoston.

Yes that was helpful, thanks @johnhoston.

Try adding these CSS rules to your website (eg. via Customizer):

.wpp-list li {
    padding: 1rem 0;
    margin-bottom: 0;
    border-top: 1px solid #eee;
}

You may need to tweak the values a bit but hopefully this should get you on the right track.

If you’re using a caching plugin and/or a plugin that minifies / bundles CSS files you may need to clear its cache afterwards for these CSS rules to take effect.

@hcabrera it works, thank you!

To make it perfect, is it possible to add a divider after the last post too?
This way it will be exactly the same like the other widgets.

it works, thank you!

Don’t mention it, glad I could help!

To make it perfect, is it possible to add a divider after the last post too?
This way it will be exactly the same like the other widgets.

Yep, this should do the trick:

.wpp-list li:last-child {
    border-bottom: 1px solid #eee;
}