Make note editor beautiful

fbcx
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 */
  • alibas
    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.
  • tre2017
    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.
  • mark
    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.
  • kithairon
    Thanks for tuning this – my notes look prettier…
  • jswab
    Yes @fbcx this is amazing! Any idea if it would be possible to add in spellcheck and if it would be easy to do?
  • malev
    Thanks ! Is there a way to add a slight grey colour for the background?
  • fbcx
    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;
    }

    .
    .
    .
  • c-bg
    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.
  • malev
    Thanks !
  • pratikvn
    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.
  • l0o0
    Thanks for your work @fbcx , my notes will be grateful for this new appearance.
  • johnmy
    edited February 4, 2021
    @fbcx Very pretty. Would you mind if I use your code in my git repository?
  • fbcx
    @johnmy this is obviously coming very late, but of course, anyone can feel free to use this
  • johnmy
    Million thanks
  • claude70
    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.
  • johnmy
    @claude70 Could you please paste the full code?
  • johnmy
    The solid line on the left to having a large blue quotation mark could not be found.
  • claude70
    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.
  • johnmy
    Got it， thanks.
  • kdb_research
    Thanks. This is a great improvement. +1 for inclusion by default.
  • zazench
    @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
  • Pedro Rosmaninho
    If anyone can find the #tag to change this in a userChrome.css I'll add to my dark theme css.
  • look95
    Hi there! Does it still work now (for Zotero 6.0.4)?
  • Pedro Rosmaninho
    No.
  • Shrilaraune
    edited April 20, 2022
    I literally spent days trying to find a workflow that allowed me to create my Zotero notes elsewhere so that I could make my notes prettier + more functional. Devs, any chance you'll be returning this capability in an update? The current note aesthetics make it a bit hard to use.

    E.g. I'd love edit how quotes look. Even just a simple shift in background color would be huge

    Update: Could this be achieved through the note templates?
  • dstillman
    We've restored support for extensions.zotero.note.css in the latest Zotero beta. note.fontFamily also works. Font size is customizable from the View menu.

    You can build and run the note editor source to see the current DOM. We of course can make no guarantee that the DOM won't change at any time.

    Various things have improved in the new note editor, so rules you applied in Zotero 5 might no longer be appropriate.

    If there are changes you'd like to see in the default editor styling, please start a new thread and let us know.
  • dstillman
    Zotero 6.0.5 is out now with the restored note.css support.
  • mperrot
    Dear all,

    I'm trying to use a dark them (ie dark background, light text) for my note editor.
    As mentioned in this thread, it used to work in the v5 by editing 'extensions.zotero.note.css'.
    As a minimal exemple, I just tried

    body {background-color: #52527a;}

    Contrary to last comment of @dstillman , no change is occurring anymore when editing the .css on the current version I'm using (6.0.13).

    I also tried the global dark themes of https://github.com/Rosmaninho/Zotero-Dark-Theme and https://github.com/tefkah/zotero-night which work well for the rest of Zotero, but have no effect on the note editor...

    Am I making something wrong, any advice ?

    My tired eyes thank you in advance !




  • mperrot
    edited October 5, 2022
    In version 6.0.14, and also with the new version 6.0.15, it seems that the background-color option is working again.
    However the "color" option in css to change text color is still ineffective...

    For example,

    body { color: #ffffff ; background-color: #000000;}

    will give a black background but does not affect the text color, which is still dark.

    EDIT: in fact, the "color: #ffffff" option is putting white text for 'Math block' and 'Monospaced' formatting, but not for the other formatting options.
Sign In or Register to comment.