Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Bullet points in widgets

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

26 answers to this question

Posted · Report post

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; }

2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, I'll wait :-)

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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 ^:)^

Share this post


Link to post
Share on other sites

Posted · Report post

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

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

Will do!

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry, still not working.

Share this post


Link to post
Share on other sites

Posted · Report post

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 ?

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

I just can't seem to make the bullet points appear in my sidebar. Here's the css I'm using:

 

 
.widget ul li {
    font-size: 1em;
    list-style-type:disc; 
    list-style-position:inside;
    display: block;
    padding: 0px 2px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Never mind, I found the answer that Danny posted on page 1 of this thread. Thanks.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites