Difficulty with Obsidian CSS vs Roam CSS

1 Like

BTW Liked your discussion on integrated thinking environment

1 Like

My suggestion:

1 - First you need to understand how obsidian works in the two modes: editor mode and preview mode. For example, for internal-link you need to target css code differently to edit or preview mode:

edit mode

.cm-s-obsidian span.cm-hmd-internal-link {
  color :red;
}

preview mode

.markdown-preview-view .internal-link {
  color: orange;
}

2 - Then, you need to identify an attribute selector to add a particular style to a specific internal-link. But I think that isn’t so easy in editor mode, because the internal-link isn’t a really link.

3 - Use View > Toggle Developer Tools to identify your target elements.

2 Likes

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.

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;
}

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:

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.

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

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

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

Maybe it conflicts with a theme?

I am in default theme.

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:

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

1 Like

@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?

ooh probably! lemme check

It looks like it’s from Supercharged Links plugin

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

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

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