Help changing h1 header size/weight

[darkcaldera]

I’m trying to alter the size/weight of headers in Live Preview and Viewing modes. I’m using the Default theme.

My knowledge of CSS is pretty much copy-pasting from the internet and trial and error, sometimes it works, sometimes it doesn’t! If anyone can see what I’m missing here that would be fab.

Things I have tried

I have added and lightly modified css examples from the forum (e.g. Need help to change the size of headings, in default theme, in live preview, using CSS snippet and Default theme - changing Headers size) to try and get the header appearances to change. Loaded snippets into Obsidian. Current snippet in use:

.cm-header-1, .HyperMD-header-1, .markdown-preview-view h1, h1 {
  font-size: 1.5em !important;
  font-weight: 400 !important;
}

.cm-header-2, .markdown-preview-view h2 {
  font-size: 1.4em !important;
  font-weight: 400;
}

.cm-header-3, .markdown-preview-view h3 {
  font-size: 1.3em !important;
  font-weight: 400;
}

.cm-header-4, .markdown-preview-view h4 {
  font-size: 1.2em !important;
  font-weight: 400;
}

.cm-header-5, .markdown-preview-view h5 {
  font-size: 1.1em !important;
  font-weight: 400;
}

.cm-header-6, .markdown-preview-view h6 {
  font-size: 1em !important;
  color: #797972;
  font-weight: 400;
}

My problem: Font sizes aren’t being affected at all, even with !important added. Header 1 is completely unaffected, even with additional selectors added. Which seems strange to me, because I can alter the font weight and colour of the other headers using the above, that is working.

Any pointers appreciated!

[rigmarole]

This is an old style of theming. If you read the release notes, there was a pretty major change to how themes work. There is a new css variable system too, which makes it much easier to customize things.

Kepano wrote some examples here: https://www.reddit.com/r/ObsidianMD/comments/y60yq5/comment/isowh0y/?utm_source=reddit&utm_medium=web2x&context=3

There is a theme migration guide: 1.0 Theme Migration Guide

Here is a video showing the variables (I haven’t watched it, I just saw it linked on Discord.) How To Work with Obsidian 1.0's new CSS Variables - YouTube

[darkcaldera]

Thank you! I gloss over a lot of the announcements as I assume I won’t really understand them. Thanks for the more specific links! Will investigate this see if I can get it sorted.

[anon63144152]

Does this work for you?

* body {
  --h1-size: 1.5em;
  --h2-size: 1.4em;
  --h3-size: 1.3em;
  --h4-size: 1.2em;
  --h5-size: 1.1em;
  --h6-size: 1em;
  --h1-weight: 400;
  --h2-weight: 400;
  --h3-weight: 400;
  --h4-weight: 400;
  --h5-weight: 400;
  --h6-weight: 400;
}

[darkcaldera]

Thank you to both of you!

I used @anon63144152’s code to start with and was able to find a couple of other selectors to tweak things through @rigmarole’s links. What I now have is this, if anyone is interested:

* body {
    --inline-title-size: 2em;
    --inline-title-weight: 600;
    --h1-size: 1.8em;
    --h2-size: 1.6em;
    --h3-size: 1.4em;
    --h4-size: 1.3em;
    --h5-size: 1.2em;
    --h6-size: 1.1em;
    --h1-weight: 400;
    --h2-weight: 400;
    --h3-weight: 400;
    --h4-weight: 400;
    --h5-weight: 400;
    --h6-weight: 400;
    --h6-color: #797972;
  }

Very happy with this! I’m no longer tempted to skip over h1 usage to have things look (to me) like the priority they really are. Excellent.

It’s also much easier to read this way, so kudos to the Obsidian team for simplifying the css.