Set background color for a custom button in Editor

Anki Development
1

My addon adds a custom button in the Editor which displays size of current note:
image
(It’s a button because it shows details when clicked)

Additionally, I want to indicate if note is huge by button background color (e.g. green/yellow/red).
I changed the background color of the button invoking
document.getElementById('size_button').style.backgroundColor='red'
by editor.web.eval():
image

But when the mouse pointer hovers over the button, it changes its background color to default:
image

I can’t find a way how to change its background color when the mouse is over the button.

I tried adding mouseover, mouseenter, mousemove listeners. And removing all listeners by replacing the button with a clone. Without any success.

Can you give a hint?
Thanks!

2

Try doing this CSS-side using :hover. You need to inject the CSS somehow. The webview_will_set_content hook should help.

3 Likes
3

If somebody needs it.

Links to sources with working solution (based on the previous @abdo’s post):

  1. Add hook webview_will_set_content: link
  2. Configuring web exports: link. See also Anki docs Managing External Resources in Webviews.
  3. CSS style which disables button background changing: link
  4. Changing button background color in Python: link
2 Likes
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.