Obsidian美化｜CSS Snippets资源整理

临安 · 2021 年9 月 22 日 02:54

前言

在使用Obsidian的时候，我很在意外观样式这个问题，毕竟几乎一天都对着它。在使用社区的第三方主题时，虽然也觉得有很多好看的，但总是会在使用中发现这样那样的问题，比如字对不齐、行间距不够高、图标歪了或侧边栏有点碍事之类的，更不要说安装了第三方插件之后了。因此我就开始学着自己在原生主题基础上改一改CSS，在这个过程中发现了很多已有的好资源，慢慢地也积累了一些，想着或许有别的小伙伴也需要，就在这里分享一下。

本楼中列出的资源是我自己在用的时候收集整理的，每一项我都会尽量写明出处，权利归创作者所有，如果贴出来有任何不妥我会立刻删除。在此感谢分享经验的大佬们！
本楼我会一直不定期的维护添加，比较大的资源集合会修改在主楼，比较零散的可能就在下面的回复里添加了，不然主楼太长。欢迎有优质资源的小伙伴在此分享。

首先列举两个CSS相关的基础教程，大家其实可以学会了之后自己试着改，想改哪里点哪里：

知乎@韦钧培的教程：Obsidian自定义样式修改教程
本论坛@WhyI_TripleF 大佬的教学帖：Obsidian主题样式修改半入门教学

每一个片段的用途一般会写在/**/包围起来的注释里，不会特别复杂，应该还是比较好懂的。

GitHub资源

kmaasrud的awesome-obsidian是一个非常全面的资源集合，包括但不限于CSS主题、Ob模板和插件等方面。
Dmitriy-Shulha的obsidian-css-snippets是一个全面但简洁的Snippets集合，有很多最基础的样式修改片段，可以满足很多方面的需求，既有文本部分的也有工作区的。
deathau的obsidian-snippets是修改编辑区内一些花样比较多的样式的，比如背景颜色和checkbox小图标之类的。
eleanorkonik的-palatinate，这位是原生主题配色爱好者，改动的部分也基本是文本，比如引用框的样式。现在她写的theme在社区已经上架了，也可以一键安装使用。

英文论坛和Discord

这两边信息都非常多，而且很碎，所以我只搜集了一些我自己感兴趣的：

Custom CSS for tables：美化Dataview生成的表格样式。
Discord@SIRvb：打开设置界面时背景模糊

.modal-bg { backdrop-filter: blur(5px); }

Discord@pseudometa：将六级标题修改为一种特殊的类Admonition样式：

/* Pseudo-Admonitions For H6 only (without following blocks). Based on some CSS from @SlRvb#3223 & @Eleanor#3466 Konik */ 
.markdown-preview-view h6 { 
	padding-left: 0.3em; 
	padding-bottom: 0.5em; 
	padding-top: 0.5em; 
	background-color: var(--background-secondary); 
	margin-bottom: 0; 
	border-left: 5px solid var(--text-muted); 
	font-size: 1em font-style: normal; 
	color: var(--text-normal) !important; 
} 
.markdown-preview-view h6 .heading-collapse-indicator.collapse-indicator.collapse-icon { 
	display: none; 
} 
.markdown-preview-view h6:before { 
	content: ":information_source:"; 
	padding-right: 0.5em; 
}

有很多样式是可以在基础样式上修改得来的，可以多多尝试Ctrl + Shift + I之后自己修改想处理的元素，大部分时候都是可以解决的，我也在不断地摸索，自己修改成功了一项之后也是很有成就感的。
祝你的Obsidian越来越称心顺手~

临安 · 2021 年9 月 22 日 03:00

抛砖引玉一下，我自己试着写的一个把插入元素（如块引用、标题引用等）改成卡片的样式：

/* === 预览和编辑模式下的卡片样式，可配合oz插件 === */
.markdown-preview-view .markdown-embed, .markdown-preview-view .file-embed {
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 0px 24px;
  margin-top: 8px;
  display: block;
  /*box-shadow: 0 0 20px 0 #ecedee;*/
}

.markdown-preview-view blockquote {
    border-radius: 0;
    border: 0px solid var(--text-accent);
    border-left-width: 5px;
}
.oz-transclusion-widget {
    padding: 3px 3px 3px 19px;
    border: 1px solid var(--background-modifier-border) !important;
    border-radius: 8px;
    /*box-shadow: 0 0 20px 0 #ecedee;*/
    margin-top: 6px;
}
/* === 嵌入元素去掉标题栏，这个是借鉴别人的但是我找不到出处了orz === */

.markdown-embed-title, .file-embed-title {
    font-size: 0;
}
.markdown-embed-title {
    height: 0;
}

LillianWho · 2021 年9 月 23 日 01:55

我说怎么没看出来区别，原来是我用的主题已经写成卡片样式了。赞！

