[Resolved] Footnotes CSS

[jbpyn]

Greetings Tom and Co,

I was using the Bigfoot script for footnotes on my site, but decided to remove it. Since Generatepress removed Jquery, Bigfoot was the only reason I can see it was being loaded on my site. Removing it resulting in a nice speed bump. However, I’m left with a footnote problem.

I thought maybe I could style the footnotes with CSS, but so far I can’t work out how to do that without stylying all content links. At minimum I would like to make the footnote text smaller, but I’m struggling with that too as changing the size changes the size of all numbered lists.

Can anyone give me some clues? I would like to avoid yet another plugin if I can.

Thanks, Jai

[Leo]

Hi there,

By footnote you mean the copyright section?

If so the setting should be in Typography > Footer: https://docs.generatepress.com/article/typography-overview/

Let me know if this helps.

[jbpyn]

Hi Leo,

No not the footer, I mean reference footnotes for an article. Have a look at this post

Each Footnote is linked inline like this <sup><a id="ffn1" class="footnote" href="#fn1">1</a></sup>
each footnote is linked to a line item at the bottom of a post like this <li id="fn1">some text goes here <a href="#ffn1">↩</a></li>

[Tom]

Hi there,

The footnotes list has an ID, so we can target it quite easily like this:

ol#footnotes {
    font-size: 13px;
}

Let me know if you need more info 🙂

[jbpyn]

Thanks Tom, that’s exactly what I was looking for 🙂

[Tom]

Glad I could help! 🙂

[Author]

Posts