Proper way to override task-list display
jimhall opened this issue · comments
Issue: when creating an task list item like so in a post:
- [x] Review relevant GitHub Labs
It generates the following display:
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>
Hi @jimhall
Here is where it is defined:
hacker/_sass/jekyll-theme-hacker.scss
Lines 152 to 154 in 4c94250
Try to put this rule above:
ul.task-list {
list-style: none;
}
ul li.task-list-item {
list-style-image: none;
}
Even easier, it isnt?
For a complete implementation acording this theme guidelines see PR #83
Oh wow - thanks for the workaround and like your final approach in PR #83
Thanks for the help!
You are welcome,
Upvote then if you want to take more chance to be merged 😉
CSS outline
property is the only way to enhace color customization due to the way tasklist checkboxes are rendered. Having checkboxes followed by a label
will enable more posibilities
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
bump