Customizing 5.0 user interface

edited July 11, 2017
This discussion was created from comments split from: Now available: Zotero 5.0.
  • Is it possible to customise the UI of the standalone application? One of the reasons I switched to Zotero and used the Firefox extension was the ability to apply custom CSS meaning I could work with a dark UI theme.
  • edited July 11, 2017
    You could try dragging a theme into the Appearance tab of the Zotero Add-ons pane, but I don't know if that would work — I can't recall anyone ever reporting doing that. I suspect you'd at least have to modify the theme package to allow zotero@chnm.gmu.edu as a targeted application, the same way that (legacy) extensions do.

    From a quick test, it doesn't seem like chrome/userChrome.css works, though you can play with that more. But the Zotero UI is XUL/HTML/CSS, so in theory anything can be customized. Just a question of how much effort is involved.

    (I would think a dark theme was more a job for the OS or a generic utility than something to do in individual applications, though.)
  • edited July 11, 2017
    I am stuck using Windows so do not have the luxury of using an OS that offers any real capability to theme it. Its why I always opt for applications that include themes or allow users to create their own themes. Time and effort involved doesn't bother me if it results in being able to have a dark theme as I can't stand the default blinding white of most applications.

    So far I have tried editing the em:targetApplication for Stylish (the extension I use to theme websites in Firefox) so that I can install it within Zotero standalone. However, whilst it installs the "Write New Style" button does not work and the "Install from URLs..." results in the add-on freezing after entering a URL.
  • edited July 11, 2017
    GTK3 theme applies cleanly to Zotero 5 on linux. It seems theoretically possible to install GTK themes on windows, but may be involved. Here's a relatively recent answer on doing so https://stackoverflow.com/questions/36464010/change-gtk3-look-on-windows
  • I might have started to make some progress. Managed to find the main CSS files after unzipping the zotero.jar files. After editing and re-zipping them I have managed to make minor changes. Looks like I will just need to work through them identifying which individual files the elements from my stylish theme are contained in. Customizing the tinymce files may proof more complicated to locate and edit but so far looks like it will be possible. If so the main issue going forward will be having to make the changes again after each update.

    Thanks fcheslack for the info. If I fail in editing the CSS I will try tinkering with GTK on Windows. I think, however, that there is a plain inheritance of the OS elements by Zotero rather than a reliance on GTK itself so it might not translate to Windows.
  • edited July 11, 2017
    Turned out to be a lot easier than anticipated. Only need to modify two files:

    \chrome\skin\default\zotero\overlay.css
    \resource\tinymce\skins\lightgray\content.min.css

    Will need to make a few other small changes to padding etc as there are white lines in couple of places - such as left edge of the Notes tab. Additionally, while text colour changes in the tags panel the background remains white. Overall though I've been able to recreate majority of what I had when using Firefox.

    Edit: To fix the tag box all that was needed was to comment out the #tags box background-color: -moz-field; line in the tagselector.css file.

    The end result (so far) - http://constellations.scot/wp-content/uploads/2017/07/ZoteroCustomCSS.png
  • Hey Alasdair, could you provide a guide for constructing the dark theme? It'd be wildly appreciated no doubt.
  • i don't remeber where i got this css (probably somewhere on userstyles.org)
    now you can find it over here:
    https://pastebin.com/BNyUf2xN

    i copied the script into userchrome.css in the zotero profile folder (created a new /chrome folder).

    the result is far from perfect - but a good start.
  • edited October 30, 2018
    Hey again - so I went to C:\Users\ME\AppData\Roaming\Zotero\Zotero\Profiles and made a chrome folder and put in a userchrome.css file with the pastebin. Restart zotero and then nothing. Any tips?
  • in windows usually the folder is:
    C:\Users\*YOU*\AppData\Roaming\Zotero\Zotero\Profiles\*blablabla*.default\Chrome\

    you should create the 'Chrome' folder in the profile folder itself
    and copy the userChrome.css into it.
  • I did not find an original Chrome folder nor did placing the userChrome.css file in the correct location induce any changes.

    Thanks so much for replying so promptly. If you have any other tips, please share but I don't really know what to ask to troubleshoot this further.
  • Create a new folder named 'Chrome' in the zotero profile folder
    (C:\Users\*YOU*\AppData\Roaming\Zotero\Zotero\Profiles\*blablabla*.default\)

    in the new Chrome folder create a new file named 'userChrome.css'.
    paste the css script into the 'userChrome.css' file.
    than restart zotero...

    this is the result:
    https://i.imgur.com/TQuNHKd.png
  • Ah - put it in the *blablabla*.default folder. It works and thank you so incredibly much!

    I had it in the profiles folder - misread how you meant 'you should create the 'Chrome' folder in the profile folder itself'.

  • I went through it and this is what I am seeing on Mac; totally crap.

    https://imgur.com/a/ppngS74

Sign In or Register to comment.