Obsidian 的 CSS 代码片段
主题可以帮助你获得更加的视觉和交互体验,除了通过 设置 > 外观 > 主题,中安装的主题外。
Obsidian 还支持一种外部样式代码引用的方式。
位置
打开笔记仓库的 .obsidian
文件夹,其中如果没有 snippets
文件夹则创建。
在 Obsidian 中的 CSS snippets 都是以 .css 的档案格式储存在特定的文件夹。如果你有将 CSS snippets 放到该文件夹,就会在 Obsidian 显示开关。
使用
- 别人给你的,或者你看到不错的代码片段(CSS)文件,放进
snippets
文件夹就行。或者自己建立一个 CSS 文件,书写你自己的样式当然需要一点 CSS 代码基础。 - Obsidian > 设置 > 外观,最后一项【CSS 代码片段】,刷新一下,会显示出新增的文件,把后面的切换按钮打开即可。
- 如果你使用的网站上复制的内容,那么可以尝试先把内容放到一个文本文件(.txt),然后将文本文件的文件类型(后缀名)改为 .css 即可。然后重复 步骤 1 和 步骤 2
涉及软件界面的修改,有时候可能需要重启软件生效。
视频教程
Obsidian CSS 主题自定义教程
CSS 修改优秀范例
ICON
界面元素
- Obsidian样式-悬浮两侧菜单栏
- Obsidian样式-悬浮侧边栏自动弹出,提升工作流效率
- Obsidian样式-专注标签页边框
- Obsidian样式-多彩便笺背景
- Obsidian样式-给Obsidian设置护眼的暖色模式
- Obsidian样式-多行标签页堆叠显示
- Obsidian样式-全宽的图谱搜索框样式
大纲 (Outline)
编辑器
- Obsidian样式-minimal主题Cards卡片布局
- Obsidian样式-编辑模式下当前行高亮
- Obsidian样式-加粗粗体样式优化
- Obsidian样式-美化代码域对编程语言的样式展示
- Obsidian样式-自定义选中文本部分高亮颜色
- Obsidian样式-使用CSS-HTML实现分栏
- Obsidian样式-用分割线实现分栏
- Obsidian样式-笔记页内标题居中
- Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS
- Obsidian样式-分割线样式美化
- Obsidian样式-给笔记添加随机背景图
- Obsidian样式-美化高亮样式
- Obsidian样式-修复1.3.7版本标题语法高度问题
- Obsidian安卓上利用css修改界面字体
- Obsidian样式-缩减栏宽模式下美化笔记内部背景
- Obsidian样式-iPhone-Obsidian自定义字体
- Obsidian样式-实现TiddlyWiki故事河
- Obsidian样式-完成任务时如何取消任务文本的删除线
- Obsidian样式-借助CSS打造独立的大屏表格页面
- Obsidian样式-使用CSS为白板增加可选的标记功能
- Obsidian样式-隐藏 markdown 标记
- Obsidian 样式-表格优化
- Obsidian样式-笔记内容居左或居中切换
- Obsidian样式-分栏分列布局 (Column-Page)
代码块
列表
- Obsidian样式-自定义大纲缩进线样式
- Obsidian样式-给列表添加动态引导线
- Obsidian样式-ITS主题列表样式
- Obsidian样式-标题-列表-图片美化
- Obsidian样式-书签列表样式
- Obsidian样式-无序列表卡片式美化
图片
- Obsidian样式-图片点击长按放大
- Obsidian样式-调整图片不同布局样式
- Obsidian样式-如何让插入笔记中的图片水平居中
- Obsidian样式-hover出现图片描述
- Obsidian样式-限制笔记内的所有图片宽度
callout
- Obsidian样式-Callout样式
- Obsidian样式-如何实现Blue-topaz自带类表格时间线样式
- Obsidian样式-MCL Multi Column
- Obsidian样式-用Callout实现的边注
- Obsidian样式-PLN主题的callout
- Obsidian样式-Vicious主题的callout
- Obsidian样式-tabbed Callout
- Obsidian样式-使用 Callout 进行正文旁注
- Obsidian样式-Minimal主题的Outline Callout
Properties(老称呼 Front-matter,metadata)
- Obsidian样式-如何在阅读模式下隐藏Properties
- Obsidian样式-修复banner和Properties高度冲突以及多余留白改善
- Obsidian样式-控制属性面板(YAML)的显示状态
- Obsidian样式-FrontMatter读书笔记
状态栏
搜索框
设置面板
链接
文件管理器
- Obsidian样式-文件浏览器样式
- Obsidian样式-文件管理名称滚动效果
- Obsidain样式-自定义文件夹图标
- Obsidian样式-超长文件名换行
- Obsidian样式-分割文件管理器
- Obsidian样式-粘性文件夹(Sticky Folder)
段落
待办
引用
嵌入样式
表格样式
标签 Tag 样式
标签页
标签页标题栏
白板(Canvas)
移动端
语法拓展
插件样式
- Obsidian样式-Calendar插件的样式修改
- Obsidian样式-DataView在table视图下标签出现错位断裂的修复
- Obsidian样式-简单更改Excalidraw工具栏布局
- Obsidian样式-HoverEditor插件弹窗中隐藏Properties属性面板
- Obsidian样式-建立书籍电影的卡片化视图
- Obsidian样式-简单更改Excalidraw工具栏布局
- Obsidian样式-可滚动的Dataview表格视图
Thino
- Obsidian样式-给Thino加个滚动条
- Obsidian样式-给Thino搭配10种热力图颜色
- Obsidian样式-Thino单文件时间轴样式
- Obsidian样式-Thino样式
- Obsidian样式-Thino插件隐藏标志位
- Obsidian样式-Thino伪悬浮编辑框
- Obsidian样式-Thino展开增强
- Obsidian样式-Thino列表模式日期样式调整
Admonition
Kanban
自定义 CSS 简单上手指南
如果你正在设计你个性化的 CSS,你可以通过使用开发者工具来获得更多元素信息,提高设计效率。使用开发者工具
- 在 Windows 或 Linux 下,使用快捷键
Ctrl+Shift+I
; - 在 macOS 下,使用快捷键
Cmd+Opt+I
即可。
按下后会出现类似下图的样式。不用被这些代码吓住,这其实就是当前页面的 css 代码。
比如这里你想修改标题颜色只需要点击这个箭头
然后把鼠标指向要修改的元素,这里指向标题
这里的 span.cm-header.cm-header-1
就是标题对应的 css 选择器。
同时左侧调试窗口的内容也变成了 标题对应的 css 设置。
在这里我们发现一条规则 .HyperMD-header-1, .inline-title[data-level='1'], .HyperMD-list-line .cm-header-1
里面包含了 .cm-header-1 就是我们要修改的选择器。
.HyperMD-header-1, .inline-title[data-level='1'], .HyperMD-list-line .cm-header-1 {
font-variant: var(--h1-variant);
letter-spacing: -0.015em;
line-height: var(--h1-line-height);
font-size: var(--h1-size);
color: var(--h1-color);
font-weight: var(--h1-weight);
font-style: var(--h1-style);
font-family: var(--h1-font);
}
通过字母含义不难看出 color 就是负责颜色的。 这里的值为 var(--h1-color)
其实用了 css 的高级写法,我们先不用管它怎么写,双击 var(--h1-color)
这个值,删除后浏览器预设一些颜色值,可供选择,这里的颜色可以输入名称,也支持十六进制色值。
设置好颜色后,会立马在 Obsidian 看到修改后的效果,但这个只是临时效果,重启后就消失了,要永久生效,需要把规则保存为 css 代码片段。
对这条 css 右键 - 复制规则,即可把 css 片段内容复制到剪贴板中。
`
新建一个 css 文件 比如 my.css 把复制的内容粘贴进去,保存即可。
然后参考这里 Obsidian css代码片段 启用 my.css 片段 就可以看到效果了。
延伸阅读
修改样式目前有下面几种途径
- 使用社区主题,根据主题带的设置项调整
- 根据上面教程 自己找到 css 选择器,自己写 css 片段
- 找到别人分享的 css 片段的内容,复制到自己的片段中
- 通过 style setting 插件修改,建议安装 obsidian-style-settings 并使用默认主题片段
讨论
若阁下有独到的见解或新颖的想法,诚邀您在文章下方留言,与大家共同探讨。
反馈交流
其他渠道
版权声明
版权声明:所有 PKMer 文章如果需要转载,请附上原文出处链接。