Hello,
Just looking for some help regarding the Kanban Board plugin (apolgies if this is the incorrect place to post this!). For context, I’m using the Obsidian Nord theme.
I’ve noticed on another theme (blue topaz) the kanban boards/cards are different colours (screenshot below), is there a CSS code thing that I can use to change the colours in the obsidian nord theme at all? It would be really handy to figure out how the colours can be changed and implemented! TIA
I don’t think there is any special property to change the color (at least I couldn’t find one), but you can create a custom CSS snippet in Obsidian with the following code (this is some raw code I came up with, sorry for not being more clean/elaborate):
.kanban-plugin__lane,
.kanban-plugin__lane-items.kanban-plugin__scroll-container,
.kanban-plugin__item-title-wrapper,
.kanban-plugin__item-button-wrapper,
.kanban-plugin__item-metadata-wrapper,
.kanban-plugin__markdown-preview-view *
{
background-color: white !important; // white background
color: black !important; // black text/foreground
}
NOTE: this changes the colors for ALL lanes. You can go even further by inspecting the kanban HTML & CSS code by hitting CTRL+SHIFT+I inside Obsidian to see what else you can change with CSS, or how the lanes are colored individually.
I don’t know about your specific question, but I found and used this snippet to tweak my Kanban. So you can at least reference it for some class names.
https://www.reddit.com/r/ObsidianMD/comments/zsvarj/obsidian_kanban_redesign_a_css_snippet/
I tweaked it to add more contrast and shape separation, so cards really separate. (I’m still tweaking.)
Once I go into the developer part, where do I find the CSS code for the lanes? It is just all a flood of code to me 
Thanks!
Do you meant the Developer Tools in Obsidian?
I’d rather open up the CSS files, and read through them, and look for elements that seem related.
If you open up the Blue Topaz CSS (it’s huge) around line 10141 you see a bunch of Kanban stuff. The file is so huge it might be better to read some of the comments about where they got some of the ideas, and go see if those themes do the same thing with simpler examples. 
Line 10178 looks suspiciously like it is assigning colors to the index of something. So that might be the lanes. But it is colouring some odd custom classes that likely get defined somewhere else.
Around line 13313, there is something about rainbow-lines-reading. But no idea if that’s related.
Around line 17163, you see some lane wrapper elements.
body.style-options-for-kanban-plugin-static-all-color.theme-light .kanban-plugin__lane-wrapper:nth-child(7n+1) {
background: linear-gradient(to bottom, var(--kanban-color-1) 30%, transparent) !important;
}
17547, there is something about huerotate, which might be about cycling colors.
(Maybe someone knows more specifically. Or maybe there are simpler examples to find. But trying to find these things through the developer tools could be very difficult. Especially since the CSS seems so layered.)
Actually, going through DevTools was easier to identify how the colors were set up
The theme appears to introduce the following CSS properties:
--kanban-color-1: #0065d852;
--kanban-color-2: #30e4e441;
--kanban-color-3: #1cb54f44;
--kanban-color-4: #97b82b49;
--kanban-color-5: #bb722d41;
--kanban-color-6: #d12e2e42;
--kanban-color-7: #8f36cb3f;
I tried changing them in my :root and it worked, so there you have it @SuperGirl632 , easy as pie changing the colors!
Here’s the CSS snippet I used and simply change the colors according to your needs:
:root, body, .view-content {
/* e.g. using "ff" instead of "00" made it a nice pink */
--kanban-color-1: #ff65d852;
--kanban-color-2: #f0040441;
--kanban-color-3: #fcb54f44;
--kanban-color-4: #97b82b49;
--kanban-color-5: #bb722d41;
--kanban-color-6: #d12e2e42;
--kanban-color-7: #8f36cb3f;
}
I stand corrected. I guess that’s because the developer tools shows the final rendered results, rather than the potentially long chain of variables, etc?
Omg you are amazing I will need to try it later when I’m at my computer but that is awesome! Thankyou 
Sorry but this doesn’t seem to be working for me 
i’ve tried pasting it into my snippets file, the theme css file and the kanban css one but nothing at all! where did you paste it or edit it? I do apologise i really don’t know much about CSS etc
The snippet must be placed inside the Obsidian config folder (“.obsidian/snippets/”), but you also have to enable the snippet from the Obsidian Settings window, specifically under the Appearance section (there should be a toggle for each snippet you put in that folder)
I tried it myself with the same theme you have and it works just fine on my end.
The --kanban-color-n bits come from Blue Topaz, so changing those will only alter the colors if you are using Blue Topaz.
To get this look in different themes, as rigmarole mentioned, you’ll need all (or most) of Blue Topaz’s custom kanban CSS that sets up the conditions and then refers to these colors (.kanban-plugin__lane-wrapper:nth-child(7n+1) and above in the kanban section of the theme.css).
I stand uncorrected, lol
How do you add those “Status…” and “Project…” fields? Is this some meta-data?
Click the gear icon at the top right of each Kanban board to access that board’s settings. You can configure it to display properties from inside the note, and change other settings.
Sorry for being slow, is it this option?
Linked Page Metadata
Display metadata for the first note linked within a card. Specify which metadata keys to display below. An optional label can be provided, and labels can be hidden altogether.
Yep that looks right. And so the note has to have the metadata property you want to show.
Somewhere in the options you can also set a template that gets used. So I have a template that makes all those properties for me. “status”, “next step”, “due date”, tags, etc.
Great, thanks a lot!
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
