Change Footnote Color

Greetings

To change the colour of the footnote, add the following CSS to your custom CSS file.

span.easy-footnote a:link
{
color: green;
}

span.easy-footnote a:hover
color: red;
}

span.easy-footnote a:active
{
color: purple;
}

span.easy-footnote a:visited
{
color: cornflowerblue;
}

=====================================

I put the footnote number in square brackets instead of displaying it as a superscript.
(Jason, how about giving the users an option of how they want to display the footnote link. As well as superscripts, square brackets, other people use curly brackets to enclose references. I have not seen people use anything else.)

To display the footnotes in square brackets (for example, [99]) instead of a superscript, change the file easy-footnotes.php.

REPLACE THE LINE BELOW

$footnoteContent = “<span id=’easy-footnote-” . esc_attr( $this->footnoteCount ) . ‘-‘ . $post_id . “‘ class=’easy-footnote-margin-adjust’></span><span class=’easy-footnote’>^{” . esc_html( $this->footnoteCount ) . “}</span>”;

WITH

$footnoteContent = “<span id=’easy-footnote-” . esc_attr( $this->footnoteCount ) . ‘-‘ . $post_id . “‘ class=’easy-footnote-margin-adjust’></span><span class=’easy-footnote’>[” . esc_html( $this->footnoteCount ) . “]</span>”;

THAT IS, REPLACE:? ^{” . esc_html( $this->footnoteCount ) . “}

WITH:? [” . esc_html( $this->footnoteCount ) . “]

Richard

Thanks @rzharding for sharing your setup. Just a warning if you update the easy-footnotes.php plugin file directly those changes will be overwritten by future updates.

@cpinedo you can also target the <sup> element on your site directly for styles.

sup {
   font-size: 16px;
   color: #ffffff;
}

That would make the superscript numbers 16px and white.

If you need more specificity to override theme styles you can do .easy-footnote sup {} for the selector.

Additionally if you wanted to put brackets around the superscript without editing the PHP you can use psuedo elements.

.easy-footnote sup::before {
   content: '[';
}
.easy-footnote sup::after {
   content: ']';
}

That should give you “[1]”.

• This reply was modified 4 years, 6 months ago by Jason Yingling.

Thank you Jason.

There are a number of choices. I use easy footnotes many times in each post. It is a really valuable plugin.

Richard.