我分享一个刚从orange主题里扒下来的给双链加图标的css:

/* 引用文件时，文件名前面会出现 “文档” icon */
.markdown-preview-view a.internal-link::before {
  margin-right: 4px;
  margin-left: 2px;

  content: '';
  background-image: url("data:image/svg+xml,%3Csvg t='1626093724345' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3856' width='200' height='200'%3E%3Cpath d='M896.5 328.5h-256c-13.3 0-24-10.7-24-24v-256c0-13.3 10.7-24 24-24s24 10.7 24 24v232h232c13.3 0 24 10.7 24 24s-10.7 24-24 24z' fill='%230A59F7' p-id='3857'%3E%3C/path%3E%3Cpath d='M896.5 1000.5h-768c-13.3 0-24-10.7-24-24v-928c0-13.3 10.7-24 24-24h512c6.4 0 12.5 2.5 17 7l256 256c4.5 4.5 7 10.6 7 17v672c0 13.3-10.7 24-24 24z m-744-48h720V314.4L630.6 72.5H152.5v880z' fill='%230A59F7' p-id='3858'%3E%3C/path%3E%3Cpath d='M704.5 792.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM704.5 632.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM704.5 472.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM448.5 312.5h-128c-13.3 0-24-10.7-24-24s10.7-24 24-24h128c13.3 0 24 10.7 24 24s-10.7 24-24 24z' fill='%230A59F7' p-id='3859'%3E%3C/path%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
}

效果好好看

临安 · 2021 年9 月 23 日 03:13

好看！感谢分享(´∀｀)

临安 · 2021 年9 月 24 日 01:28

补充一个给左侧边栏添加小图标的片段。这个也是别的大佬写的，但是我当时忘了记出处了，所以真的非常抱歉……如有侵权我立刻删除！
这是预览样式：

/* 给左侧边栏文件夹前添加图标，""内图标和文件夹名称请自行修改 */
.nav-folder-title[data-path^="@Inbox"] .nav-folder-title-content::before {
    content: "📌" !important;
    position: relative !important;
    right: 5px;
}

.nav-folder-title[data-path^="000-项目"] .nav-folder-title-content::before {
    content: "📜" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="100-备忘"] .nav-folder-title-content::before {
    content: "📝" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="200-语言学"] .nav-folder-title-content::before {
    content: "🎧" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="300-学习&提升"] .nav-folder-title-content::before {
    content: "📚" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="400-工作&效率"] .nav-folder-title-content::before {
    content: "📊" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="500-生活&兴趣"] .nav-folder-title-content::before {
    content: "🎨" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="Archive"] .nav-folder-title-content::before {
    content: "📦" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="Attachment"] .nav-folder-title-content::before {
    content: "🗂️" !important;
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="Collections"] .nav-folder-title-content::before {
    content: "🔖";
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="Others"] .nav-folder-title-content::before {
    content: "💾";
    position: relative !important;
    right: 5px;
}
.nav-folder-title[data-path^="Template"] .nav-folder-title-content::before {
    content: "📑";
    position: relative !important;
    right: 5px;
}

如果希望子文件夹的图标不要包括这些emoji，可以把代码中的^换成$。感谢@uncoverman 大佬的指点。

Keith · 2021 年10 月 11 日 14:22

现在用icon folder插件更方便了.

hob · 2021 年10 月 15 日 20:13

有图片并排显示的效果吗？之前是MD方式觉得不方便。

Keith · 2021 年10 月 15 日 23:48

我记得在Minimal_Orange这个主题中,就有这个功能, 你可以查一下.

大概是调用了img-grid.css然后在相应的笔记里的YAML 中写 cssclass: img-grid

之后就可以按照自己想并列几张就几张的操作了

LillianWho · 2021 年10 月 16 日 07:18

我记得，官方已经是图片并排了，如果你的图片尺寸合适，它会自动并排。如果你那里看不到这个效果，可以关闭主题看看。

如果官方的并排不能满足你的需求，就蹲一个片段吧

Quen · 2022 年5 月 12 日 06:58

iconFolder比较麻烦吧，自己要去找一堆图标，而且关键的是用不到那么多图标，css是要省很多事情的。

Nice · 2023 年3 月 8 日 14:55

用 margin-right: 5px; 避免遮盖图标

llleona · 2023 年5 月 24 日 13:51

我在默认主题下用了一些css片段，设置成blue topaz以后发现这些片段有一部分失效了，请问这是什么原因呢？应该怎么解决？

hly · 2023 年6 月 20 日 01:46

这个图标是不是要单独下载，我的图标没有颜色

独乐乐 · 2023 年9 月 15 日 07:11

好喜欢楼主的美化效果呀，可以分享下你使用的CSS片段吗？

Anber · 2023 年10 月 26 日 09:07

大佬，还是会被遮挡
截屏2023-10-26 17.07.03