Custom admonition not showing / CSS styling not applying

[AudioLotus]

Hey all! So sorry to bother.

Here's the tl'dr

Looking at the documentation here, I am trying to build my own admonitions to use. However, when I use both mkdocs serve & mkdocs build (or gh-deploy), the styling doesn't seem to appear. This is what I see instead:

Here are the details

To clarify here is the relevant css I am trying to use. The file itself is named admonition.css.

:root {
--md-admonition-icon--tl-dr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1557 885">
<g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
    <path d="M158,885V812H0v73Zm1099,0V812H300v73Zm300,0V812H1399v73ZM1240,394a238.81563,238.81563,0,0,1,14.5,24q7.5,14,8.5,21,2.00005,12-5.5,32T1240,498q-51.99995,30-147,28T935,498q-26-11-45.5-37.5T870,393q0-64,51-130L779,0,636,263l13,19q13,18,25.5,50.5T687,393q0,41-19.5,67.5T622,498q-63,26-158,28T317,498q-10-7-18-27t-6-32q3-15,31-56L239,239,199,391,300,763h957l101-372-40-152-85,144Z"/>
    </g>
</g>
</svg>')
}

/* tl-dr */
.md-typeset .admonition.tl-dr,
.md-typeset details.tl-dr {
    border-color: rgb(88, 150, 102);
}
.md-typeset .tl-dr > .admonition-title,
.md-typeset .tl-dr > summary {
    background-color: rgba(69, 117, 80, 0.1);
}
.md-typeset .tl-dr > .admonition-title::before,
.md-typeset .tl-dr > summary::before {
    background-color: rgb(88, 150, 102);
    -webkit-mask-image: var(--md-admonition-icon--tl-dr);
            mask-image: var(--md-admonition-icon--tl-dr);
}

The admonition file itself is tied into mkdocs.yml as so:

extra_css:
    - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css
    - assets/css/admonition.css
    - assets/css/custom_attributes.css
    - assets/css/customization.css

If needed, here are the extensions and plugins I am using:

# Extensions
markdown_extensions:
#Python Markdown
  - abbr
  - admonition
  - attr_list
  - def_list
  - footnotes
  - md_in_html
  - mdx_breakless_lists  
  - meta  
  - nl2br
  - sane_lists
  - smarty
  - tables
  - toc:
      permalink: true

#Python Markdown Ext
  - pymdownx.arithmatex:
      generic: true
  - pymdownx.betterem:
      smart_enable: all
  - pymdownx.caret
  - pymdownx.critic
  - pymdownx.details
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons
  - pymdownx.highlight:
      use_pygments: true
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.keys
  - pymdownx.magiclink
  - pymdownx.mark
  - pymdownx.snippets
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tilde
  - pymdownx.tasklist:
      custom_checkbox: true

plugins:
  - awesome-pages
  - callouts
  - embed_file:
      callouts: true
      custom-attributes: 'assets/css/custom_attributes.css'
  - glightbox
  - meta-descriptions
  - search

I'll note with the callouts plugin (as it's specific to Obsidian notes that I use for editing), that I have tried the exact formatting from the documentation as well with no avail. I've also tested the <svg> path with ones directly copied from FontAwesome (specifically the path for the FA logo itself) to see if somehow my file was just a mess.

I am really unsure of what I'm doing wrong here unfortunately, as I've even copied the pied-piper example straight from the docs with no change. The custom admonitions do not display when running mkdocs build either.

There's a key / legend on the home page describing each one, and they just show the default "note" styling in case that helps. The test callout is just straight copied and pasted from the docs as, well, a testing point haha.

I apologize profusely if there is way too much detail here, or if it's not the information y'all need to help. I tried my best to include everything relevant I could. If need be, links to my repo(s) and actual pages site are at the bottom.

Thank you all so much for your patience and help!

---

Here is the main branch of my repo (where the raw files are) if needed: https://github.com/AudioLotus/d2flwrz

The gh-pages branch from mkdocs gh-deploy: https://github.com/AudioLotus/d2flwrz/tree/gh-pages

The GH Pages site: https://audiolotus.github.io/d2flwrz/

[kamilkrzyskow]

Hello @AudioLotus,
thanks for the extensive write up, but a minimal reproduction .zip archive would save you time and be even better ✌️

As for your issue, when I checked in Developer Tools Console in Firefox, I immediately saw that your admonition icon declaration has an error:
Error in parsing value for ‘--md-admonition-icon--tl-dr’. Declaration dropped.

So I fixed it by changing the declaration to be a single line, just like your Test piper declaration:

--md-admonition-icon--tl-dr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1557 885"> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <path d="M158,885V812H0v73Zm1099,0V812H300v73Zm300,0V812H1399v73ZM1240,394a238.81563,238.81563,0,0,1,14.5,24q7.5,14,8.5,21,2.00005,12-5.5,32T1240,498q-51.99995,30-147,28T935,498q-26-11-45.5-37.5T870,393q0-64,51-130L779,0,636,263l13,19q13,18,25.5,50.5T687,393q0,41-19.5,67.5T622,498q-63,26-158,28T317,498q-10-7-18-27t-6-32q3-15,31-56L239,239,199,391,300,763h957l101-372-40-152-85,144Z"/> </g> </g> </svg>');

[AudioLotus]

Oh interesting! Thanks so much! What about the colors and such as well? I noticed those weren't changing either.

Would you still like me to upload the minimal reproduction zip?

Apologies for missing that step in things.

[kamilkrzyskow]

The screenshot above was my hacky override for the HTML element alone 😅, but if you fix the CSS file itself it should parse the rest of it properly:

[AudioLotus]

You are my hero of the evening. I spent hours bashing my head over this earlier hahaha. I didn't realize that if something broke like that, it would just kill the process.

I am still fairly new to web development, I haven't even hit js and stuff yet haha. So the fact I was missing a ; was pretty damning too.

Thank you so much again!