Superscript in regular size

[HaggenKennedy]

Hi, I've run into an issue involving the superscript option.

Ordinarily, a superscripted numbed should be smaller than the regular font size (say, 50% smaller), and also raised. When I turn a text into a footnote, I do get a ✅raised number, but ❌NOT a smaller number — only a (raised but) regular-sized number. The raised number, being the regular size, is messing with the formatting for the remainder of my text.

Would anyone know if I'm doing something wrong or if it's the plugin? Is that something I can fix myself by altering the CSS or PHP code? If so, how should I go about it? I couldn't code to save my life. 😅

Thanks so much in advance.

[lumumbapl]

Hello @HaggenKennedy

Thank you for raising this issue.

Well, the size of the raised number can be easily adjusted with CSS.

Here is the snippet you can use:

/* Adjust the size of the footnote links */
.footnote-link {
font-size: 80% !important;  
}

You can play around with the font-size to get your desired value. And, instead of varrying the font-size by a percentage, you could go for a fixed value, like 12px or 14px, depending on the font-size of your regular text.

Take a look at the screenshot below:

The font-size for the regular text is 16px. I have set the font-size for the footnote links to be 14px.

Here is the snippet:

/* Adjust the size of the footnote links */
.footnote-link {
font-size: 14px !important; 
}

Try that and let me know how it goes.

Regards.

Patrick L.

[HaggenKennedy]

Hi, Patrick. Thank you so much for getting back to me, and for providing a solution.

When I apply the .footnote-link CSS code, it does get me a smaller number. However, I have noticed that it also changes the "go back" link icon (↩) located at the end of each footnote, at the bottom of the page. Therefore, if I set the .footnote-link as 50%, the icon (↩) will also get 50% smaller. Is there a way to make the decrease in size apply only to the number, but not to the icon at the end of each footnote?

Before your reply, I was using a solution provided by Claude AI. I figured the footnotes were a superscript, so I asked the AI to provide me a CSS code that could make superscript numbers 50% smaller, and I got this:

/ Smaller superscript / sup { font-size: 50%; vertical-align: super; line-height: 0; }

I added the command "font-weight: bold;" to it for the footnote to stand out a little better. It did work: the numbers got smaller and raised, and the back icon (↩) was preserved (it did not change sizes).

I do have one other question, would it be ok to ask it here? Or should I open a new issue? Not sure what the procedure is. The question is, how do I change the style of the qtip box into which the footnote message appears? I read somewhere (I think in the readme file, but I'm not sure?) that you could change the style by changing the css file? I can't remember whether that was the "css" or "the css file". I logged into my cPanel, accessed my wp content folder, then went to the footnote plugin, then the CSS folder, to the tooltips.css file. I saw this inside it:

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee; color: #333333; }

I figured the #eeeeee referred to the box's BG color, so, just as a test, I selected the tooltips.css file, then clicked "Edit" on cPanel, and I changed that value to "#ffffff" to see if the background would change to white. But nothing happened, it's still gray. Could you tell me what to do? Is that not the right place to configure the qtip box style? Should I use that CSS command in the "Custom CSS" section of my website instead (rather than change the tooltips.css file)? Because changing the tooltips.css file doesn't seem to do anything. I don't even know if it's the right file to alter. And I don't want to poke too much or change anything too much for fear it might break my website. These things are so finicky! One wrong line of code, or a conflict somewhere, and all goes kablooey. Can you help?

I'm so sorry about all the questions. My actual job has nothing to do with webdesign or programming, so I have to either ask you or some A.I. 😅

Thank you so much in advance.

[lumumbapl]

These are some valid issues to consider. I am going to take sometime to run some tests and update you. And thank you for helping come up with a solution. 😅

[lumumbapl]

Hello @HaggenKennedy

Here is the quick solution to the issue about back-link size getting affected by the initial CSS. I have included another line of CSS to make sure that the original size is maintained. It also gives you the option of adjusting the size of the back-links.

Here is the complete snippet:

/* Adjust the size of the footnote links */
.footnote-link {
font-size: 14px !important; 
}

/* Adjust the size of the back-links */
.footnote-back-link {
font-size: 100% !important; 
}

That should fix your issue.

Regards.

Patrick.

[lumumbapl]

About the styling of the tooltips, I'd request that you create another issue so that we can document the solution independently for the benefit of other users in the future.

Thank you.