#1

I’ve tried using one of the CSS snippets here: obsidian-css-snippets/Footnotes.md at develop · Dmitriy-Shulha/obsidian-css-snippets · GitHub (thanks Dmitriy) however they don’t seem to take effect for a vault that’s published using Obsidian Publish.

Does anyone have a CSS snippet that works to change how footnotes look on Obsidian Publish sites?

Perhaps I’m doing it wrong?

  1. I’ve done Settings → Appearance → CSS snippets → opened the folder → created a new css file with code from above git repo → reloaded snippets ← does not seem to apply to local copy of the vault
  2. I’ve put same code into a publish.css file into the root of the vault → published → waited → looked ← does not seem to change how footnotes appear on the published site

Any pointers welcome…

#2

I haven’t tried this particular one, but what happens often (for me) in Publish is that the browser cache is stuck on a previous version. So to see the changes, if there’s any, you should also empty the caches.
(So: publish → wait → empty cache → refresh button → see what happens.)

(EDIT: I misremembered, now that I think about it I also styled the footnotes somehow. My CSS knowledge is close to 0, so it had to be some copy+paste from those snippets, which means they should work for you as well.)

#3

Sadly that doesn’t seem to have done the trick :frowning:
I’ll keep playing with it

#4

Which snippet exactly are you trying to work with?
I have the last one (from your link) embedded in my CSS and it works fine. But maybe there are other parts that don’t / other parts of your CSS that conflict with this part.

#5

I’ll retest that last one (or two depending on how you read it), being:

/* FROM DANIEL FLAUM via email */

/* Footnote styling - smaller font */
.footnote-link.mod-highlighted {
   background-color: var(--orange);
   color: var(--base3);
}

section.footnotes li {
font-size: small;
}

section.footnotes p {
font-size: small;
}

/* Stop footnotes affecting line height */
sup { 
    vertical-align: top; 
    position: relative; 
    top: -0.3em; 
    font-size: 0.75em; 
}
  • :coffee: + :man_technologist:
  • :timer_clock:
  • use seperate browser, close all but empty tab, clear cache & history, quit and restart
  • reload Obsidian publish site
  • :eyes: :exploding_head: now it’s working.
  • :smiley:

Thanks @atiz – not sure quite what I’ve done differently to the previous attempts… however, it’s working. Thanks for the gentle nudges :bowing_man:

1 Like
#6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.