@valantien Hi,
- How can I set headings size < 1, for h4, h5, and h6? (the plugin minimum heading size is 1 …)
- How can I set headings h2 and h3 with bottom-border-style solid, width thin?
Disclaimer: I’m not sure what “plugin minimum” you refer to. However, otherwise:
You could open the .css file for the theme you are using, scroll to the bottom and add any custom css rules you’d like. I wouldn’t recommend that though as those additions will disappear if you update your theme.
Otherwise you can add a custom .css file yourself and put it within the vaultroot/.obsidian/snippets folder. Name it whatever you like, for example “secondbrain.css” or “mycss.css”.
In that file you can add any of your own customisations without them being overwritten in for example a theme update or something. Also, under (Obsidian) Settings → Appearance (scroll to the bottom) you need to enable your custom css file.
Normally within the themes there are also variables being set. This is to ensure that your styled elements are legible in dark/light theme settings. You can set your colors to a variable value and it will follow the theme. You can also instead set your colors to fixed color values if you know you’ll be happy with that.
In your custom CSS file you can add for example:
h1 {
font-size: 1.6em; /* Change size to what you like */
}
h2 {
font-size: 1.4em; /* Change size to what you like */
border-bottom: 1px solid #666; /* change #666 to colour of your liking. #f00 is red. #0f0 is green. #00f is blue. #666 is grey. */
}
h3 {
font-size: 1.2em; /* Change size to what you like */
border-bottom: 1px solid #666; /* change #666 to colour of your liking. #f00 is red. #0f0 is green. #00f is blue. #666 is grey. */
}
h4 {
font-size: 1em; /* Change size to what you like */
}
h5 {
font-size: .8em; /* Change size to what you like */
}
h6 {
font-size: .6em; /* Change size to what you like */
}
The size values can be even more granular, like “0.45em” or “1.37em” too if you need them to.
Just remember that if you change your theme and you still have custom css file enabled, they will still be active if you change theme.
1 Like
What theme are you using? Some themes have, naughtily, set “!important” to some values, even though that should be avoided. That means it will override declarations made later in the “flow” (css is basically read from top → bottom, and the last declaration of something is what “wins”…unless something has been set with “!important”).
Did you create a custom .css file and enabled it under appearance?
Also, I just realised, after creating a custom .css file, enabling it and then adding things to it, you are quite likely forced to restart Obsidian for it to pick up the new additions/changes, otherwise the old (and empty) .css file will be cached.
If you want to use the iA Writer fonts on iPad without running into the bold issue, the best way to do it is probably to just Woff2-compress & base64-encode the variable fonts (rather than the static ones, which are larger) and include them as snippets.
Put simply—download the snippets from this gist and set the font-family to "iA Writer Quattro V" (or "iA Writer Mono V" etc). It’ll automatically detect and handle bold & italics. Only 136kb/variation which is super slim.
3 Likes
Hey!
I like that Theme, thanks!
One question: How can I set up the full-width? It does not work, I already switched off the strict line limitation, but it’s centered. Any solutions?
Thanks!
Christian
Are you talking about the “Readable line length” setting, which is in Settings under Editor > Display? Are you saying that you already turned that option off?
I am having the exact same issue as of today. I also first checked the readable line length but that did not solve it.
1 Like
In the Style Settings plugin, there is an option in the Typography section to change the readable line length.
3 Likes
Thanks!
Quattro defaults to bold because of a metadata bug in it. Until iA finally get around to fixing it, you can fix it yourself: https://github.com/iaolo/iA-Fonts/issues/50
1 Like
The function I miss especially after switching from IAW to Obsidian are the simple shortcuts to make headings. So: cmd+1 for H1, cmd+2 for H2, etc.
Does anyone maybe have an idea how I could replicate this, because I haven’t found a way or plugin to accomplish this yet.
If you have Alfred or Text Expander you can make your own Hotkey that would translate your input (cmd+1) to *, (cmd-2) to ** etc
I am having some problems setting up the theme in “editor” mode. The result is that the headings do remains quite small. Example (same note: right preview, left edit) :
In the picture the problem is quite visible, as the first line is heading 1 and the second is at heading 2, but no change appears in-between the two. No problem for the preview (right)
Any idea what I need to change? I followed up the procedure indicated in the first post
wpbloyd: I noticed the same issue (headings small in editor mode).
A workaround is to enable the legacy editor (Options > Editor > Use legacy editor), which trades Live Preview for “better compatibility with some older plugins, themes, and snippets.”
This is not ideal, but it points to the possibility of a solution.
1 Like
One thing I miss from iA Writer is having the top bar scroll out of the way. I posted a feature request for it:
I believe it should be pretty easy to do as a plugin, but I’m not (yet?) a plugin-maker.
A few snippets I use:
All headings are just normal-sized, bold text
I really missed this from Writer, it just didn’t look right otherwise.
body {
--h1-size: 1em;
--h2-size: 1em;
--h3-size: 1em;
--h4-size: 1em;
--h5-size: 1em;
--h6-size: 1em;
--h1-line-height: var(--line-height-normal);
--h2-line-height: var(--line-height-normal);
--h3-line-height: var(--line-height-normal);
--h4-line-height: var(--line-height-normal);
--h5-line-height: var(--line-height-normal);
--h6-line-height: var(--line-height-normal);
--h1-weight: 800;
--h2-weight: 800;
--h3-weight: 800;
--h4-weight: 800;
--h5-weight: 800;
--h6-weight: 800;
--h1-variant: normal;
--h2-variant: normal;
--h3-variant: normal;
--h4-variant: normal;
--h5-variant: normal;
--h6-variant: normal;
}
Slightly looser letter spacing
iA Writer applies 1px extra letter spacing at all text sizes, which I like the look of.
.cm-editor,
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
letter-spacing: 1px;
}
Normal-sized footnotes, code, etc.
For all other elements:
body {
--font-smallest: 1em;
--font-smaller: 1em;
--font-small: 1em;
}
Outdented heading hashes
iA Writer shows heading hashes (#) outside the main body, to the left. For me, this helps fix the visual flow a bit when I’m editing in Source Mode. This snippet isn’t perfect, however—it’ll overlap with the folding indicator at some text sizes.
.HyperMD-header .cm-formatting-header:first-of-type {
position: absolute;
transform: translateX(-100%);
}
Line width & height
iA Writer enforces 64 characters per line, with a maximum line width of 80% at large sizes. It also displays all lines at 1.8 height. You can mostly set these through Minimal Theme Settings, or use this snippet:
body {
--line-width: 64ch;
--line-width-wide: 64ch;
--line-height: 1.8;
--max-width: 80%;
}
To override Minimal Theme Settings, you can just change the selector to body.minimal-theme.obsidian-app (or something else more specific than body.minimal-theme). FWIW, in practice I found that 70ch actually let me fit 64 0s on a line; I assume that’s just a CSS thing.
Link colours
iA uses faint text for links. Specifically, the body text is in the normal text colour, and all the other formatting is in the faint colour. So:
body {
--link-external-color: var(--text-faint);
}
.cm-link:not(.cm-formatting):not(.cm-formatting-link) {
--link-external-color: var(--text-normal);
}
1 Like
FWIW the line height of 1.8 and the letter spacing only apply to iA Writer Duo. If you’re using iA Writer Quattro, the line height is 1.7 and the letter spacing isn’t needed.