css修改栏宽

跟着《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 个赞

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

我这样修改之后是可行的。在设置中打开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。

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

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

body {
  --file-line-width: calc(82vh);
}
4 个赞

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

太赞了,亲测可用!

只针对列宽的话,自定义百分比也不错

body {
	--file-line-width: 90%; 
}

希望有帮助到你

1 个赞

我用了这个语句之后宽度确实修改了,但是我发现整个书写区似乎没有居中了,请问你也有这个情况吗