Color banded rows

wasn’t sure if this is considered a feature request or plugin request. ¯\_(ツ)_/¯

Use case or problem

I’d like to more easily be able to differentiate between separate lines while editing notes.

Proposed solution

The option to add alternating-colored rows to the note view in edit mode, similar to Excel.

Current workaround (optional)

N/A. Unable to find any community plugins or themes to implement color banding.

Related feature requests (optional)

N/A.

1 Like

kepano/obsidian-minimal: A distraction-free and highly customizable theme for Obsidian

row-alt Add striped background to alternating table rows

I think your best bet will be to write a CSS snippet.

That link to Minimal is referring to tables. This link talks about paragraph text. You’ll need to change this into Obsidian syntax, to target the right elements.

3 Likes

was afraid of this cause the most “coding” I know was learning markup just now on obsidian. I’m always down for a challenge though. thanks for the tip!

You marked it as solution, which makes it auto-close.

Instead, I removed the auto-close, moved it to help and tagged it css. You can ask for help and someone might suggest a snippet. No need to write it all by yourself. :slight_smile:

Here’s an awful-looking minimal working example :joy:

.cm-line:nth-child(odd) {
    background-color: red;
}

.cm-line:nth-child(even) {
    background-color: blue;
}

About :nth-child :

You can find variable names of “proper” colors in:

Replace red or blue with var(--variable-name-that-you-want-to-use)

1 Like

Good start!

For nicer colors, you could use RGBA, and add a very transparent Alpha in the 4th value.

.cm-line:nth-child(odd) {
    background-color: rgba(255, 0, 0, 0.1);
}

.cm-line:nth-child(even) {
    background-color: rgba(0, 0, 255, 0.1);
}

The problem with nth-child is that it is based on full lines, not on wrapped lines. Depending on what you are looking for.

2 Likes

Right, but I’m not sure how I can get that fine-grained control with CSS snippets…

By the way, you can highlight the currently active line using

.cm-line.cm-active {
  background-color: <COLOR YOU LIKE>;
}

(though this might not be exactly what you want.)

Also, some themes have this feature out of the box:

  • Obsidian Nord
  • Minimal (needs to be configured with Style Settings)

1 Like

This is good stuff, I’ll have to check this out after work.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.