Theme header css overwritten by the app?

Things I have tried

I added !important to all the .markdown-preview-view h* and .cm-header-* so that they take priority. Without those, I found the font-size was overwritten by app.css line 2289.

.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  font-size: inherit !important;
}

Is this a recent change since my theme was working before? Also is there a way to not manually set !important in the theme but still let the theme’s style take priority?

1 Like

u should update ur snippet as obsidian now uses .HyperMD-header-x classes for defining header <div>s in editing view. the .cm-header-x only changes at <span> level. use this snippet template to get what u want without putting in !important. css prioritise those with higher specificity, so add more upper divs classes to gain priority. but the below snippet works to override the default theme.

.cm-s-obsidian .HyperMD-header-1,
.cm-s-obsidian .HyperMD-header-2,
.cm-s-obsidian .HyperMD-header-3 {
    font-size: ... ;
}

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.