Web Analytics Made Easy -
StatCounter Use color dots instead of numbers - CodingForum

Announcement

Collapse
No announcement yet.

Use color dots instead of numbers

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Use color dots instead of numbers

    I have a page where I show a name of a place. and beside it, I have numbers. I would like to use different colored dots instead of numbers to indicate what the place has when it comes to features. Is there away to do this? The link below will explain what I have now. Thank you.

    Products - Empowered Golfers Mb.

  • #2
    First and foremost: These <h4> elements inside that list are not semantically correct. You can make them look similar by just using CSS.

    And also with CSS you can add colored bullets to a list. Just use pseudo-elements and different colors on each item, like so (not sure if a numbered list is appropriate at all here but I’m gonna use that as base anyway):
    Code:
    ol {
      list-style: none;
      margin-left: 0;
      padding-left: 16px;
    }
    ol li:before {
      border-radius: 100%;
      content: "";
      height: 10px;
      margin-left: -16px;
      margin-top: 5px;
      position: absolute;
      width: 10px;
      background-color: #666;
    }
    ol li:first-child:before {background-color: green;}
    ol li:first-child + li:before {background-color: red;}
    ol li:first-child + li + li:before {background-color: yellow;}
    ol li:first-child + li + li + li:before {background-color: blue;}
    Stop solving problems you don’t yet have!

    Comment


    • #3
      What do you mean by. These <h4> elements inside that list are not semantically correct

      Comment


      • #4
        I added the CSS you gave me and it looked great. But I'm realizing I may have to go with numbers, only because there may be more then 12 features. So I took the CSS out and the colours are gone.

        Products - Empowered Golfers Mb.
        Last edited by Charisma; Sep 27, 2016, 11:42 AM.

        Comment

        Working...
        X