Changing color in hierarchy

[saitatter]

Can you change text color/background color of notes in hierarchy/outlier?

[dosubot[bot]]

Yes, you can change the color of notes in the hierarchy (note tree) in Trilium Notes. The simplest way is to add a #color attribute to a note and set it to any valid CSS color (like #ff0000 for red or green). This changes the color of both the icon and the title in the tree view details wiki.

For more advanced customization (like changing background color or adding icons), you can assign a CSS class to a note using the #cssClass(inheritable)=yourClassName attribute, then add global CSS in a note with the #appCss attribute. For example:

.important span.fancytree-title::before {
  content: "⚠ ";
  background-color: red;
  color: yellow;
}

This will style all notes with the important class in the tree example.

Changing the background color of the entire row in the hierarchy is more limited, but these methods cover most use cases for customizing note appearance in the outline. There are also plans for easier color and template marking directly from the tree in future releases feature discussion.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[saitatter]

@dosu Where should I put this css file relative to the nodes that I want to style? Can I use local css or just global?

[dosubot[bot]]

You can't use local (per-note) CSS for styling the hierarchy/tree in Trilium—CSS for the note tree must be applied globally. To do this, create a note anywhere in your workspace, add your CSS code to it, and assign the #appCss attribute. This will apply your styles across the whole app. If you want to target specific notes, give them a unique class using the #cssClass attribute (like #cssClass=important), then write your CSS to style that class globally. Local CSS scoped only to a single note in the tree isn't supported—global CSS with unique classes is the way to go details.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}