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…
UPDATE
As of version 0.0.10 which can be found on the WordPress plugin repository there is a simple checkbox on the Widgets on Pages option page to remove the bullets. If you’re running this version then you will not need to use the tutorial below… we have kept it here for the sake of learning.
Switching this option on adds a new CSS file link to the website header which basically just includes the content described in the below tutorial.
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; background: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; background:none; }
Widgets on pages with bullets removed
