abasel
August 23, 2013, 11:45am
1
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?
ronpat
August 23, 2013, 6:09pm
2
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.
abasel
August 23, 2013, 9:56pm
3
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');
}
ralphm
August 23, 2013, 10:25pm
4
What’s your aim here? If you want to remove the bullet image, you can just remove it from the CSS.
abasel
August 23, 2013, 10:45pm
5
I only want the bullet points removed from the .list-footer area and not the entire site.
ralphm
August 23, 2013, 10:58pm
6
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;
}