Resolved Bullet points in widgets

[yemoonyah+ 2]

Hi, I'm trying to make my sidebar widgets show bullet points so I added this to custom css:

ul.sidebar_widgets {
	list-style-type: square;
	}

Unfortunately this does not work. Any suggestions are very welcome :-) Thanks

[Rob 547]

Wow, you've stumped me on this one. I've tried several variables, but none of them resulted in the display of any type of bullet. I'm going to ask one of my colleagues to look into this in the morning. Apologies for the delay.

[yemoonyah+ 2]

No problem, I'll wait :-)

[Jenny 33]

Where do you want the bullet points to appear? Can you do a quick mock-up for us?

[yemoonyah+ 2]

I want the bullet points to appear in the tabs widget (popular/recent/categories) in my sidebar. See here: http://creativewebbiz.com/2012/06/14/dont-focus-much-details/

[Rob 547]

Try this, but if it doesn't work, blame Henry! ;-)

ul#list_sb_primary.sidebar_widgets.fix {list-style: square;}

[yemoonyah+ 2]

Well, tell Henry I said thanks but it doesn't work :-(

[Rob 547]

Will do!

[Henry Perkins 14]

div.tabberlive div#thisismyurl_popular_posts_widget-2.tabbertab ul li {
		list-style: square;
	}

Try that... after further inspecting your site. Is this a text widget that you've coded yourself or a widget that comes with a plugin?

[yemoonyah+ 2]

Hi Henry :-) it's a plugin that displays as a widget and holds three diff. widgets (popular posts, recent posts, categories widget) Tabber Tabs: http://bit.ly/KYTOO7 Code still didn't work. I also tried using your code snippet with just the popular posts widget (not in Tabber Tabs) but it makes no difference. I remember having the same problem displaying bullet points in boxes and back then it worked with the following code (not sure if this helps):

.fboxes ul {
	list-style-type: square;
	margin-top: 5px;
	margin-left: 15px;

Thanks for all the help!

[catrina 103]

What other CSS do you have? Do you have any CSS for this selector?:

ul

(Yes, just this - all alone) From my experience, a certain attribute wouldn't work for a specific selector/element because it was being overwritten by another one.

[yemoonyah+ 2]

Um, I'm not sure what a selector is but the only code containing 'ul' is the one I posted above. Thanks for trying to help out!

[Danny+ 1,327]

Hi Yemoonyah, Try using the custom code below and let me know if that works for you!

.tabberlive ul li { list-style: disc; display: list-item; margin: 0.7em 0 0.7em 0.7em; padding: 0 5px; }

[yemoonyah+ 2]

Sorry, still not working.

[Danny+ 1,327]

Hi, I have this working on my test site, so the code works. I was using a text widget, what type of widget are you adding to the tabber tab widget area ?

[yemoonyah+ 2]

I added -recent posts (standard widget that comes with WP) -categories (standard) - easy popular posts I also just added the normal recent comments widget to test but that also doesn't work. Will see if it's a plugin compatibility issue and report back. Thanks for all the help so far, I really appreciate it!

[yemoonyah+ 2]

Ok, so it's not a plugin compatibility issue. I deactivated all other plugins but the bullet points still don't show up. Any ideas what else could cause this? Here is all the code in my custom css:

body{}
	
	div.dcol-pad {margin-bottom: 60px !important;}
	
	.fboxes ul {
	list-style-type: square;
	margin-top: 5px;
	margin-left: 15px;
	
	body{
	font-size:16px !important;
	}
	
	.tabberlive ul li { list-style: disc; display: list-item; margin: 0.7em 0 0.7em 0.7em; padding: 0 5px; }

[Jenny 33]

After playing around for almost an hour, I got bullets to show up by using:

.tabbertab ul li {
	    display: list-item;
	    list-style-type: square;
	}

If that doesn't work, try adding !important. I think there's some sort of weird conflict going on here but I don't know what it is.

[yemoonyah+ 2]

Yes, there seems to be a conflict because this is also not working. It's not a plugin issue and otherwise I haven't changed anything. What else could it be?

[Danny+ 1,327]

Hi Yemoonyah, OK the code below 100% works, however you will need to view your widgets ID's as they will most likely be different to ones I have provided below. Use either Firebug or Chrome's/Safari's web dev tool to find the correct ID for each widget.

#recent-posts-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#recent-posts-2 ul li { list-style: square; display: list-item; }
	
	#categories-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#categories-2 ul li { list-style: square; display: list-item; }
	
	#text-4 ul { list-style: square; display: list-item; margin: 0 20px; }
	#text-4 ul li { list-style: square; display: list-item; }
	
	#thisismyurl_popular_posts_widget-2 ul { list-style: square; display: list-item; margin: 0 20px; }
	#thisismyurl_popular_posts_widget-2 ul li { list-style: square; display: list-item; }

[yemoonyah+ 2]

I don't know what to say... I replaced the widget ID's (using Chrome web dev tool) but the bullet points just won't show.

[yemoonyah+ 2]

Just found out I can see the bullet points in Firefox but not in Chrome.

[yemoonyah+ 2]

I found the problem! It was an unclosed block in my custom css. Upgrading to 2.2 showed me there was a LESS error which was the unclosed block. Thanks for all the help!!! I really appreciate it ^^

[Danny+ 1,327]

hehe really, I was wondering why it was working for me and not yourself. Nice job find the issue!

[Danny+ 1,327]

The topic was marked as resolved.