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 trialLeigh Miller
1,724 PointsRemoving 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
9,767 PointsExactly 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.
Leigh Miller
1,724 PointsI 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
17,781 PointsWhat if you try list-style: none
Leigh Miller
1,724 PointsThanks! But no-go. That was my first try...bullets still there.
Chris Dziewa
17,781 PointsTry removing your inline styles and put this into your style.css file.
ul li {
list-style-type: none;
}
Chris Dziewa
17,781 PointsIf that doesn't work, feel free to post your entire page source code.
Leigh Miller
1,724 PointsNo 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
9,767 PointsTry
ul.no-list{
list-style:none;
}
Get a link to the page up as well.
Leigh Miller
1,724 PointsThanks, 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.
Matt Campbell
9,767 PointsLooking 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
1,724 PointsYes! 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
17,781 PointsLeigh Edwards , Try removing li
from all of your selectors on line 487 of your css.
Leigh Miller
1,724 PointsThanks 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
17,781 PointsHmm 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!
Chris Dziewa
17,781 PointsChris Dziewa
17,781 PointsI 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
1,724 PointsLeigh Miller
1,724 PointsHi! 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:
The list still has bullets. I must be doing something wrong. Any more help?
Matt Campbell
9,767 PointsMatt Campbell
9,767 PointsI've added a new comment at the bottom Leigh Edwards