Skip to content

Proper way to override task-list display #75

Description

@jimhall

Issue: when creating an task list item like so in a post:

- [x] Review relevant GitHub Labs

It generates the following display:

image

I would like to eliminate the green '>>' prior to the check area. I think it is redundant.
My challenge is that I don't know where I can change this behavior.

Does anyone know how to eliminate the green '>>'?

Workaround: I created a black dot to hide the green '>>'

I created an inline style for the post.html file using directions from this link:

<style>
ul.task-list {
  list-style: none; /* Remove default bullets */
}
ul.task-list li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #151515; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -3.5em; /* Also needed for space (tweak if needed) */
}
li.task-list-item {
  list-style-image: url("{{ '/assets/images/black-dot.png' | relative_url }}");
}
</style>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions