Custom CSS rules for E-Viewer's dictionary pages

[simurq]

Good evening and peace to everybody!

I know that MobileRead provides individual sub-fora with custom CSS rules and recipes both for Viewer and Calibre. Yet my request is a bit of a different kind.

I regularly make CSS rules for various e-dictionaries powering one of my favourite browser apps, Lumetrium Definer. The main objective is to declutter the window view and focus on word and phrase definitions rather than ad blocking (which is a different beast on its own).

I'm not a professional programmer, rather a happy, multi-lingual and CSS-savvy E-Viewer user. So would it be possible for me to apply / inject some CSS rules to the program's "Lookup/Search selected word [L]" section, for in its current form, dictionary webpages contain a lot of unnecessary divs and other HTML elements cluttering the view. I understand that it's not E-Viewer's fault per se, as it just provides a facility to link to external dictionary pages. Nevertheless, it makes working with the program unpleasant.

I mean if there is an option I'm unaware of, I'll be happy to experiment with it on my own.

Thank you!

Rustam

[kovidgoyal]

There is already code to cleanup google in the lookup panel. For other sites there isnt specific code, but you are welcome to contribute some. Basically write your code in lookup.js which you can find in the resources folder in the calibre installation. Override as described in: https://manual.calibre-ebook.com/cus...ates-et-cetera

[simurq]

Thank you, Kovid! Glad to hear it is possible, you made my day!

Analyzing lookup.js, I understand the rationale behind the code. That's indeed what I need. For overrides though, do I need to create a JavaScript file similar to `lookup.js` per dictionary? I've already created a resources directory under ~/.config/calibre (using Linux) but not sure what to do next. I have several dictionary sources I'd like to apply my CSS rules to.

EDIT 1: I'll experiment with extending the existing JS code to accommodate CSS rules for another dictionary resource in the same file. And will report back...

EDIT 2: I think I'm doing something wrong here, as the code fails to hide any HTML elements: https://pastebin.com/4LQVgcLH

Rustam

[kovidgoyal]

No there is one file loaded for all dictoinaries look at the bottom of the existing file you will see where it checks for google and applies its fixes only if the site being visited is google.

[simurq]

Yes, I figured that part too, thank you anyway! Yet any attempt to extend your existing code for dictionary.com fails (for now): https://pastebin.com/4LQVgcLH The style you see in the code is the same one used in the Firefox extension.

[kovidgoyal]

You can right click to open the inspector in the viewer than any console.log() calls from that script will show up there in the console tab.

[simurq]

I think the problem is Calibre doesn't load the modified JS file at all. As I said above, I placed lookup.js into ~/.config/calibre/resources. I even placed these commands at the very top of the file to test it:

alert("Custom lookup.js loaded");
console.log("=== CUSTOM LOOKUP.JS LOADED ===");
console.log("Current URL:", location.href);
console.log("Hostname:", location.hostname);
console.log("Pathname:", location.pathname);

But even the simplest alert window doesn't show up...

[kovidgoyal]

Ah yes this one is not allowed to be overwritten there you go:
https://github.com/kovidgoyal/calibr...ab42cdcde9198e