Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Proper way to override task-list display #75

Open
jimhall opened this issue Jul 16, 2021 · 8 comments · May be fixed by #83
Open

Proper way to override task-list display #75

jimhall opened this issue Jul 16, 2021 · 8 comments · May be fixed by #83

Comments

@jimhall
Copy link

jimhall commented Jul 16, 2021

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>
@davorpa
Copy link

davorpa commented Aug 31, 2021 •
edited

Hi @jimhall

Here is where it is defined:

hacker/_sass/jekyll-theme-hacker.scss

Lines 152 to 154 in 4c94250

ul li {
list-style-image:url('../images/bullet.png');
}

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

davorpa added a commit to davorpa/github-pages-themes-hacker that referenced this issue Aug 31, 2021
@davorpa
Remove bullet from task-lists
ed51aed 
Part of pages-themes#75
This was referenced Aug 31, 2021
Closed
Merged
@rabooli
Copy link

rabooli commented Aug 31, 2021 via email

@rabooli
Copy link

rabooli commented Aug 31, 2021 via email

This was referenced Aug 31, 2021
Draft
Closed
Merged
@jimhall
Copy link
Author

jimhall commented Aug 31, 2021

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

Thanks for the help!

@davorpa
Copy link

davorpa commented Aug 31, 2021 •
edited

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

@rabooli
Copy link

rabooli commented Aug 31, 2021 via email

@stale
Copy link

stale bot commented Jan 9, 2022

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.

@stale stale bot added the wontfix label Jan 9, 2022
@davorpa

This comment has been minimized.

Sign in to view
@stale stale bot removed the wontfix label Jan 9, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add styles for tasklist davorpa/github-pages-themes-hacker
3 participants
@davorpa @jimhall @rabooli