How to swap the markdown and preview pane?

[plamkas]

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!

[Daeraxa]

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

[roman_r_m]

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.

[Daeraxa]

Oh I see, yeah that was me actually:

Share your CSS

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]

[plamkas]

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!

[Daeraxa]

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:

Introduction to customising Joplin (userchrome.css & userstyle.css)

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…

[HeyJ0e]

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]

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)

[HeyJ0e]

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