• Resolved cpinedo

    (@cpinedo)


    How do I change the color of the actual footnote color?

    Like this:
    Screen Shot 2020-06-22 at 8.15.29 PM.jpeg

    Also, the size of the footnote itself (making the “1” bigger)?

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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’><sup>” . esc_html( $this->footnoteCount ) . “</sup></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:  <sup>” . esc_html( $this->footnoteCount ) . “</sup>

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

    Richard

    Plugin Author Jason Yingling

    (@yingling017)

    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]”.

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change Footnote Color’ is closed to new replies.