Style WPP list with circles not possible?
-
Hello Team,
thanks for the awesome plugin.
How can i style the WPP list (Widget) with circles? In my case the list is shown as a list but has no circles.
Putting this CSS code doesn’t help unfortunately:
.wpp-list ul { list-style:circle; }
The list is still without circles :/
Any help would be great.
Thank you
AndrΓ©-
This topic was modified 3 years, 6 months ago by
newslicer.
-
This topic was modified 3 years, 6 months ago by
-
Hi @newslicer,
Well that should work, unless:
- 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
- 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.
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!
- The topic ‘Style WPP list with circles not possible?’ is closed to new replies.