Support » Theme: Twenty Seventeen » Change color of items of Ul / Ol lists

Viewing 6 replies - 1 through 6 (of 6 total)
  • In your CSS (CSS3), suppress the list style and use ‘::before’ to add your own bullet.

    First, suppress the list style:
    ul {list-style: none;}

    Second, generate your own colored bullet:
    li::before {content: “•”; color: red;} [ or #98daf1; ]
    Note: for a bullet such as • or ◦ or ▪
    Use their Unicode numbers: • = “\2022”, ◦ = “\25E6” and ▪ = “\25AA”

    Third, move the bullet to the left, but without moving the text of the list item after it. One way to do that is to make your bullet into an ‘inline-block’ of a given size, say 1em, and then move it to the left by its own size:

    li::before {content: “•”; color: red;
    display: inline-block; width: 1em;
    margin-left: -1em;}

    It is a little longer explanation for colored list numbers. For that, see the W3C “Web Style Sheet CSS tips & tricks”
    https://www.w3.org/Style/Examples/007/color-bullets.en.html

    Thread Starter marieflamingo

    (@marieflamingo)

    Hi @sleeplessindc,

    Thank you so much for you help! It’s the clearest explanation I’ve red! and it work perfectly.

    Do you by chance know how to delete the gray lines on each line of the list?

    Thank U!!

    @marieflamingo, You’re welcome.

    I looked at your source and you still have the list items coded with colored li style color for the bullets and span style for the text to be black.
    <li style="color: #98daf1;"><span style="color: #000000;">Vous manquez de temps.</span></li>
    You can clean those out now that you are using the way I gave you above and just have:
    <li>Vous manquez de temps.</li>

    To get rid of the gray list item borders, look for

    ul li {
    	border-bottom: 1px solid #eee;  [or #ddd; ]
    	border-top: 1px solid #eee;
    	padding: 0.5em 0;
    }

    and change to

    ul li {
    	border: 0;
    	padding: 0.2em 0; [adjust padding between list items as needed]
    or
    	padding: 0;  [if you want no padding between the list items]
    }
    • This reply was modified 6 years, 10 months ago by sleeplessindc.
    Thread Starter marieflamingo

    (@marieflamingo)

    Hi @sleeplessindc,

    Thank you!

    I’m not sure I understand well how to settle all this.

    I have cleaned the style color and put this in the customized css :

    .ul {list-style: none}
    
    .entry-content li::before {
        content: "•"; 
        color: #98daf1;
        display: inline-block; 
        width: 1em;
    }
    
    .ul li {
             border: 0px; 
             padding: 0.2em 0;
     }

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    But it does not delete the gray border.

    What did I did wrong?

    Thanks

    • This reply was modified 6 years, 10 months ago by bdbrown.

    Remove the dot in front of each ul
    UL is a tag that specifies an unordered list, it isn’t a class of something else.
    You can give ULs a class in the CSS if you want to have different styles of ULs such as

    ul.blue {
    color: #98daf1;
    }
    ul.green {
    color: green;
    and other stylings you want;
    }

    In the HTML:

    <ul class="blue">
    <li>item 1</li>
    <li>item 2</li>
    </ul>
    • This reply was modified 6 years, 10 months ago by bdbrown.
    Thread Starter marieflamingo

    (@marieflamingo)

    Thanks @sleeplessindc.

    I was not clear in my request. But your information is very useful to know.

    What I needed to do was to delete the grey borders in the lists. I achieve to find it out with that class in customized css:

    .widget ul li {border: none}

    <3

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change color of items of Ul / Ol lists’ is closed to new replies.