Hey folks,
it might be because I only started using Joplin recently, but when I open a note my look first embraces the middle pane (the markdown) and I start reading the contents there, even though the preview pane is much better suited for reading a note.
I digged in every menu entry but could not find any way to swap the panes, so if this feature could be implemented it will be marvellous.
Thanks in advance!
You can hit this button in the top right to swap the layouts.
Alternatively you can use Ctrl/Cmd + L
or View > Toggle editor layout
.
You can choose which layouts should display via View > Layout button sequence
I think what plamkas wanted is to swap the positions of editor & viewer.
Pretty sure someone did it with CSS but couldn't find anything.
Oh I see, yeah that was me actually:
Somebody asked a question on Discord about whether the markdown editor and preview windows could swap position. I have no idea if this will break anything (as it isn't something I will ever use and have no real impetus to test it) but I managed to do it by adding the following to userchrome.css.
.rli-editor > div > div > div > div > div > div {
flex-direction: row-reverse !important;
}
Et voilà!
[image]
2 Likes
Wow, it worked!
It took me some time to find out what an userchrome.css is and how to find it, but it was wort it.
Thanks a lot!
I don't know if this is what you might have found already but there is a great post that summarises the basics of the css styling stuff:
Joplin has several internal stylesheets that control what Joplin looks like to the user. However two have been provided that allow the user to customise the app. Joplin uses its built-in styles but these two files can be used to override those styles. These files are just like the Cascading Style Sheets (CSS) used when creating web-sites. The files are called userchrome.css and userstyle.css.
userchrome.css allows styling of the app itself, including the Markdown Editor,
userstyle.css allows s…
1 Like
HeyJ0e
22 October 2024 19:50
7
Based on this I managed to fix the margin/border:
The files can be opened from Joplin: Tools->Options->General->Appearance->Show Advanced
Custom stylesheet for rendered Markdown
(userstyle.css):
.joplin-container-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
Custom stylesheet for Joplin-wide app styles
(userchrome.css):
.rli-editor > div > div > div > div:nth-child(2) > div > div:nth-child(2) {
flex-direction: row-reverse !important;
& > div:first-child {
border-left: 1px solid rgb(85, 85, 85) !important;
.CodeMirror-scroll {
padding-left: 10px;
}
}
& > div:nth-child(2) {
border: none !important;
}
}
After applying these, Joplin must be completely restarted with Ctrl+Q
or File->Quit
(not just closed).
I'm using the Dark
theme; the border color might be different for other themes.
muzak
22 October 2024 20:56
8
As in a similar solution of mine (which adds CSS so column
and column-reverse
work too), you can shorten the top-level userchrome.css
selector by using:
.rli-editor div[style^="position"]:nth-child(2)
1 Like
HeyJ0e
11 January 2025 21:18
9
I updated to version 3.2.8, and the previous solution didn't work, because the html structure changed. Here's an updated version (userchrome.css
):
.note-editor-viewer-row {
flex-direction: row-reverse !important;
& > .editor {
border-left: 1px solid rgb(85, 85, 85) !important;
padding-left: 10px;
.CodeMirror-scroll {
padding-left: 10px;
}
}
& > .viewer {
border: none !important;
}
}