I want to remove(hide) bullets (dots) with css code, but I can`t
Please tell me what I do wrong:
1) I give class name in my case: .no-bullets
2) I use this css code:
.no-bullets {
list-style-type: none;
}
this is not working for me...
Then I use this css in theme stylesheet:
ul
{
list-style-type: none !important;
}
again nothing...
Please help me with this, thank you in advance
here is my suggestion:
ul {
list-style: none;}
the list-style properties apply to elements with display: list-item only ,make sure your list elements doesnt have any other display style.UPDATE
seeing your link your style.css file is overriding your custom style with list-style-type: disc; you have to get rid of this line.
UPDATE 2use this code in your custom css .entry-content ul > li {
list-style-type: none !important;
}
this will do the job quickly.
Related
So only within my sidebar widgets does this bullet above the widgets occur. I am not sure what custom css code to use to get rid of this. That is why I uploaded the picture of the inspect element to see if anyone can help me identify where the problem is coming from. Thank you so much in advance.
li {
list-style-type: none;
}
Try this
#sidebar-footer-secondary>div>li{
list-style: none;
}
or
.sidebar-footer-secondary>div>li{
list-style: none;
}
You must add class to selector, if you only want to change widget lists.
li.widget { list-style-type: none; }
You will need to remove the bullets with list-style CSS property. Ideally you'll want to use a CSS class to do this and since you're using WordPress try and use a class provided by the widget to hook onto. We hook onto a CSS class so we don't affect all ul or li on the page.
Not sure what yours would be but it might be something like this pseudo code:
<ul class="widget-alpha">
<li></li>
</ul>
.widget-alpha {
list-style: none;
}
FWIW, it's a bit odd that I don't see a ul for the li in the screenshot. The only permitted parents for li are ul, ol and menu.
If the li is the container element for the widget then the CSS selector would still work as we're not targeting a specific element but a CSS class of the widget.
I have been trying to remove the bullet and indent from a < ul> element for quite a while now and I just can't figure out how - or rather why it's not working.
There are several solutions here on overflow, however none of them is working for me.
this should work(?) but it doesn't:
.widget li {list-style: none; } or:
.widget li {list-style-type: none; } (!important does not help)
here is the link to the page with the problem and a picture of the location I mean: any ideas? thanks!
http://wuttke-klima.witconsult.de/neue-firmenzentrale-der-fam-magdeburg/
that arrow is displaying from a :before just display:none it
Remove the left padding to remove padding on li
.arpw-ul li:before { display: none; }
.arpw-ul li { padding-left : 0 }
TIP : Just use google chromes inspect element to test these kind of things. just live results
Looks like you have a pseudo-element that creates the arrow bullet. You should be able to remove it with:
.footer-widget li:before, .widget li:before {
border: none;
}
If that is really a bullet (seems like it is not) then this shall help:
.widget li { display:block; }
But I suspect it is not a bullet but something else (like ::before pseudo element). Use DOM/style inspector tool in your browser.
Try this:
ul {
list-style-type: none;
}
I´m having the problem with wordpress, that i use a custom menu to show me image-links. But i just cant get rid of the list-style-type-circle. I searched all the wordpress code and deleted every single of these circle-expressions, but still it shows up.
Heres the link to the page, on the left side you have the menu.
http://web318.login-11.hoststar.at/ben/az3wp/
cheers
Line 121 of style.css is causing this, it uses:
ul {
list-style: disc;
}
Add the following to override it:
.menu-item {
list-style: none;
}
Or remove the rule all together.
This should work
.menu {
list-style-type: none;
}
Change list-style to none around line number 121 at /wp-content/themes/az31/style.css
ul { list-style: none; }
I'm working with Pagelines theme on a Wordpress site.
The default overrides hide the bullets and tweak the margins and padding.
I've been debugging the Firebug. Found the CSS. Redefined styles for the UL element and LI elements I want to show bullets for. They still won't work.
The website URL is http://royalaire.com/site/
The offending list is in the sidebar, a nested list in navigation links.
I want second-level indented items bulleted.
Default are defined as:
.widget ul li ul li {
margin-left: .03em;
}
.widget ul li {
display: block;
font-size: 0.95em;
list-style: none outside none;
padding 0 2px;
}
I tried with the following:
.widget ul.children li.page_item {
list-style-type: disc;
}
Any ideas?
I'm not a CSS expert and I have some trouble figuring out which definitions you have written for that list, but I know that adding !important after a style definition will make sure that it overrides all parent definitions. try:
.widget ul.children li.page_item {list-style-type: disc !important;}
Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny
No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a
What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.
Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.