How to apply custom tasklist design? #1256
-
|
I would like to add the custom tasklist item design that is showcased on the Tasklist page but adding it as a CSS doesn't actually apply the change it seems. I use MkDocs and have the I would appreciate help with this. Here's the actual file used. A preview of the checkbox is here: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
If you are using MkDocs Material (which it seems you are) you don't really need to do anything except set The example CSS provided in the documents is only for environments that aren't already doing special styling on the tasklist. If you combine the example CSS on top of Material's custom CSS, you will end up with something not quite like you expect. |
Beta Was this translation helpful? Give feedback.
-
|
Honestly, I don't think GitHub uses custom icons per se, so maybe turning off custom and adding appropriate CSS could make it work. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah. I'm sadly not a big expert with CSS. Will need to take a look at what Github perhaps does to mimic this behaviour more closely. |
Beta Was this translation helpful? Give feedback.
-
|
I quickly tried to override the theme by adding fontawesome icons into But it doesn't load the new SVG icons despite me overriding the theme, double-checking the folder structure and file names and making sure the info is right. This is the scss file: Fontawesome icons: |
Beta Was this translation helpful? Give feedback.
-
|
This is CSS question. Are you finding the SCSS to CSS? I know my SCSS cults use some SASS extension to inline the SVG images and such. All of this is converted to CSS. Anyways, I'm certain it is possible, but I would need to find some time to sit down and code up a proper example. Maybe I'll have a chance this weekend. |
Beta Was this translation helpful? Give feedback.
-
|
Managed to get something working: |
Beta Was this translation helpful? Give feedback.
If you are using MkDocs Material (which it seems you are) you don't really need to do anything except set
custom_checkbox. The only additional styling we do in our docs is coloring: https://github.com/facelessuser/pymdown-extensions/blob/main/docs/src/scss/extensions/_tasklist.scss.The example CSS provided in the documents is only for environments that aren't already doing special styling on the tasklist. If you combine the example CSS on top of Material's custom CSS, you will end up with something not quite like you expect.