Proper way to override task-list display

[jimhall]

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>

[davorpa]

Hi @jimhall

Here is where it is defined:

https://github.com/pages-themes/hacker/blob/4c942506cf8d5329a9cbc66b1eff75ad86a49e34/_sass/jekyll-theme-hacker.scss#L152-L154

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

[rabooli]

در تاریخ سه‌شنبه ۳۱ اوت ۲۰۲۱،‏ ۰۵:۱۹ David Ordás @.***> نوشت:

Hi @jimhall https://github.com/jimhall

Here is where it is defined:

https://github.com/pages-themes/hacker/blob/4c942506cf8d5329a9cbc66b1eff75ad86a49e34/_sass/jekyll-theme-hacker.scss#L152-L154

Try to put this rule above:

ul.task-list li { list-style-image: none; }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/pages-themes/hacker/issues/75#issuecomment-908809330, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOOITSYMVVON766QEQS56PDT7QRINANCNFSM5AQFJVVA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[rabooli]

۱۴۰۰-۰۶-۰۹ ۶:۳۸ ‎+۰۴:۳۰ گرینویچ, rabooli @.***>:

در تاریخ سه‌شنبه ۳۱ اوت ۲۰۲۱،‏ ۰۵:۱۹ David Ordás @.***>

نوشت:

Hi @jimhall https://github.com/jimhall

Here is where it is defined:

https://github.com/pages-themes/hacker/blob/4c942506cf8d5329a9cbc66b1eff75ad86a49e34/_sass/jekyll-theme-hacker.scss#L152-L154

Try to put this rule above:

ul.task-list li {

list-style-image: none;

}

—

You are receiving this because you are subscribed to this thread.

Reply to this email directly, view it on GitHub

https://github.com/pages-themes/hacker/issues/75#issuecomment-908809330,

or unsubscribe

https://github.com/notifications/unsubscribe-auth/AOOITSYMVVON766QEQS56PDT7QRINANCNFSM5AQFJVVA

.

Triage notifications on the go with GitHub Mobile for iOS

https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675

or Android

https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

--

You are receiving this because you are subscribed to this thread.

Reply to this email directly or view it on GitHub:

https://github.com/pages-themes/hacker/issues/75#issuecomment-908838299

[jimhall]

Oh wow - thanks for the workaround and like your final approach in PR #83

Thanks for the help!

[davorpa]

You are welcome,

Upvote then if you want to take more chance to be merged :wink:

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

[rabooli]

در تاریخ سه‌شنبه ۳۱ اوت ۲۰۲۱،‏ ۱۸:۲۰ jimhall @.***> نوشت:

Oh wow - thanks for the workaround and like your final approach in PR #83 https://github.com/pages-themes/hacker/pull/83

Thanks for the help!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/pages-themes/hacker/issues/75#issuecomment-909257185, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOOITS7VRDT5GKPJ7LXOTH3T7TM2TANCNFSM5AQFJVVA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[stale[bot]]

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.

[davorpa]

bump