Styling Superscript

  • I have styled the superscript but that does not work for the footnote plugin while it works very well for other superscripts where the <sup> is used

    /*Subscrip, Superscript Footnotes*/
sub, sup {font-size: 75%; line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

    Subsequently I tried to copy that for the footnotes css styling using
    .footnote_plugin_tooltip { font-size: 0.8em; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em;}
    as well as
    .footnote_plugin_tooltip_text { font-size: 0.8em; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em;}
    but to no avail. Take a look at this page where the superscript forks for ‘th’ but not for footnote index
    https://dhimanta.com/jsp-a/prarambha/v%E1%B9%9Bddha-methodology

    https://www.ads-software.com/plugins/footnotes/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter sanjayrath

    (@sanjayrath)

    OK I found the solution. Modified the public.css file in the Plugin folder at /wp-content/plugins/footnotes/css
    Changed the CSS to make it the same as the rest of the website and also gave it the color blue to show that it is linked. Easy for readers.

    /* superscript */
.footnote_plugin_tooltip_text {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
cursor: pointer;
color:#0099FF;
}

    I also experienced similar issues which lead to the same CSS file:
    https://www.ads-software.com/support/topic/footnotes-alignment-and-footnote_plugin_tooltip_text-in-csspubliccss?replies=1

    Hopefully the author will eventually fix those bugs… Or at least remove those !important tags from the CSS.

    btw, I ended up putting the custom CSS in my theme with “important” key to override those from the footnotes/css, i.e.

    .footnote_plugin_tooltip_text {
    top: 0.5em !important;
    }

    this worked for me.

    Looks like this can now (if not a few weeks ago when you folk posted your workarounds), by putting your custom CSS into the Customize page of plugin settings, in the Add custom CSS to the public page section.

    Hi Sanjay, that works great, although I find the number is too high in my opinion, so I changed the line height to 2 and removed the colour to be more discreet and less of a distraction. This is now in my Footnotes custom CSS:

    /* superscript */
    .footnote_plugin_tooltip_text {
    font-size: 65%;
    line-height: 2;
    position: relative;
    vertical-align: baseline;
    cursor: pointer;
    }

    Thread Starter sanjayrath

    (@sanjayrath)

    Ian, welcome. each theme needs a little tinkering and touch.
    Inspiredmind, Some themes do not respond well to adding the code in the ‘Add custom CSS to the public page”. I don’t know why, but Rocket themes do not respond. So it is better to use the old way for them

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Styling Superscript’ is closed to new replies.