Obsidian美化|CSS Snippets资源整理

您所在的位置:网站首页 好看剪刀图片 Obsidian美化|CSS Snippets资源整理

Obsidian美化|CSS Snippets资源整理

2024-07-04 05:21| 来源: 网络整理| 查看: 265

前言

在使用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越来越称心顺手~



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3