Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Leigh Miller
Leigh Miller
1,724 Points
Posted by Leigh Miller
Leigh Miller
1,724 Points

Removing bullets from UL in Wordpress

Hi!

This is my first time posting to the forum, so please let me know if you need more information to help out. I'm having trouble on a WordPress page getting rid of the bullets on unordered lists.

Here's the code on a new page that I've created where this is the case:

<ul class="no-list" style="list-style-type: none !important; background-image: none;">
    <li>
<h3>1. Can you explain what Family Dinners are?</h3>
Family Dinners is the name of a great dining option for all of the busy professionals and parents out there who know how important it is to eat good, wholesome food at home with their families, but struggle to find time to cook in their packed schedules.</li>
    <li>
<h3>1. Can you explain what Family Dinners are?</h3>
Family Dinners is the name of a great dining option for all of the busy professionals and parents out there who know how important it is to eat good, wholesome food at home with their families, but struggle to find time to cook in their packed schedules.</li>
</ul>

I've tried putting the list-style-type as no inline (as seen above) as WELL as putting this CSS code at the very bottom of the Child Stylesheet in Wordpress:

.no-list { list-style-type: none !important; }

None of this is working. Bullets still show up. Help?

Thanks! Leigh

13 Answers

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Exactly where do you want the list-styling removed from? I've got rid of it on everything on the homepage but don't know where you want it gone from exactly Leigh Edwards.

It looks like you're using a theme and as such, are working on a child theme. Using broad stroke selectors won't work as most of the things in the theme have been given ids which are stronger than classes, being as specific as you can get of course.

What you need to do, is inspect the elements you want the list styling taken off of and then apply the styling rule to the ID of the list.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

I agree with Matthew here, also I would add that you should avoid inline styling whenever possible and that !important should be avoided when the same issue can be taken care of with specificity. If you are interested in learning more about specificity check out this specificity tutorial by Chris Coyer.

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

Hi! Thanks for your help. Sorry if I haven't been clear. What I'm trying to remove are the bullets from the ul at the top of this page: http://www.fostersmarket.com/fostersonthefly/samplemenus . It's the three item list at the top that has "sample breakfast menu" "sample lunch menu" and "sample evening menu."

The specificity tutorial was great. Thank you for that.

So right now on the page as it is, I've put an in-line element for the ul which has a "list-style-type: none;" style, which is supposed to, according to the tutorial, override all other css commands. The list, though, still has bullets.

I've also done the other suggestion, which is to add an id to the list (sample-menus) and then target that id at the bottom of the Child stylesheet. It says: 

ul#sample-menus li {
  list-style-type: none;
}

The list still has bullets. I must be doing something wrong. Any more help?

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

I've added a new comment at the bottom Leigh Edwards

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

I guess it's also worth saying that I've targeted the CSS in both the in-line and on the style-sheet as !important, and it still doesn't work.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

What if you try list-style: none

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

Thanks! But no-go. That was my first try...bullets still there.

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Try removing your inline styles and put this into your style.css file. 

ul li {
    list-style-type: none;
}
Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

If that doesn't work, feel free to post your entire page source code.

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

No go. I just went ahead without making it a list, though there are some other pages that have lists which I don't want to have bullets. So I created this test page, which, with the CSS with the code you listed above as the last entry on the style.css file, still has bullets:

<ul>
  <li>List One</li>
  <li>List TWo</li>
</ul>

Any more thoughts are much appreciated.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Try

ul.no-list{
    list-style:none;
}

Get a link to the page up as well.

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

Thanks, but no go. This is the case on the whole website, so here' s a published page with the bullets next to an un-ordered list (the sample menus at the top).

I've tried in-line list-style: none; (and list-style-type: none;) CSS, which doesn't work. I've tried list-style: none; (and list-style-type: none;) CSS at the bottom of the Child stylesheet.css targeting all unordered lists, which doesn't work. (See suggestion by Chris above). I've tried giving each of the unordered lists a class and targeting them (see Matthew's suggestion above). I'm about out of ideas. Again, this is the case on any of the pages on this site where I try to add unordered lists.

http://www.fostersmarket.com/fostersonthefly/samplemenus/

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Looking at the code:

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

will remove list decoration on all lists. 

ul#sample-menus li{
    list-style:none;
}

will remove styling on that list.

The list styling is on the li elements, not the list so assigning list-style to a menu won't work because it's put back on later on. Assigning it to ALL lists won't work because there's specific rules for each list item.

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

Yes! Sorry if i wasn't clear, but that is what is currently at the bottom of the CSS (as shown above) that is precisely what isn't working. The list still has bullets with that exact CSS (IDing the Sample-Menus) being used. Anything else?

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Leigh Edwards , Try removing li from all of your selectors on line 487 of your css.

Leigh Miller
Leigh Miller
1,724 Points
Leigh Miller
Leigh Miller
1,724 Points

Thanks Chris. Did that, but still didn't take away the bullets. You all's help is much appreciated, but I think for now it's not worth the stress. I can live with the bullets for all this!

Chris Dziewa
Chris Dziewa
17,781 Points
Chris Dziewa
Chris Dziewa
17,781 Points

Hmm that is very strange. If you decide to fix it later, try removing unnecessary selectors on the list element as well as any inline styles. Usually it is better to remove the problem CSS than to add more. Good luck!