Zotero 7 - UI style - Can I resolve my idiosyncratic issues with it in CSS?

edited August 18, 2024
Firstly, huge congratulations on delivering a brand new version. It's been a huge effort and I am already deeply grateful for so many improvements, e.g. collections search!

That said, and very reluctantly - who wants to be a grouch? - maybe it's just a neuro-divergent thing, but I actually find aspects of the new UI distressing...

If I can fix it myself with custom CSS for example, I would be perfectly happy with that :)

If not, the full description is as follows...

To me, and I appreciate this is a skewed sample of 1, banding that does not align with item structure comes close to creating nausea - it's not only the conflict of structures (open an item with notes and the banding destroys the unity of the item presentation) but also the colour itself. And for me, trying to scan a banded list is like bumping down a staircase on my behind.

The font is also a problem: I can't tell what the issue is (despite being quite into typography), but although my Win 10 PC has optimised ClearType, there's something uneven, spidery & perceptibly - albeit barely - blocky that just makes it incredibly hard for me to look at UI text (PDF content is whatever it is). I have tried increasing font size but it doesn't resolve the problem. (Zotero appearance is inconsistent with other apps, across different monitors on different graphics systems.)

So, might I ask you to consider at some time when there are less pressing matters to deal with, giving consideration to allowing the user to choose

a) UI Font
b) UI colours (esp. backgrounds, to allow control of overall contrast)?

And, if I had one request above all - to be able to turn off banding on the items pane.

Issues with the UI must surely affect a very small number of people otherwise it wouldn't have been released like this, and you certainly don't have to make a special effort for one awkward brain, but if such changes were to fit in with other plans I would be delighted.

And thanks again for all the work to date; I love my Zotero.

UPDATE 1 :

PS I have tried custom css: created a chrome subfolder at C:\Users\me\AppData\Roaming\Zotero\Zotero\Profiles\randomstr.default\chrome

and created userChrome.css containing:

/* Remove banding in the Items pane */
treechildren::-moz-tree-row(odd) {
background-color: transparent !important;
}

treechildren::-moz-tree-row(even) {
background-color: transparent !important;
}
and checked that toolkit.legacyUserProfileCustomizations.stylesheets = True

but the banding is still there.

UPDATE 2

I managed to work out how to renable debugging via DevTools and inspected the divs, then tried better css like this, but still no effect.

zotero-items-tree .virtualized-table .row.odd:not(.selected) {
background-color: none !important;
}

zotero-items-tree .virtualized-table .row.even:not(.selected) {
background-color: none !important;
}

I am now officially out of ideas.
  • It helps if one uses the right selector...

    #zotero-items-tree... the # makes all the difference; and use transparent instead of none for background colour.
Sign In or Register to comment.