theming footnotes

[rmflight]

I tried adding

d-footnote {
  color: #E1E8ED;
}

to my css, but it doesn't change the color of the footnote text (the text of the superscript) in the body of the blog post.

It is also not clear what to add to the CSS to change the actual text color of the footnote in the hover box, or the other colors of the hover box. Currently it looks like it borrows from the color set in the main html, which is now white from my theme, so I get white on very light gray, which is not very visible.

This is actually annoying, as it seems like that color doesn't affect the pop-up boxes for citations, but does affect the color of the text in the pop-up boxes for footnotes.

I'm a total noob about CSS and finding the right selectors (as evidenced by #327).

[flsck]

I recently faced a similiar issue, having created a darkmode-esque theme where the standard footnote color was effectively not visible. Edits to the .css file like in your comment only change the text within the pop-up boxes. Below is not an actual solve, but a workaround which works and might be utilized by someone more knowledgable about css and js for a better solution.

As far as I can tell, when building the site with rmarkdown::render_site(), there are certain .css and .js files being integrated into the website's repository. Not being able to control the color of the superscript number in the footnote is due to additional styling being inserted.

The file template.v2.js adds the styling in the <style scope="d-footnote"> ... <\style> block above, effectively overriding any custom styling you would add to the span or sup classes in your personalized theme.css file. To change e.g. the color of the footnote number, you can do the following (file positions and line numbers should match for version 1.2 of distill):

1. Navigate to the folder of your installed distill package and then into the following sub-folder: distill/www/distill.
2. There should be one file, template.v2.js. This is the one utilized when calling rmarkdown::render_site() in your website's repository. Open that file.
3. Find the part in the code where the properties of the sup and span classes are edited for the scope of d-footnotes. This should be line 265 - 292.
4. Edit the properties you require to change, for example the color of the span class on line 284.
5. Save the file and build your website again with rmarkdown::render_site(). Changes should have taken effect.

This approach has two problems. 1) If you are updating the distill package, your changes to the template.v2.js file will be overwritten; 2) If you built different websites, the new edits you did in step 4. above will influence every one of your distill sites, meaning different color schemes need to be edited whenever rendering the respective site.

I'd guess that there is some way to incorporate the relevant javascript code snippet into the website's repository, unfortunately I am not at all able to work with javascript in that regard so I do not know how to. Maybe someone else can, though!

[ssp3nc3r]

I would also like the ability to style footnotes, especially font coloring, without distill js overwriting it. I was able to style the text inside the hover box using something like,

.darkmode d-footnote,
.darkmode d-footnote a {
  color: black;
}

but not the superscript.