Home Forums Weaver Xtreme Theme Change list bullet to blue checkmark for list

This topic contains 6 replies, has 2 voices, and was last updated by  scrambler 1 week, 4 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #56315

    GR8FL
    Participant

    On one page only, I want to change the bullet to a blue checkmark.

    I know the html code is What would the CSS be to define a new bullet and then how would I use it on this page?

    #56318

    scrambler
    Moderator

    With the list style CSS you can only have bullets square letters or numbers, or replace it by an image.
    If you want a check mark, then as far as I know, you need remove the Bullet and use CSS to insert the check mark before the text

    .page-id-460 ul li::before {content: "✓ ";margin-left:-1em;}
    .page-id-460 ul li {list-style-type:none;}
    #56319

    GR8FL
    Participant

    In place where you have content, I would replace it with the image?

    .page-id-460 ul li::before {content: "url-of-image";margin-left:-1em;}
    .page-id-460 ul li {list-style-type:none;}
    #56321

    GR8FL
    Participant

    I figured it out.

    In CSS: ul.checkmark {list-style-image: url(/wp-content/uploads/imagename.png);}

    On page: `<ul class=”checkmark”>
    <li>first bullet
    <li>next bullet
    </ul>`

    #56322

    scrambler
    Moderator

    If you use an image yes you use the list style CSS. But you had said you wanted a check mark character…

    #56330

    GR8FL
    Participant

    You’re right, I wanted a checkmark. A blue one. Wasn’t sure how do to that without an image.

    #56331

    scrambler
    Moderator

    So now I am confused.

    I gave you a way to get an actual check mark (you can add a color to the before rule to make it blue), so no sure why you went back the image way…

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.