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…

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

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

Widgets on pages with bullets removed

Tags: , , , , , , ,

Comments

40 Responses to “Removing bullet points from Widgets on Pages sidebar”

Scot Manaher says:

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.

Reply
todd says:

Hey Scott,

Thanks for the link… it looks excellent, you’ve done a great job of blengding thw whole thing together nicely.

Reply
HDHP Expert says:

I love this plugin but am trying to remove the bullet points – being somewhat new to CSS I am confused on where to put the line of code you are suggesting I add to style.css.

Am I safe in assuming I cannot simply just add it anywhere?

Reply
todd says:

Thanks for the comment… you should be safe to put this anywhere but if you add it at the end you should be safest.

Todd

Reply
Kevin says:

Hi todd
usually i have no trouble sorting out problems, but this one has me stumped!
It should be so straightforward, but adding this line to the CSS does not remove the bullets…can you see why?
I’m then hoping I can style each separate widget differently through the CSS – is this possible?
Very happy to contribute as a thank you if i can get this working how i need it.
thanks
kevin

Reply
todd says:

Hey Kevin,

Can you post a link to a page where you’re seeing this issue? If so I’ll take a peek.

Also, yes you shuold be able to style the widgets independantly through the css… again if you provide a link and an example of what you mean we’ll be happy to take a look for you.
Todd

Reply
Kevin says:

Hi Todd

do you get the link when it’s in the website box above where I type this? prefer the site not to be public knowledge yet!

if you don’t see it, can I email it to you?
thanks

Reply
todd says:

Hey Kevin,

Yes I get the link… the page looks good.
For further help please feel free to mail instead.

Ta,
Todd

Reply
bassam darras says:

maan !!!!

this is really amazing blog million thank to you for helping me it was a night mare for me to remove and you gave me the solution thanx again

Reply
Jacob says:

I’m having the same problem that Kevin had. Not used to editting css files and not sure where to put the line of code. I’ve tried it at the end of the file but it has no effect. Any ideas? Thanks.

Reply
wordpress says:

wordpress…

[...]Removing bullet points from Widgets on Pages sidebar | Gingerbread Design[...]…

Reply
    Antony says:

    Hi,

    Thanks for this very helpful plugin.
    However, I have a real hard time trying to get rid of those bullets… I tried every tip I could come across, with no luck.
    I would be very grateful if I could get some help….
    Thanks in advance,

    Antony

    Reply
Sean says:

Great plugin. I’ve been running into the bullet issue. Using version.11 and have the checkbox checked to remove bullets. Theme still seems to reference the .page and .post bullet styling rather than widget on pages styling.

Could not figure it out so resorted to a plugin (Specific CSS/JS for Posts and Pages) to add css styling to individual pages and removed bullets. Still would be nice to have an understanding of why the plugin style is being overridden.

Have not fixed it on a second site yet. I’ll leave for a week or so, so you can issue live: http://fourtoscore.com/workforce-solutions/workplace-law-alerts/

Any thoughts or solutions always appreciated.

Reply
todd says:

Hey Sean,

You will need to be more specific with your CSS selectors due to the theme’s own styling.

If you add the following to the end of the styles.css on the fourtoscore site you should see what you’re after.

#content .page .widgets_on_page ul li {list-style:none;}

Hope this helps,
Todd

Reply
Sean says:

Thanks Todd. I used something like that in an html editor, where I removed the site styling on the specific page and then added bullets back in.

My site style is: #content .page ul li {list-style:square;}

Tried your suggested code ( #content .page .widgets_on_page ul li {list-style:none;} and worked like a charm.

Time to drop a tweet about your plugins and great response time.

Thanks

Reply
todd says:

Great news Sean, very pleased to hear.

Of course if you’re impressed with the plugin and support then a nice 5* ranking over here would be really appreciated.

Reply
Antony says:

Hi,

Great plugin ! However I try to remove the bullet points in every way possible, without success.
Could you please help me out ?
Thanks in advance,

Antony

Reply
Antony says:

Hi Todd,

No, there IS a bullet point : right on top left of the Facebook like button, (upper right side of the page, just above the video) there’s a blue bullet point. And it’s kind of disturbing because when the FB facepile is active, it causes the right part of the upper page not to be aligned with the adress on the left side.
Do you want that I send you a screenshot ?
Thanks for looking. I’d really like this issue to be fixed…
Thanks in advance,

Antony

Reply
    todd says:

    Ah right, sorry I was looking at the wrong page (didn’t know you wanted me to go through the 1st page).
    I’m afraid I can’t see why this is there. Can you add a different widget to see if the same thing happens? An alternative would be to add the FB stuff via it’s own shortcode rather than a widget?

    Reply

Leave a Reply