[How To] Horizontal reading pane in mail app

As the mail app developers don’t want to add a horizontal reading pane to the app I have been using the custom css app in order to do so, I just wanted to share what I have managed so far for anyone else who is interested and get help finding/fixing any issues.

Currently I have:

  • The basic Horizontal layout
  • Added a resize to the message list so you can drag it up and down for simpler management of mail
  • Added a yellow highlight to The images have been blocked to protect your privacy notification
  • Added the color #ebebeb as the message header background to better separate panes
  • Added a thick border color #ebebeb to the top of the reply field to better separate it from the current message
  • Shrunk the load more messages scroll down area
  • Realigned the empty messages background


  1. Know what you are doing.
  2. Install the custom css app.
  3. Navigate to Admin -> Theming.
  4. Paste contents of this CSS file into the custom CSS text area.
  5. Save.


  • All or nothing - Applies to all users

Updated for Nextcloud 13

Tested with: Firefox 58.1 - Nextcloud 13

  • [x] - Fixed loading image position
  • [x] - Added highlight to The images have been blocked to protect your privacy.
  • [x] - Fixed empty folder background image position
  • [x] - Added resize to messages pane
  • [x] - Changed subfolder background color from gradient to solid
  • [x] - Added indicator line to subfolder Parent
  • [x] - Added indicator line and Bold text to open Parent Folder
  • [x] - Removed Forced Subfolders to new lines

Updated for Nextcloud 14. No additional features added.

Note: not backwards compatible - Nextcloud 13 users should still use this version

1 Like

No updates needed for Nextcloud 15. Currently working well

Updated for NC17

  • Fixed message list not filling screen with NC17
  • Fixed message composer not filling screen with NC17

Tested with: Firefox 70.0.1 (64-bit) - Nextcloud 17.0.0