Make note editor beautiful

edited December 30, 2020
I'd like to take notes inside Zotero as part of my research process.

In order to make this a habit, I have to enjoy doing it. A major partof this, for me, is having a beautiful tool.

Ideally, I'd be able to edit the notes in an external app. Alas, that option's not comfortably available right now (see https://forums.zotero.org/discussion/50140/customize-note-editor)

So I adjusted the CSS.
Here's a screenshot of the editor I created: https://i.imgur.com/YLLnHao.png
Alternative, with system font enabled: https://i.imgur.com/J2rJvfd.png
It's not gonna win a design award, but this moves the editor from "clunky-Windows-XP-feel" to "nice and comfortable" for me. Makes me actually want to spend time in it.

Features:
- Line-width in editor adjusted for comfortable reading. Width changes proportionally to selected font size
- Editor centered in window, creates nice breathing room around text
- Indents of paragraphs, blockquotes and lists all nicely aligned
- Headings normalized
- custom font, if you like

To achieve this:
1. go to Preferences → Advanced → Config Editor
2. type in 'note'
3. double-click 'extensions.zotero.note.css'
4. paste the CSS (see bottom of this post) into the text field
5. click 'OK'

if you want to adjust the font:
6. double-click 'extensions.zotero.note.FontFamily'
7. add your prefered font (name must match perfectly) to the front of the list
8. click 'OK'

9. go to View → Note Font Size to adjust your font size
10. to see the changes, restart Zotero. Enjoy the beauty. Breathe. You deserve it.

I use the 'iA Writer Duo' font, which is available here for free: https://ia.net/downloads#fonts

I disabled spell check using this trick, because it underlined every non-english word: https://forums.zotero.org/discussion/19771/workaround-to-disable-spell-checker/p1

Would you change anything?
What methods have you found that make editing notes more comfortable or beautiful?

/* CSS to make editor beautiful */

body {
max-width: 35em;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}

h1 {
font-size: 1.6em;
padding-bottom: none;
}

h2 {
font-size: 1.4em;
font-weight: bold;
padding-bottom: none;
border-bottom: none;
}

h3 {
font-size: 1.2em;
}

p {
text-indent: 1.75em;
}

ul,
ol {
padding-left: 1.75em;
}

blockquote {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding-left: 1.55em;
border-left: 3px solid lightgrey;
color: grey;
}
blockquote p {
text-indent: 0;
}

/* end of CSS */
  • It is a shame that we cannot use an external editor to edit our notes.

    Not only that it is not pretty but also is limiting. Among other things we should be able to add links to our attached pdf's and our other notes as well.

    In the meantime, your solution to make it at least prettier is most welcome.
  • This is a god-sent guide, now I had just decided to take more notes in Zotero. Thanks!

    I am guessing it would be non-trivial to allow external editors because of the Parent element, Related and Tags fields at the bottom of notes.
  • edited January 4, 2021
    This is amazing @fbcx, thank you. I wasn't aware we could customize the CSS like this, and it makes a huge difference indeed for the experience of writing notes.
  • Thanks for tuning this – my notes look prettier…
  • Yes @fbcx this is amazing! Any idea if it would be possible to add in spellcheck and if it would be easy to do?
  • Thanks ! Is there a way to add a slight grey colour for the background?
  • edited January 19, 2021
    @malev Yeah sure, just add 'background-color: #e5e5e5;' (or any hex color code) to the 'body' element. Google 'hex color picker' to help you find the perfect shade of grey.

    The code would look like this:

    /* CSS to make editor beautiful */

    body {
    max-width: 35em;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #e5e5e5;
    }

    .
    .
    .
  • Thanks much for this neat contribution, I like it a lot.
    If other people come here looking for (more) ways to open notes with external editors:
    In order to create notes in other editors, I simply use links to files.
    Detailed recipe:
    In the toolbar, click the arrow next to the attachment symbol and select "Attach Link to File". Select a file (e.g. an empty .odt file). Now, if I double-click on the new attached link, the system's default editor for that format opens and I can edit the notes. For instance, in the case of .odt files, LibreOffice opens the file.
  • In addition to what @c-bg said, if for example, you want to have the notes files synced, you can also have that in a git repository/dropbox/ some cloud offering, you can make sure that Zotero stores only the relative file links by going to Preferences->Advanced->Files and Folders and setting your base directory.

    This means that you sync your notes separately on different computers, but if you keep the same folder structure, you can use zotero to see the correct file.
  • Thanks for your work @fbcx , my notes will be grateful for this new appearance.
  • edited February 4, 2021
    @fbcx Very pretty. Would you mind if I use your code in my git repository?
Sign In or Register to comment.