Difficulty with Obsidian CSS vs Roam CSS

Custom CSS & Theme Design
1

Roam CSS is way easier than Obsidian CSS. I have been trying to style internal links in Obsidian for some time now. No Luck. It just took me half an hour to achieve the same in Roam.

2

(I moved your post from the thread you replied to because it was off-topic.)

However, I don’t really understand your point—do you have anything constructive to suggest?

(Incidentally I have heard the exact opposite feedback from experienced Roam developers. They have complained that Roam’s actual app involves a lot of hardcoded style attributes which make it treacherous to achieve specificity with CSS selectors…)

3

Perhaps that post is better suited here. But, I am finding custom styling internal links in Obsidian CSS really a difficult thing to do. I have searched a lot on the web and in the forums. Most css styling for links only include changing the color and the font. I also find many people struggle with the same issues as myself. Trying to make it work both in the editor and the preview view.

4

Sure, maybe share what you’re trying to do exactly and some of what you’ve tried?

5
1 Like
6

BTW Liked your discussion on integrated thinking environment

1 Like
7

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