A better sidebar with folders icons

Share & showcase
,
1

image
image1097×1260 84.2 KB

I’m aware of the plugin (Icon Folder) which is great but changing a folder’s icon doesn’t replace the arrows next to them.

I searched couple of themes and managed to build my own sidebar. It has folders open/closed icons. Bold text for folders while normal for files. A bit larger text on mobile devices. All can be edited from the below css snippet.

Also icons can easily be changed using any online svg icon and converting it to css format. I used THIS page for conversion
And icons from SVG repo

CSS snippet


.nav-folder-title {
    font-size: 16px;
    font-weight: bold;
}

.nav-file-title {
    font-size: 16px;
}



body:not(.nav-folder-indicators) .nav-folder.is-collapsed .nav-folder-title-content::before,
body:not(.nav-folder-indicators) .nav-folder .nav-folder-title-content::before {
  display: inline-block;
  content: "";
  margin-right: 8px;
  vertical-align: text-bottom;
  height: 20px;
  width: 20px;
  background-color: currentColor;
}
body:not(.nav-folder-indicators) .nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content::before {

  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M426.666667,341.333333 L3.55271368e-14,341.333333 L3.55271368e-14,1.42108547e-14 L178.083413,1.42108547e-14 L232.041813,42.6666667 L426.666667,42.6666667 L426.666667,341.333333 Z M42.6666667,298.666667 L384,298.666667 L384,85.3333333 L217.20832,85.3333333 L163.24992,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;

}

body:not(.nav-folder-indicators) .nav-folder .nav-folder-title .nav-folder-title-content::before {
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-open-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder-open' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M384,128 L384,42.6666667 L232.0416,42.6666667 L178.0832,1.42108547e-14 L7.10542736e-15,1.42108547e-14 L7.10542736e-15,341.333333 L60.9376,341.333333 L352.437547,341.333333 L361.604267,341.333333 L426.354347,128 L384,128 Z M42.6666667,253.44 L42.6666667,42.6666667 L163.24992,42.6666667 L217.20832,85.3333333 L341.333333,85.3333333 L341.333333,128 L82.0209067,128 L42.6666667,253.44 Z M329.979093,298.666667 L73.1874133,298.666667 L113.354027,170.666667 L368.812373,170.666667 L329.979093,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e"); no-repeat;
}
body:not(.nav-folder-indicators) .nav-folder-collapse-indicator {
  display: none;
}
body:not(.nav-folder-indicators) .nav-folder-title {
  padding-left: 4px;
}
12 Likes
2

Hello, great work, can you maybe share how this would work with local icon file?

1 Like
3

Thanks for sharing! Here’s a riff on your fantastic style. My goal was to make Obsidian look a bit more like VSCode.

  1. I removed the folder icon next the Vault’s name.
  2. I unhid the folder’s collapse indicators.
  3. I shrank the folder icon’s width and height by a few pixels.
  4. I removed some of the margin next to the folder’s icon.
  5. I reset the folder name’s font styles to use Obsidian’s defaults.

Screenshot 2023-04-05 at 15.48.52
Screenshot 2023-04-05 at 15.48.52740×666 25.3 KB

Here’s the CSS snippet I ended up with.

.nav-folder:not(.mod-root) .nav-folder-title-content::before {
  display: inline-block;
  content: "";
  margin-right: 5px;
  vertical-align: text-bottom;
  height: 15px;
  width: 15px;
  background-color: currentColor;
}

.nav-folder:not(.mod-root):not(.is-collapsed) .nav-folder-title-content::before {
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-open-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder-open' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M384,128 L384,42.6666667 L232.0416,42.6666667 L178.0832,1.42108547e-14 L7.10542736e-15,1.42108547e-14 L7.10542736e-15,341.333333 L60.9376,341.333333 L352.437547,341.333333 L361.604267,341.333333 L426.354347,128 L384,128 Z M42.6666667,253.44 L42.6666667,42.6666667 L163.24992,42.6666667 L217.20832,85.3333333 L341.333333,85.3333333 L341.333333,128 L82.0209067,128 L42.6666667,253.44 Z M329.979093,298.666667 L73.1874133,298.666667 L113.354027,170.666667 L368.812373,170.666667 L329.979093,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;
}

.nav-folder:not(.mod-root).is-collapsed .nav-folder-title-content::before {
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3efolder-outline%3c/title%3e%3cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='folder' fill='%23000000' transform='translate(42.666667, 85.333333)'%3e%3cpath d='M426.666667,341.333333 L3.55271368e-14,341.333333 L3.55271368e-14,1.42108547e-14 L178.083413,1.42108547e-14 L232.041813,42.6666667 L426.666667,42.6666667 L426.666667,341.333333 Z M42.6666667,298.666667 L384,298.666667 L384,85.3333333 L217.20832,85.3333333 L163.24992,42.6666667 L42.6666667,42.6666667 L42.6666667,298.666667 Z' id='Shape'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e") no-repeat;
}
8 Likes
4

Thank you for snippet. It is amazing!

5

Thanks for sharing! I can‘t believe I do it at last!
image