跳到主要内容

Obsidian-如何使用 css 定制视图?

Context

我希望特定页面中的嵌入视图可以不显示 ## Resource 的 title。

Requirement

  • CSS Snippet functionality
  • cssclass field for one obsidian note: add className for one page

Final Effect

Before

After

Solution

1. See note HTML

Press Ctrl + Shift + I to open dev tool of page.

2. Add css file into .obsidian

/*
clean-embed.css snippet

Removes title, link, padding, margins from embeds,
so they really look like the same note.

To be used with `cssclass: clean-embed` in YAML frontmatter.

2024-06-25 Xiaokaup (xiaokaup)
*/

.clean-embed .internal-embed h2 {
display: none;
}
.clean-embed .internal-embed .embed-title {
display: none;
}
.clean-embed .internal-embed ul {
margin: 0;
}

3. Confirm enable 2024-06-25-clean-embed.css file for Code snippet founctionality

4. Add cssclass as attribute for note

Resource

History

  • 2024.06.25, created by xiaoka: first version
  • Template: [[2024-06-12-Obsidian-操作-增加 History 历史]]