Add background to kanban plugin

hi yall, I made a script to add background to the kanban plugin, the script is based in another script that i saw in the forum, but i don’t remember which one.

.view-content .kanban-plugin::after {
  content: "";
  position: fixed;
  background-image: url(https://wallpapercave.com/wp/wp3025553.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(1px) brightness(70%) saturate(100%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}


Change the url by the image that you want in your background.
Change the saturation, blur and brightness to your liking.

5 Likes

Thanks for sharing this. The other version effected the popover windows so I had to disable it. This works better. Also If someone wanted different backgrounds for light and dark mode this works for me.

From the example:

.theme-dark .view-content .kanban-plugin::after {
  content: "";
  position: fixed;
  background-image: url(https://wallpapercave.com/wp/wp3025553.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(1px) brightness(70%) saturate(100%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.theme-light .view-content .kanban-plugin::after {
  content: "";
  position: fixed;
  background-image: url(https://wallpapercave.com/wp/wp3025553.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(1px) brightness(70%) saturate(100%);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

1 Like

Hello. Which file am I supposed to add this CSS snippet to? :slight_smile:

You can add this to Obsidian by creating a new file. CSS stands for cascading style sheet and Obsidian knows to look for multiple css files. Open settings - click appearance - scroll down to the css snippets section - hover over the folder icon, a tool tip will popup saying open snippets folder - click it - create a css file in that folder (kbb.css for example) - add the code to that file and save - might have to restart Obsidian.

1 Like