Can I change the size of the footnote text output?

I made all my styling changes to the Footer via CSS. Here’s one way to increase the size of the footer:

ol.footnotes {
font-size: 110%;
}

I just put 110% as an example, but you can of course change this to whatever works for you or use a different unit instead of percentage (px, em, rem, etc). On my theme, I found the footnotes were too big, so I set them to 80%.

Hello @muscroftm, I hope the solution provided by @brit77 solved your issue. Please let me know.

Thanks.

Hi brit77 & @lumiblog.

Sorry in the delay, been busy working on a new theme. I will try the fix given by @brit77 very soon. I’ll then let you know how I got on.

Regards. Mike.

Perfect.

Good luck, @muscroftm

Patrick.

Hi All.

I just tried the CSS code by @brit77 and set it to 70% for my theme. I put the CSS in the themes extra CSS area and it works great.

Now all I need to know, is it possible to change the colour of the subscript digits that show up on the page of text. Any ideas people?

Regards, Mike.

Glad that worked for you, @muscroftm!

As for the subscript digit color, I believe, since it is technically a link (the digit is in a <a> tag wrapped in a <sup> tag), it inherits your theme’s default link color. You can override this with CSS. This code will change the color of the link AND the hover/active/focus state of the link. Replace red with whatever hex code you want to use.
.footnote-link.footnote-identifier-link {
color: red;
}
If you want a different color for the hover state, you’ll need to add some more CSS code, along the lines of:
a.footnote-link.footnote-identifier-link:hover, a.footnote-link.footnote-identifier-link:active, a.footnote-link.footnote-identifier-link:focus{ color:blue}

• This reply was modified 4 months, 2 weeks ago by brit77.