# Change default HTML/CSS template in editing mode

**URL:** <https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902>\
**Category:** Suggestions\
**Created:** [May 9, 2021, 11:34pm UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902 "2021-05-09T23:34:33Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [May 10, 2021, 7:10am UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/2 "2021-05-10T07:10:24Z")

</div>

If you only want to change the appearance of certain words/sentences (e.g. highlighting), you could use the [Custom Styles](https://ankiweb.net/shared/info/1899278645) add-on.

If you want to change the styling of the editor itself, there’s the add-on [Customize Editor Stylesheet](https://ankiweb.net/shared/info/1215991469), but it won’t allow you to edit _everything_ because the field’s default styles are protected within a shadow-DOM. You can see this in action when you inspect fields with [AnkiWebView Inspector](https://ankiweb.net/shared/info/31746032).

> **About AnkiWebView Inspector**
>
> This add-on is really helpful for any kind of front-end tweaks or complex card templates.  
> I highly recommend you analyze the structure of the editor page with that inspector, then you’ll know which classes to style and which CSS-variables to use.

To fully control the look of elements inside Anki’s editor fields, you need to inject your CSS into the shadow-root with your own add-on:  
(The Custom Styles add-on does the same thing, but you can only change the injected stylesheet through the add-on interface, which is a little bit limited.)

> [@Access to Dom element in EditorField](https://forums.ankiweb.net/t/access-to-dom-element-in-editorfield/8782/8):
>
> @kleinerpirat There’s [this PR](https://github.com/ankitects/anki/pull/1049) which would certainly help you out. Besides that, you can only access it with add-ons. A somewhat minimal example for the Python part would be load\_collapsible\_icon\_js in [Collapsible Fields](https://github.com/hgiesel/anki_collapsible_fields/blob/master/src/webview.py). Of course, you’d only need the CSS file. A minimal example for the JS/CSS would be [the load function here](https://github.com/hgiesel/anki_persistent_editor/blob/master/web/editcurrent.js#L66) in load. You’d need to adjust textContent (or load it through a link element with href).

---

_[View the full topic](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902)._
