Change Congratulations page background

I try to change the background of the Congratulations page in Anki desktop to an image, but I don’t manage to find the place where the change need to take place (looked at ‘Anki-main/ts/congrats’ and ‘_aqt/data/pages’ and more).
Can you give me a clue for the right place?
Thank you

1 Like

Here is an example of an add-on that sets an image as the background of the congrats page.

  • Place the following three files in the root folder of your add-on:
__init__.py
background.css
background.png
  • __init__.py
from pathlib import Path
from string import Template

from aqt import mw
from aqt.gui_hooks import webview_did_inject_style_into_page
from aqt.webview import AnkiWebView

addon_root = Path(__file__).resolve().parent
css_path = f"/_addons/{addon_root.name}/background.css"
js = Template(
    """
{
    const link = document.createElement("link");
    link.href = "${css_path}";
    link.rel = "stylesheet";
    document.head.appendChild(link);
}
"""
).substitute(css_path=css_path)


def on_webview_did_inject_style_into_page(webview: AnkiWebView) -> None:
    if webview.page().url().path().endswith("congrats.html"):
        webview.eval(js)


mw.addonManager.setWebExports(__name__, r".+\.(css|png)")
webview_did_inject_style_into_page.append(on_webview_did_inject_style_into_page)

  • background.css
body {
    background: url("background.png");
    background-size: cover;
}
6 Likes

Thank you!!
I will give it a go