\
**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:** 6\
**Page:** 1
**Author:**  [@Maeshara](https://forums.ankiweb.net/u/Maeshara)\
**Post date:** [May 9, 2021, 11:34pm UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/1 "2021-05-09T23:34:33Z")
Hi everyone,
I started to seriously understand Anki’s system, and I’m at the point where I’m asking if it’s possible to change the default CSS template of all fields in editing mode.
I know how to change the styling section in note type for reviewing mode but here I want to modify text when I’m editing cards, since for the moment I mostly use Anki like a database rather than learning cards so I don’t use reviewing mode and prefer to see the fields in the browser.
Actually, when I’m editing a field, I have to open the HTML window to add some CSS styles (for example to adjust unordered list). It works but I have to copy/paste the code for every field, so it’s little annoying…
Any idea ?
---
**Author:**  [@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")
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).
---
**Author:**  [@Maeshara](https://forums.ankiweb.net/u/Maeshara)\
**Post date:** [May 11, 2021, 3:28pm UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/3 "2021-05-11T15:28:10Z")
Hi kleinerpirat,
First of all, thanks you for your answer. It looks like you wanted to do the same thing as me. I think you understood my question, but for my part I have a little trouble following you.
I use the “Mini Format Pack” add-on, but I’m not happy with how the lists look, so for every field, I use the HTML window to add :
ul { list-style: none; line-height: 130%; margin-top: 0em; margin-bottom: 0em; padding-left: 0; } ul ul { padding-left: 1.8em; } ul li:before { content: '\2012'; margin: 0.3em; } ul ul li:before { content: '\2022'; margin: 0.3em; } ul ul ul li:before { content: '\2B9A'; margin: 0.3em; }
If I understood correctly, I’ve to use the load function as explained in the other post, but I don’t know how to do it. I would be very kind of you if you help me a little… 😓
---
**Author:**  [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [May 11, 2021, 6:33pm UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/4 "2021-05-11T18:33:20Z")
> [@Maeshara](#):
>
> I would be very kind of you if you help me a little… 😓
Sure thing, I wrote an add-on for you: [https://ankiweb.net/shared/info/181103283](https://ankiweb.net/shared/info/181103283)
Simply navigate to the add-on folder as described on the add-on page and edit the file “field.css” to your heart’s content. Should I ever update the add-on, make sure to back up your CSS files before accepting the update.
I would be happy to know if it works for you!
---
**Author:**  [@Maeshara](https://forums.ankiweb.net/u/Maeshara)\
**Post date:** [May 11, 2021, 6:53pm UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/5 "2021-05-11T18:53:51Z")
At first glance, it looks like it works ! I don’t know how to thank you, I was looking for a solution for hours, and there you are !
---
**Author:**  [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [April 4, 2022, 5:48am UTC](https://forums.ankiweb.net/t/change-default-html-css-template-in-editing-mode/9902/6 "2022-04-04T05:48:59Z")
Split this topic on April 4, 2022, 5:48am UTC
23 posts were split to a new topic: [CSS Injector [Official Support]](https://forums.ankiweb.net/t/css-injector-official-support/18799)