Difficulty with Obsidian CSS vs Roam CSS

Help
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:

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 .