Anki add-on: Custom Styles (font color, background colour, classes)

If you find a bug let me know in the official anki support forum . On Anki 2.1.55+ this add-on only supports Anki versions built with pyqt6! On Anki 2.1.55+ css for classes applied by this add-on is not shown in the editor. The styling is only visible in the reviewer. If you also want to have them in the editor you also need the add-on CSS Injector . Copy the content of the file "_editor_button_styles.css" from your media folder into the file "field.css" in the css injector add-on or use [this modification]( https://github.com/ijgnd/anki__editor__apply__font_color__background_color__custom_class__custom_style/issues/60#issuecomment-1445023554 ). This description only refers to the add-on for the Anki versions 2.1.60 (which was released in 2023-02) or later. Older versions of this add-on for older anki versions had more limitations/quirks because in older Anki versions the editor was more limited. Older versions of this add-on are no longer supported. If you use an iphone/ipad, see the section "updating the styling on AnkiMobile" below. This add-on offers more styling options for the Anki editor: You can quickly set different font colors, background colors, font sizes or apply custom classes or styles. You can use shortcuts, buttons from the top of the editor or the context menu. If you want to use a custom style but don't know css there are online sites that make creating styles easier. A google search lead to sites like this one or this one . # Functions This add-on offers the following options: 1. directly changing the font color by changing the html color attribute . This is also built into Anki but switching between different colors is time consuming. You can set different font colors with the "Quick Colour Changing" add-on. This add-on additionally gives you the option to have multiple dedicated buttons or menu entries for font colors you often use. But my add-on might be easier to use. 2. you can set the background color directly using the html background-color attribute . The option to change the background color is also available in the add-on "Mini Format Pack". But switching between different colors is time consuming. 3. you can style text with the html style attribute . 4. you can set css for custom classes and apply these classes to the text selected using the inline " span " tag or using the " div " tag which is a block element which means you'll have a line-break before and after it. Some styling only makes sense when it's applied to a div. 5. There's are easy to use dialogs/options to change the font color, the background color, and the font size by using css and html classes. This has some advantages and some drawabacks: html classes are roughly similar to "styles" that you can apply in Word or LibreOffice. When you use html classes you can later change the color for all the fonts you've highlighted at the same time and you can also set different colors for night mode. 6. You can wrap the text selected with custom text snippets, see below. # Text Wrapping You can wrap selected text with fixed text snippets, e.g. you can set up a shortcut with "before" set to "Art ", and "after" set to " TFEU". This lets you wrap, e.g., "2" in the Editor, and it will become "Art 2 TFEU" (which is Article 2 of the Treaty on the Functioning of the European Union). This is useful for any kind of repetitive typing. the text wrapping function is useful for hgiesel's Closet For Anki . Text Wrapping also supports counters that take the current field into account. The best way to show this is with an example: - Having "before" set to "{{c %i ::", and "after" to "}}", makes a text wrapper that mimics the built-in Ctrl-Shift-C cloze shortcut (think of %i as increment). - Having "before" set to "{{c %t ::", and "after" to "}}", makes a text wrapper that mimics the built-in Ctrl-Alt-Shift-C cloze shortcut (think of %t as top). This is useful if you want to set the cloze shortcut to a custom key, or any add-on that mimics the built-in clozes in some way, see e.g. here . If you want a naked percentage sign, use "%%". # Setup Each note type MUST have the string @import url("_editor_button_styles.css"); at the top(!) of the "Styling" section in the "Card Types for ..." window. I've had many "bug" reports where people didn't do this so this add-on offers to automatically adjust all notes types. # updating the styling on AnkiMobile (In 2021) changes to your config are only applied in AnkiMobile on my iphone after I force close and reopen Ankimobile. With "force close" I mean: double click the home button, then swipe up on the app's preview. # bugs, errors, feedback Please do not use reviews for bug reports or support requests. I don't get notified of your reviews, and properly troubleshooting an issue through them is nearly impossible (formatting is limited and I can't reply multiple times). If you find a bug let me know in the official anki support forum . # Alternatives If you just want to sometimes change the text color or background color this add-on might be overkill. Or maybe you find the config too complicated. Or maybe you run into an error with this add-on. Then you could have a look at these options: - The option to change the background color is available in the Mini Format Pack . But switching between different colors is time consuming. - Anki has a function to change the font color. But switching between different colors is time consuming. - There's the add-on Quick Colour Changing that allows to set shortcuts for different font colors. - the extended editor for field allows to edit one field in a powerful WYYIWYG editor (TinyMCE) - Wrapper meta-addon for wrapping text, etc. - ... # Authors - Henrik Giesel/hgiesel : Many contributions and fundamental improvements since 2020, and maintainer since 2020-09 - ijgnd : Original add-on creator, all versions until 2020-09. # Versions - 2023-02 update for Anki 2.1.55+ - 2021-03-03 update for 2.1.41+ ... - 2020-06-26 Text Wrapper extended with counter ... - 2019-08-06 v0.3: new configuration dialog ... - 2019-02-19 v0.2: added context menu, styles, classes ... - 2019-01-16 initial release

GitHub repository: ijgnd/anki__editor__apply__font_color__background_color__custom_class__custom_style
Languages: Python, HTML, Shell