How to use custom theme?

[olivroy]

Description

Ok this is probably easier than I think.

With the following qmd doc.

---
title: a title
format: html
---

This leads to a footnote [^1]

[^1]: A great footnote.

This gives the following html

<li id="fn1"><p>A great footnote.<a href="#fnref1" class="footnote-back" role="doc-backlink">↩</a></p></li>

As you see, quarto creates class "footnote-back" for the button. However, in my css, I have something called "fn-lnk".

My question is: how do you make quarto to replace class = "footnote-back" by class = "fn-lnk".

How do you override what class quarto gives to objects if your css theme has different names?

Also, on a related note, how do you embed javascript in quarto?

Note: I don't know anything about styling, css, html, scss I tried searching a little but couldn't find it. I probably missed something somewhere.

Thank you.

[mcanouil]

I suggest the following reading:

• https://quarto.org/docs/output-formats/html-themes.html
• https://quarto.org/docs/output-formats/html-basics.html#includes

1. Why do you want to replace a CSS class which would require to know HTML, CSS, and JavaScript?
2. Simplify define footnote-back as fn-lnk, in your css it will look like .fn-lnk, .footnote-back {...}, see https://developer.mozilla.org/en-US/docs/Web/CSS and/or https://www.w3schools.com/css/

[olivroy]

Thanks for your reply.

I don't mind overwriting the css file programmatically, but this is not ideal. It is because it is a predefined css (I didn't create it)

The css file is well established and widely used internally. (and long) I'd just want to create a quarto document. but the classes of my css do not match Quarto's...

So if I create a scss file
conversion.scss

$footnote-back: fn-lnk

Would that work?

[mcanouil]

No, you need to edit your CSS, to add ".footnote-back" beside every definition of ".fn-lnk".

Unfortunately, that's completely beyond Quarto support scope.

[olivroy]

Oh ok. I see. I may do the hacky way of just doing regex transformation in the resulting html file. Like:
replace_all("footnote-back", "fn-lnk") (at my own risks)

Thank you very much!

[mcanouil]

You should really not do that ...

include-after-body:
  - text: |
      <script type="text/javascript">
      const footnoteBackElements = document.querySelectorAll('a.footnote-back');
      footnoteBackElements.forEach(element => {
        element.classList.replace('footnote-back', 'fn-lnk');
      });
      </script>

[olivroy]

I know. 😨 Ok I will try this little js script.