Site logo

Archived topic

Footnotes CSS

5 replies · Started by jbpyn on March 6, 2018

Viewing posts 1–6 of 6

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

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>

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 :)

Thanks Tom, that's exactly what I was looking for :)

Glad I could help! :)

This archived topic is closed to new replies.