How to swap the markdown and preview pane?

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.
image

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:

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:

1 Like

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.

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

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;
  }
}