See attachment below. Headers 1-3 need to be larger so that Headers 4-6 don't all look identical.
Thanks!
-joe
From looking at their styles h4-h6 are all the same.
You can personalise how they display in the viewer pane by adding some entries to your userstyle.css file. Just pick the font sizes that suit your needs.
h1 {font-size: 30px;}
h2 {font-size: 25px;}
h3 {font-size: 20px;}
h4 {font-size: 16px;}
h5 {font-size: 12px;}
h6 {font-size: 8px;}
2 Likes
I've opened and edited that file via the Joplin > Settings > Appearance > Advanced menu, but I don't see the size updating... ?
-j
Have you quit and restarted Joplin.?
Yes. I think the CSS property I need to change (found using Devel tools view) is:
.cm-header-1 {font-size: 75px;}
...
.cm-header-5 {font-size: 55px;}
But, I don't know the right syntax. Thanks!
-joe
Do you want to change the markdown editor (codemirror) on the left side, or the viewer the right side?
Left side is userchrome.css and right side is userstyle.css. Read the link "You can personalise how they display", above.
I've tried changing both files and see no results when relaunching Joplin (using the CSS you sent me). I don't know CSS well enough to add the:
.cm-header-1 {font-size: 75px;}
...
.cm-header-5 {font-size: 55px;}
formatting myself... Do you? Thanks for all your advice!
-joe
Do you want to change the markdown editor headers on the left side, or the viewer headers on the right side?
Probably because as there are six headers you would either:
- Have to start with a VERY large font to have six noticably different sizes with the 6th still being at least as large as the body text, or
- Have a VERY small sixth header which would be much smaller than the body text (Like my example).
The main difference with these header types is that when used they will appear at different indented depths in a table of contents.
Both ideally, but I generally keep it in the view where I just see the Markdown, with formatting (using the Rich Markdown plugin)
Thanks again!
-joe
I have seen the massive type sizes you were experimenting with so, for the fun of it, I used those sizes.
I do not use the Rich-Markdown plugin and so it may affect the css of the Markdown editor. However in "vanilla" Joplin:
userchrome.css
.cm-header-1 {font-size: 75px !important;}
.cm-header-2 {font-size: 70px !important;}
.cm-header-3 {font-size: 65px !important;}
.cm-header-4 {font-size: 60px !important;}
.cm-header-5 {font-size: 55px !important;}
.cm-header-6 {font-size: 50px !important;}
I think there is an editor stylesheet in Joplin that loads after userchrome.css and therefore resets the changes, so !important is needed to make the settings "stick"
userstyle.css
h1 {font-size: 75px;}
h2 {font-size: 70px;}
h3 {font-size: 65px;}
h4 {font-size: 60px;}
h5 {font-size: 55px;}
h6 {font-size: 50px;}
Creates this monstrosity!
This image really needs to clicked on to appreciate the the full impact of these style changes.
"Attack of the large headers" 
These settings produced the results I wanted... The large numbers were to make sure I noticed when it finally changed, but the h1 h2 settings don't do anything for me, only the .cm-header setting, fyi. Changing the userstyle.css doesn't do anything for me, but I haven't tested without that plugin yet...
.cm-header-1 {font-size: 45px !important;}
.cm-header-2 {font-size: 40px !important;}
.cm-header-3 {font-size: 35px !important;}
.cm-header-4 {font-size: 30px !important;}
.cm-header-5 {font-size: 25px !important;}
.cm-header-6 {font-size: 20px !important;}
Thank you again so much for all your help!!
Cheers,
-joe
That's odd
The Rich Markdown plugin will not have any impact on the viewer which is controlled by userstyle.css. I have the two style sheets in my Joplin settings directory and they both work.
Anyway, glad the one you wanted to change works!!
Thanks to @jbourgui for asking and to @dpoulton for answering!
I leveraged @dpoulton 's answer, but tweaked the numbers to something that works well for me. I started at 35px for h1 and go down by 5's as well to 10px for h6. I noticed that Joplin defaults to a seemingly very close size difference between h1 and h2 and had a hard time discerning between them other than the fact that h1 is followed with a horizontal break line.
May I ask how to make the line under the first header disappear?
h1 {
border: none;
}
1 Like
Thank you!