Obsidian美化|CSS Snippets资源整理

前言

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

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

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

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

GitHub资源

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

英文论坛和Discord

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

.modal-bg { backdrop-filter: blur(5px); }
/* 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越来越称心顺手~

8 个赞

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

/* === 预览和编辑模式下的卡片样式,可配合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;
}
7 个赞

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

我分享一个刚从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;
}

效果好好看

图片

5 个赞

好看!感谢分享(´∀`):heart:

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

/* 给左侧边栏文件夹前添加图标,""内图标和文件夹名称请自行修改 */
.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 大佬的指点。

6 个赞

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

1 个赞

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

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

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

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

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

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

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