Removing bullet points from Widgets on Pages sidebar
We’ve had several people asking how they can style the wordpress widgets that are displayed in their posts and pages when using the Widgets on Pages plugin… so we thought we’d write up a set of tutorials on how to get what you want from the plugin. We start with our most requested style query…
Removing the bullet points
The problem
When using the Widgets on Pages plugin to show a widgets outside of the normal sidebars defined by a wordpress theme the outputted widgets can appear with bullet points next to them.
Widgets on Pages with bullet point showing
The cause
WordPress outputs the widgets in a sidebar as an unordered list (HTML ul tag). A lot of themes have these unordered lists styled with the CSS list-style: disc or something similar (browsers can have this as their default too) which means these bullet points appear. The reason you don’t see these bullet points next to the widgets in the standard theme sidebars is that they have been styled deliberately to remove these.
The solution
All we have to do is style the list using the CSS list-style property… simply add the following to the theme’s CSS file… et voila!
div.widgets_on_page li { list-style:none }
Note: Pre 0.0.7 versions have an id of widgets_on_page rather than class
div#widgets_on_page ul { list-style:none }
Widgets on pages with bullets removed
Tags: css, pages, plugin, posts, sidebar, style, widgets, wordpress
Comments
5 Responses to “Removing bullet points from Widgets on Pages sidebar”
Hey thanks for this awesome plugin and plus the fix with the bullet! This works great with another plugin IFrame Widget. I put my amazon store within it and looks awesome.
Hey Scot, glad you have found this of use… Fancy posting a link so I can see it in action?
Sorry I did not get back to you sooner. But yes here it is in action. It looks very professional. I had to edit some code to remove the border but got it all working. http://nichewebsitestrategy.com/estore
The look I was aiming for was the store would like it is part of the existing website.
Thanks again Todd.
Hey Scott,
Thanks for the link… it looks excellent, you’ve done a great job of blengding thw whole thing together nicely.
[...] Improved use of id and class attributes for more standard proof CSS implementation. NOTE: this may mean that current CSS to remove default bullet points now breaks. Please see our blog post on removing these bullet points. [...]
Leave a Reply