Style WPP list with circles not possible?

Hi @newslicer,

Well that should work, unless:

1. You’re using a widget theme (eg. Cards Compact), and in that case you want to read this: Customizing an existing WordPress Popular Posts widget theme, or
2. If you’re not using a widget theme then your WordPress theme might be overriding your custom CSS rule with its own. Try adding !important to your list-style rule and see if that helps.

Thank for the fast reply @hcabrera!

I tried to do this but it doesn’t help:

.wpp-list ul {
    list-style: circle !important;
}

The page (see widget on the right) is this one.

Maybe there is another way?

Ah, your popular posts list is missing all of its LI tags for some reason, that’s why your CSS rules are not working: there are no LI tags ??

Add them back and it should work.

Ah! Oh how i hate custom code ??

The li-tags are now present, but it’s still not working (somehow).

This is my code

[wpp stats_author=1 range='last24hours' limit=5 stats_views=1 order_by='views' post_html='<li>{title} ({views})</li>' pid='7871,258,1908,136,1348']

Thanks so much for your help!

Oh, there’s a minor mistake in your CSS code. You have:

.wpp-list ul {
    list-style: circle !important;
}

It should be:

.wpp-list {
    list-style: circle !important;
}

Or:

.wpp-list li {
    list-style: circle !important;
}

It tried your other examples but it’s not working in either way.

Please help me – i think i will soon loose my mind ??

Alright. Please change your CSS to:

.wpp-list li {
    overflow: visible !important;
    list-style: circle !important;
}

That should fix it.

That’s it!

Merci Héctor – you saved me!

The last (i promise ;)) question would be why the list items have so much space beween them. Pls compare to the list in the box below.

Ah, that’s easy. It’s because of the margin-bottom property the plugin is applying to your list. Your other list doesn’t have that, hence the difference.

Try this:

.wpp-list li {
    overflow: visible !important;
    margin-bottom: none;
    list-style: circle !important;
}

or:

.wpp-list li {
    overflow: visible !important;
    margin-bottom: none !important;
    list-style: circle !important;
}

Wow, now it’s perfect! But i had to use this code:

.wpp-list li {
    overflow: visible !important;
    margin-bottom: 0 !important;
    list-style: circle !important;
}

Let me say A BIG THANK YOU! This issue has been solved.

Your’e making such a great work here. The plugin is so very useful it use it with a lot of gratitude on my site.

Ah yes, my bad ?? Glad you were able to sort it out, and thanks for the kind words!