#8

Thanks for your reply. The real challenge isn’t just changing the color of internal links. But changing the color of the internal links conditionally. The condition I want to set is that if the internal link title contains a particular word / character (such as Z -, E -, CLM, Q - , QUE, @ etc.). I have tried with
.cm-s-obsidian span.cm-hmd-internal-link[href*=“CLM”] {
color : salmon;
}

a.internal-link[href*=“CLM”] {
color: #e299d0;
}

But no success.

#9

I understand that. That’s why I said, in my 2nd point, there’s no easy way to do that for edit mode (in edit mode “href” have no effect because it’s a span, not a really link, without a valid attribute to select). But for preview mode it works (your example works):

a.internal-link[data-href="CLM"] {
  color: #e299d0;
}
#10

You could try this:

.cm-hmd-internal-link[data-link-data-href*="QUE"],
.markdown-preview-view a[href*="QUE"] {
  color: teal !important;
}

.cm-hmd-internal-link[data-link-data-href*="QUE"]::before,
.markdown-preview-view a[href*="QUE"]::before {
  content: "🔎 ";
}

Downside is it cannot style uncreated note links in edit mode :sweat_smile:

Refactor notes with multiple templates
Styling internal links with css
#11

Yeah, I see that now. I tried this way by myself and it works in preview. Now got to find a way to make it work in editor. Thanks.

#12

Thanks for your help. Does this work in edit mode for you? I tried it and cannot make it work in editor.

#13

Yes it works for me (but unresolved links in edit mode can’t be styled as shared in a FR)

#15

Okay. Don’t know why it wont work for me. :confused:

#16

Maybe it conflicts with a theme?

#17

I am in default theme.

#18

I don’t really know anymore :thinking:

I actually tried it with two vaults in default theme and they both worked. The only reason it won’t work is if the note doesn’t exist :upside_down_face:

#19

It just bad luck I guess :grinning_face_with_smiling_eyes: Thanks for your help anyway.

1 Like
#20

@DEV_Scribbles I’m in same position: the code for edit mode doesn’t work.
This could be a newbie question, but where do you find the attribute selector “data-link-data-href”? There’s any chance that attribute is given by any plugin?

#21

ooh probably! lemme check

#22

It looks like it’s from Supercharged Links plugin

#23

Ok. It makes more sense because I didn’t found any particular attribute.
Supercharged is unknown for me. I’ll check it.
Thanks.

#24

Supercharged LInks has included an option to see changes in edit mode. But that hasn’t worked for me either.

#25

i found i had to reload the app for the changes to apply

#26

For me, even reloading the app does’nt work. It works in the preview mode only.

#27

Screenshots will probably help here! Maybe show the snippet you’re testing too.

#28

.cm-hmd-internal-link[data-link-data-href*=“CLM”],
.markdown-preview-view a[href*=“CLM”] {
color: salmon !important;
}

.cm-hmd-internal-link[data-link-data-href*=“CLM”]::before,
.markdown-preview-view a[href*=“CLM”]::before {
content: ":mag_right: ";
}

This is the most promising snippet that i have tested so far. Thanks to @DEV_Scribbles .