Link Style for Footnotes

Hey there,

It’s possible to do this by targeting individual paragraph blocks and/or even a block that’s been grouped together as such.

Are you able to group the footnotes in the example above, and then assign that group a CSS class?

That will help to target the CSS with a text decoration.

I don’t use the block editor normally. But now I switched for testing and the whole content on the linked site is in one large block. And I’m not able to add one: The “+” in the blue square is greyed out, and when I hover the mouse between title and paragraph or at the very bottom, the blue line with the “+” does not show up.

Can I simply add some custom CSS, so the footnote styling would work on every page of my website? Because this is not the only content page containing footnotes.

Is the content displaying in a classic block? If yes, you should be able to turn these into regular, individual blocks.

There’s nothing defining the footnotes as such, so adding CSS would remove this styling for all links in the site…

Unless, you style them all the same of course? Which could work?

I don’t get it. I was able to insert a new paragraph block, but it all still is html in one large block – it just adds:

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

And when I switch from “Page” to “Blocks”, then it says “no block selected”. The whole editor looks different than e.g. here: https://www.inmotionhosting.com/support/edu/wordpress/blocks/convert-blocks/ – more like html editor within a block.

• This reply was modified 1 year, 10 months ago by drikkes.

Hmm, are you looking at the site via Code view?

If you click on the three dots in the editor in the top right hand corner, you should see the option to change to Visual Mode.

“Code view”, I don’t know. It doesn’t help that my backend is in German. But when I click on Block Editor and then on the three dots, my backend for a posts looks like this.

It doesn’t change, whether I check Spotlight or Fullscreen mode. I guess the problem is I use a plugin called “Classic Editor”?

• This reply was modified 1 year, 10 months ago by drikkes.

Hmm. I don’t see <!-- wp:paragraph --> <p></p> <!-- /wp:paragraph --> in that screenshot.

It looks like you are currently in visual blocks, but you’re in post settings rather than block settings.

Can you click on the paragraph with all the footnotes, then click over to the “block settings” options in the sidebar?

You could use the controls to set up the style as you’d like it. Or if you’ll be setting up footnotes all the time and want them to be the same, you can use Advanced and add a class there, like footnote or whatever word makes sense to you.

Then in Additional CSS you’d add something like this:

.footnote {
font-size: .75em;
}

.footnote a, .footnote a:hover {
text-decoration: underline;
border: none;
background-color: unset;
}

I’m sure that at some point the team will make setting up a class a bit easier, but for now, that’s how it’s done!

Going forward, just remember to select the footnote paragraph (or group) and give it that class name under Advanced. I hope it helps.

• This reply was modified 1 year, 10 months ago by supernovia.

Thanks. As I wrote earlier: When I switch from “Page” to “Blocks”, then it says “no block selected”.

No matter, which of the two blocks I click on – there is only the headline, and all the rest of the text, no own block for the footnotes – “no block selected” remains, nothing else in teh sidebar.

Entering

.footnote {...}

into the additional CSS changes nothing, no matter what I write into the brackets.

Okay, so you can’t click on the paragraph. It’s hard to tell what’s wrong without more context, but here are some things you can check:

• Make sure you are not in “Code view” (where you would have seen the paragraph markup you described earlier)
• Make sure you aren’t using the classic editor
• Make sure you aren’t using a classic block
• Try checking the list view to see what appears there
• If you still can’t select blocks, perhaps one of your plugins is interfering. You could use Health Check to test that.

You may also want to try another browser to confirm whether some extension is interfering. This doesn’t sound like that, though.

Oh, and regarding entering .footnote and whatnot into additional CSS, correct; that won’t work until you give a paragraph the footnote class.

Even after googling, searching in support forums, and after I disabled the the Classic Editor I have no idea how to leave the “code view”. I don’t know, what’s wrong in my backend or what I oversee. I tend to give up. Thanks.

Hello again,

Hmm… what plugins have you have installed? Do you have Gutenberg installed?

Hi,

it’s mainly Jetpack, Akismet, Classic Editor and a bunch of Indieweb plugins – no Gutenberg.

Hello again!

Are you able to install Gutenberg please, and confirm if the option to edit visually returns please.

Hi Adam.
I installed the Gutenberg plugin and it looks the same as before, whether I want to update an older page or write a new post. No visual building, no option to add blocks. The Block editor doesn’t let me select blocks.