Removing bullet points

I am trying to modify an existing template. Basically all unordered lists have a square icon but for my navigtion at the bottom of http://www.rosmini.school.nz/index.php/component/chronoconnectivity/StaffList?start=65&limitstart=0 ( Start Prev 5 6 7 8 9 10 11 12 13 14 Next End). In this regard I added the following css:

.list-footer ul li { display: inline; }
.list-footer ul { list-style-type: none; }

The first line worked getting the nav bar horizontal. However no matter what I do, I can’t get rid of the square bullet.

Can anyone help?

If you are talking about the dotted square in front of the numbered items in the lower half of the page, they are not normal list markers. They are being inserted by the following graphic:

template.css (line 1980)


.art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before
{
  content: url('[color=red]../images/postbullets.png'[/color]);[/color]
  margin-right: 6px;
  bottom: 2px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
}

You can remove them by commenting out or deleting the entire rule set, or by deleting the article and div selectors that target this <ul>.

As always, be sure to look for “side effects” on other pages.

Thanks for that; it pointed me in the right direction. Not sure if this is the best way to do it but this is what I did and it achieved the desired result:

  • Created a 1x1 transparent block called blank.png
  • In my custom.css added
.art-postcontent .list-footer ul>li:before, .art-post .list-footer ul>li:before, .art-textblock .list-footer ul>li:before
{
  content: url('../images/blank.png');
}

What’s your aim here? If you want to remove the bullet image, you can just remove it from the CSS.

I only want the bullet points removed from the .list-footer area and not the entire site.

O, I see. You could also just remove the image like this:

.art-postcontent .list-footer ul>li:before, 
.art-post .list-footer ul>li:before, 
.art-textblock .list-footer ul>li:before {
content: '';
}

Or, perhaps better, you could make the original more specific, so that it’s not applied where you don’t what it in the first place. E.g.

.art-block ul.[COLOR="#FF0000"]latestnews[/COLOR]>li:before {
content: url('../images/blockbullets.png');
margin-right: 6px;
bottom: 2px;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 0;
margin-left: -11px;
}