SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.p...5&limitstart=0 ( Start Prev 5 6 7 8 9 10 11 12 13 14 Next End). In this regard I added the following css:

    Code:
    .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?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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)
    Code:
    .art-postcontent ul>li:before, .art-post ul>li:before, .art-textblock ul>li:before
    {
      content: url('../images/postbullets.png');[/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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    .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');
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What's your aim here? If you want to remove the bullet image, you can just remove it from the CSS.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    O, I see. You could also just remove the image like this:

    Code:
    .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.

    Code:
    .art-block ul.latestnews>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;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •