The style in userchrome.css stopped working as it should

Support
1

Operating system

Windows

Joplin version

3.2.1

What issue do you have?

Hello! I used the code in userchrome.css to:

  • editor and viewer swapped
  • viewer was bigger than editor

Code:
'''
.rli-editor > div > div > div > div > div > div > div:nth-child(1) {
flex: 1 0 0% !important;
}
.rli-editor > div > div > div > div > div > div > div:nth-child(2) {
flex: 2.2 1 0% !important;
border-left: none !important;
}
.editor-toolbar {
max-width: 100% !important;
}
.rli-editor > div > div > div > div > div > div {
flex-direction: row-reverse !important;
}
'''

But after the update it doesn't work. What should I fix in the code to make it work?

2

Okay, I figured it out myself. Maybe it will be useful to someone:

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(1) {
flex: 1 0 0% !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) {
flex: 2.2 1 0% !important;
border-left: none !important;
}

#react-root > div.profile-default > div > div.resizableLayoutItem.rli-root > div.resizableLayoutItem.rli-editor > div > div > div > div > div:nth-child(2) > div > div:nth-child(2) {
    flex-direction: row-reverse !important;
}

is
is1920×1080 178 KB

1 Like
3

I'm linking to a related pull request that should make the editor/viewer easier to style:

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.