Link Style for Footnotes

  • Generally I like the link style for the navigation and the text links within normal paragraphs of the Loudness theme – the underline and then hover effect with a color change. But when it comes to footnotes (see linked example page), it could look better, I think.

    My coding skills are very limited, basically it’s just copypasting stuff and do minor changes. I used the following code to wrap around each footnote manually:

    <a id="refA" href="#A"><sup>1</sup></a>
...
1) <a id="A" href="#refA">↩?</a>

    In the theme editor, the different sections are confusing for me:
    – “Control the hover stylings of outline block style.”
    – “Provide styles for a Block Style for navigation links”
    – “Links in containers with the primary background color get special treatment”
    And then the font specification is located in another file, not the stylesheet. So I don’t even now which one to edit. Or would I have to simply add some additional CSS?

    Because I think it would be great, if only for the footnotes I could switch the theme fonts from DM Mono (monospace body copy) to Rubik (sans serif headlines). Maybe the superscript numbers then have to be a little smaller, but most importantly, I want to get rid of the underline for the footnotes – or they’d have to be right under the character, not at the line’s bottom. And maybe it’s a good idea to change their color instead of using the usual hover effect.

    See, I’m not sure about it the final footnote design. I just need to be shown a way to toy around with the style of the footnotes. That’d be great.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 16 through 24 (of 24 total)

  • Very strange, as we’re unable to replicate this.

    Would you be willing to deactivate all plugins on the site to see if there could be a plugin conflict at stake there.

    Thread Starter drikkes

    (@drikkes)

    Deactivated all plugins, even Jetpack and Akismet. Then tried to activate only Gutenberg – in Block Editor it still looks like this.

    Very odd. Would you mind temporarily changing the interface to English for your screenshots so we can get more context cues?

    Thread Starter drikkes

    (@drikkes)

    Sure. What site do you need? Is this one okay? Or what should be selected?

    I activated most plugins again, as it does not make a difference.

    • This reply was modified 2 years, 1 month ago by drikkes.

    Thank you – what’s under Options in the upper right?

    And, can you try this with Health Check enabled and all other plugins temporarily (not on the live site) turned off?

    https://www.ads-software.com/plugins/health-check/

    Thread Starter drikkes

    (@drikkes)

    Whether I have the plugins activatated or not – the options menue looks like this (minus the “Switch to claasic editor” of course):

    The Site Health Check recommends 4 improvements:
    – Have a default theme available
    – You should use a persistent object cache
    – The authorization header is missing
    – Page cache is not detected but the server response time is OK

    (Plus the “You should remove inactive plugins” one…)

    Thread Starter drikkes

    (@drikkes)

    And regarding my original problem: Can I do something like?

    When <link> contains <sup> tag, then {
font: xy; font-size: 0.75em; font-color: #xxx; background-color: none; no underline;
}

    I don’t know how to write the exact code, but you get the idea – just style all the superscript numbers?

    Hey there,

    I’m wondering if there’s a new bug with the classic editor. With the classic editor deactivated – does this option then appear?

    Ok, so the CSS I believe you may need is: 

    sup a {
  font-family: xy; 
  font-size: 0.75em; 
  font-color: #xxx; 
  background-color: none;
  text-decoration: none;
}

    I hope this helps.

    Thread Starter drikkes

    (@drikkes)

    Hi Adam, thanks for investing time in my issues, I really appreciate it. Unfortunately, adding this did not change anything:

    sup a {
  font-family: Rubik;
  font-size: 0.75em;
  font-color: #FF5C5B;
  background-color: none;
  text-decoration: none;
}
Viewing 9 replies - 16 through 24 (of 24 total)
  • The topic ‘Link Style for Footnotes’ is closed to new replies.