Changing link color based on link type

Custom CSS & Theme Design
1

What I’m trying to do

I am trying to assign different colors to links (both resolved, i.e. where the linked note has been created, and unresolved, i.e. that are still waiting for the linked note to be created). Specifically, I want to have links to “Literature” notes in light blue, links to “Primary Sources” and “Cases” notes in pink, links to “Concepts” in orange, and links to “Ideas” in red.

In practice, I would like to:
first, assign a category to the link I’m creating (literature, primary source, etc.)
second, color-code the link for that category

The result ideally should be the following:

I type in [[lit_Smith 2011]]
and what appears is just Smith 2011 in light blue

Things I have tried

ChatGPT came up with a code for this, but it doesn’t work. Here is the code:

/* Style Literature links */
a.internal-link[href^=“lit_”], a.is-unresolved[href^=“lit_”] {
color: lightblue !important;
}

/* Style Primary sources links */
a.internal-link[href^=“ps_”], a.is-unresolved[href^=“ps_”] {
color: pink !important;
}

/* Style Cases links */
a.internal-link[href^=“case_”], a.is-unresolved[href^=“case_”] {
color: pink !important;
}

/* Style Concepts links */
a.internal-link[href^=“con_”], a.is-unresolved[href^=“con_”] {
color: orange !important;
}

/* Style Ideas links */
a.internal-link[href^=“idea_”], a.is-unresolved[href^=“idea_”] {
color: red !important;
}

I created the .css file, activated it in snippets, but Obsidian doesn’t apply it. It does, however, read the .css file because if I type in a simple code to turn all links to green, it applies it and it works. I’m thinking GPT’s code is the problem. We have actually tried many different ones (e.g. adding “important” here and there in the code etc.), but nothing works. Spent a whole day on this.

Could someone please help me with a code that works?? Thank you!

2

To clarify, are you trying to apply this to the live edit view or the reader view? (I forget exactly what Obsidian calls them, as I always work in the editing view).

If the live edit view, at least, I don’t think this is possible with CSS.

Internal links generated by Obsidian don’t have anything in the href attribute, which is what the code you’ve got is trying to target. As a result, there’s no way for the CSS to distinguish between links to one note or another.

There may be a way to add some kind of pseudo-class to a link, but I haven’t experimented with that so don’t know.

3

Hi, thanks for your reply!

It actually allowed me to see that the code that Obsidian gave me was indeed working, just not in edit view - but in reader view yes! So thanks for that - I hadn’t realized there were two different viewing options (that’s how new to Obsidian I am).

However, now I have another problem. The link categorization doesn’t work, I would like to automate it. I explain:

Now I write [[lit_Smith 2011]] and what I see is lit_Smith 2011 in light blue. The color is right, but I would like to only see Smith 2011. I know I could write [[lit_Smith 2011 | Smith 2011]], but doing this for every link becomes very long. I wanted to automate this. ChatGPT suggested me to create a template with Templater to automate this process. This is the code he gave me:

<%*
const category = tp.prompt(“Enter the category (lit, ps, case, top, idea):”);
const title = tp.prompt(“Enter the note title:”);
const prefix = category === “lit” ? “lit_” :
category === “ps” ? “ps_” :
category === “case” ? “case_” :
category === “top” ? “top_” :
category === “idea” ? “idea_” : “”;

const formattedLink = [[${prefix}${title}|${title}]];
%>
<%= formattedLink %>

However, if I try to invoke this template, I receive the following error notification: “Templater error: template parsing error. Aborting. Check console for more information.” This actually happens even if I try to invoke a much simpler template, one that contains a very simple code. What I do to invoke the template is the following:

cmd + P, select “Templater: Open insert template modal”, and then select the note that contains the code (the note is located in the Templates folder where Templater goes to look, so that’s not the problem).

Any idea of why this may be? ChatGPT tells me I need to toggle on an option on Templater settings to “Enable JavaScript in templates”, but I don’t have that option. All I have is a “Scripts files folder location”, but that is for JavaScript files, not markdown files, which is what my code is.

Thanks for any help - I am really new to all this and it is driving me crazy!

4

Not sure if this fixes your problem or not…

If you don’t mind the [[ page name | alias ]] method existing in the editing view, you can automate this by going to the page (in your case, lit_Smith 2011) and adding an alias to the properties. You should be able to add this using the drop-down menu in the reading mode, or you can add it manually in the edit mode like this:

---
aliases: alias name, Smith 2011, alice is cool
---

Note, ensure that the top set of --- is the very first text in the document, including blank lines.

Now, when you type [[ you can immediately type the alias name ( [[Smith) and obsidian will bring up the same drop down selection box of suggested page names as before, but will include the alias you created as well. You can select the alias name instead of the page name and it will autocomplete as normal, but it will autocomplete with the [[lit_Smith 2011|Smith 2011]] format.

I hope this helps :slight_smile: