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?
  • @johnmy this is obviously coming very late, but of course, anyone can feel free to use this
  • Million thanks
  • I have also used customizations in note.css to change the way notes look, for example changing blockquotes from having a solid line on the left to having a large blue quotation mark at the start of the quote by using this code in note.css:

    blockquote p:first-child::before {content: "‘‘"; font: 3em/0.1 georgia; letter-spacing: -4px; color: #7092be; padding-right: 10px; margin-left: -26px; vertical-align: -0.4em;}

    It's great fun!

    However, keep in mind that note.css will no longer work in the next version of Zotero (at least it doesn't work in the current beta versions) which uses a new note editor.
  • @claude70 Could you please paste the full code?
  • The solid line on the left to having a large blue quotation mark could not be found.
  • edited October 29, 2021
    Sorry, that was a bit abbreviated. The full code I add to the note.css is as follows:

    blockquote {
    margin-left: 1.2em;
    border-left: 0px;
    }
    blockquote p:first-child::before {
    content: "‘‘";
    font: 3em/0.1 georgia;
    letter-spacing: -4px;
    color: #7092be;
    padding-right: 10px;
    margin-left: -26px;
    vertical-align: -0.4em;
    }

    This affects text in a note when you make it a quotation by clicking on the double-quote button (the Blockquote button) on the note's menu bar. In fbcx’s version, the quote will have a gray left-border 3px wide, in my version you should see instead a blue (#7092be) double-quote mark (content: "“" - that's a curly quote inside 2 straight quotes) to the left (margin-left: -26px) of the (indented by 1.2em) text.

    (The first-child means that if you select multiple paragraphs of text, and click the "Blockquote" button on the menu bar, you'll only get one floating quotation mark for the whole selection, not one for each paragraph. I prefer it that way as it lets me know its one multi-paragraph quotation and not multiple separate quotations.)

    But, as I say, it won't work for much longer! This kind of customization no longer works in the new beta, and presumably won't in v6.
  • Got it, thanks.
  • Thanks. This is a great improvement. +1 for inclusion by default.
  • @fbcx
    Thank you for this script! I linked to this on a GitHub issue discussion related to a script for a Zotero dark theme.

    https://github.com/Rosmaninho/Zotero-Dark-Theme/issues/17#issuecomment-976438483 GitHub

    I'm going to add an edited version of your script there, fully crediting you
  • If anyone can find the #tag to change this in a userChrome.css I'll add to my dark theme css.
Sign In or Register to comment.