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.

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.

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)

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.

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)

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