Formatting internal links trough css?

[ironhak]

Hi everyone!

I’m trying to have internal links capitalized, like this:

Internal link → INTERNAL LINK

Some themes allow this personalisation trough style setting plugin… How can I achieve this with a snippet? Thank’s.

[holroy]

You can apply the text-transform to the given element. See CSS text-transform property, for more explanations.

So find your CSS selector, and do text-tranform: uppercase to that element, and you should be good to go!

[ironhak]

Hello thank’s very much for pointing me in the right direction but I’m not a coder and I don’t know where to start in order to find that selector.

If it’s not too much bothering for you could you please tell me the full snippet? Thank’s, sorry for be 100% dependent but I’ve not time for taking css lessons, hope you understand.

[holroy]

@ironhak

If it’s not too much bothering for you could you please tell me the full snippet?

I’m not sure if that’s a good idea, as there are so many caveats related to doing stuff like this. So maybe, since you don’t know coding, you’re better off using a custom theme to achieve this. If I provide a partial snippet, I’m afraid that’ll just keep growing into something neither of us are satisfied with.

[ironhak]

Well it’s just upper case formatting, anyway I’ll wait for someone else then. Thanks anyway

[anon63144152]

Does this work?

/* EDITING AND READING INTERNAL LINK */
.cm-s-obsidian span.cm-hmd-internal-link, 
.markdown-rendered .internal-link {
  text-transform: uppercase;
}

[ironhak]

@anon63144152

/* EDITING AND READING INTERNAL LINK */
.cm-s-obsidian span.cm-hmd-internal-link, 
.markdown-rendered .internal-link {
  text-transform: uppercase;
}

Hi, thank you very much. It works everywhere in reading mode but in edit mode it only render uppercase if inside dataview or a callout, any way to fix?

Thank’s again

[anon63144152]

Mmmmmmm … how about this snippet?

/* EDITING AND READING INTERNAL LINK */
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-rendered .internal-link {
  text-transform: uppercase;
}

[ironhak]

@anon63144152

/* EDITING AND READING INTERNAL LINK */
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-rendered .internal-link {
  text-transform: uppercase;
}

Thank you but nothing changed

[anon63144152]

Both of the snippets worked in my vault, so presumably we have different settings. Are you using a theme? If you are, you could contact the theme author and ask their advice.

Does adding !important make any difference?

text-transform: uppercase !important;

[ironhak]

@anon63144152

!important;

Hi, thank you again. No theme. It does work overall, it’s just not working in edit mode.

[anon63144152]

Sorry, I really don’t know why it isn’t working. As a test, does the following change the font color and font-weight? (When you change a css file, it needs to be saved before Obsidian will read the changes.)

/* EDITING AND READING INTERNAL LINK */
.markdown-source-view.mod-cm6 .cm-hmd-internal-link,
.markdown-rendered .internal-link {
  text-transform: uppercase;
  color: blue;
  font-weight: 800;
}

I don’t use Discord, but you might find an answer over there …

Community - Obsidian

[ironhak]

Yes, this works. It’s just edit mode that is not working

Edit. Thank’s anyway, I’ll keep it like that… Really thank’s for your time. Maybe someday will come someone with the same problem and hopefully be able to solve it.

[anon63144152]

Sorry I haven’t provided a working solution for you. Hope someone else can help.

Attached is a test vault complete with the a css snippet that styles internal links in uppercase font. I see the styling working in both edit and reading mode.

test.zip (5.5 KB)

[ironhak]

Do not worry at all, and thank’s for your help.