#1

I like the default theme of obsidian, however the heading sizes are way too big (both in edit mode and preview mode). I mostly used headings for outlines and links, so I don’t actually need them to look huge.

Is there any way to just make them all the same size as level-4 heading?

Much appreciated.

1 Like
#2

Isn’t that CSS?

#3

Hey, I changed mine by changing heading font size in obsidian.css, I can send you a message if you need help figuring out how to do it.

1 Like
#4

Yeah, I was kind of hoping someone would give me the css (since I’m too lazy to figure it out).

1 Like
#5

I’ll take that, too, please! I’m not positive how to target it in both dark and light modes (if they’re different) and in preview mode …

1 Like
#6

since it may vary from theme to theme. I created a variation of my own theme with all headings same size as the rest of the text.

If anyone is interested in this version of my theme feel free to shoot me a message to https://santiyounger.com/contact/

Here’s what the theme looks like with all headings same size

reverie-2-2020-09-21-dark
reverie-2-2020-09-21-dark1920×1080 210 KB

@briansholis it also works on light mode and preview mode

#7

Thanks! I found it myself at just about the same time. I appreciate you following up, @santi.

1 Like
#8

Here is the CSS that should work across themes apart from Header 6 in preview which I can’t work out how to disable the colour change.

donwload
donwload1858×1080 76 KB

.markdown-preview-view h1 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h2 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h3 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h4 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h5 {
    font-size: 20px;
    line-height: 24px;
}

.markdown-preview-view h6 {
    font-size: 20px;
    line-height: 24px;
    color: --text-normal;
}

.cm-header-1 {
    font-size: 16pt;
}

.cm-header-2 {
    font-size: 16pt;
}

.cm-header-3 {
    font-size: 16pt;
}

.cm-header-4 {
    font-size: 16pt;
}

.cm-header-5 {
    font-size: 16pt;
}

.cm-header-6 {
    font-size: 16pt;
    color: --text-normal;
}
5 Likes
#9

thanks for that @NotBoolean , it’s much cleaner that how I was dealing with it for my theme!

A bit of a side note, I can see from your screenshot that you managed to modify the original obsidian.css

I was stuck unable to access the default obsidian code

“Where to find the original/default obsidian.css?”

Let me know if you can copy your full obsidan.css it would help a lot!
Thanks

#10

Everything you put in the obsidian.css will modify the default theme. So I don’t have access to the orignal css. I can view it to work out what’s going on using the techniques described in the Getting comfortable with Obsidian CSS post.

So if you put the code I posted above in a blank obsidian.css you will get what you see in my screenshots (bar a few extra css mods have that you can find on here).

Hope that helps.

1 Like
#11

got you, that makes sense! thanks for clearing that up helps a lot

#12

Thank you very much, it is soo much better now.

2 Likes
#13

Is there a way (or CSS code) to reduce all Headers size by a lot? I must start with h5 as the start right now because the h1 is so huge. I don’t know why the default setting must be like that

1 Like
#14

thx! I change header size base on gruvbox, now I’m satisfied!

/* .cm-header-4, */
.markdown-preview-section h4
{
    font-weight: 500 !important;
    font-size: 20px !important;
    color: var(--text-title-h4) !important;
}

.cm-header-4
{
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--text-title-h4) !important;
}