css修改栏宽

经验分享
1

跟着《Obsidian主题样式修改半入门教学》弄的。
起因是觉得obsidian的缩减栏宽一旦打开，文本框太窄了，而关掉它，又影响阅读。
于是就想能不能自己改一下。
于是有了下面的css。
现在，在预览模式下，栏宽可以被修改了，但是编辑模式下好像不行。各位大佬有啥建议？
哦，对，忘了说了，主题用的是Thing

:root{
    --max-width:  100%;/* Amount of padding around the text, use 90% for narrower padding */
    --line-width: 60rem; /* Maximum characters per line */
}

body {
  --line-width-adaptive: var(--line-width);
}

.markdown-source-view.is-readable-line-width .CodeMirror {
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto 0 auto;
    width: var(--line-width-adaptive);
    max-width: var(--max-width);
}
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer{
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto 0 auto;
    max-width: var(--max-width);
    width: var(--line-width-adaptive);
}
1 个赞
2

我也想知道这个，我发现bt主题的行宽就是预览和编辑的时候都是比较宽的，可以研究一下bt的css库。我对css不太熟悉。

3

我这样修改之后是可行的。在设置中打开appearance，然后找到最后的vault/.obsidian/snippets，打开这个文件夹，然后新建一个如page-width.css，css如下

.markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-line:not(.HyperMD-table-row) {
    max-width: 2000px; /* 默认最大是700px，所以一定要带上，只要比width大就行。 */
    width: 1000px;         /* 怎么舒服怎么来调整 */
}

回到软件的设置中刷新，并启用page-width.css。

image
image2642×178 14.6 KB

可以使用Ctrl+Shift+i打开调试工具，然后调试使用。我的主题使用的是Vue，不知道CSS选择器是否一致。

4

之前版本是什么样的我不知道，现在是通过--file-line-width变量来控制栏宽的
所以我是这么写的

body {
  --file-line-width: calc(82vh);
}
5

在哪儿学？我感觉obsidian自带的很多主题都或多或少都有缺陷。