The guys over at MarketHeist recently put together an ace plugin to add real time stock and forex charts to your WordPress powered site. And with this they suggest using the Widgets on Pages plugin to be able to have data in a standard WordPress post or page instead of in a sidebar.
To help out folk wanting to acheive this they’ve put together a great YouTube tutorial on how to use it… so for all you guys out there wanting to see Widgets in Pages in action check it out.
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 styleddeliberately 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; }
Our newest WordPress plugin Widgets on Pages has just been released (and actually already improved and upgraded to 0.0.2). The plugin allows for a widget area (sidebar) to be populated and then shown inline in a the core content of a page or post.
This can be very useful if you need to, for example, display separate areas of content on the front page of your site… and all the time making sure the content is still manageable by normal wordpress content managers.
At present the plugin only supports one definable widget area that can be used (though it can be included in multiple pages and/or posts.
