Im using anki to learn Irish and I downloaded a shared deck which is good for vocab but when I want to add my own cards to the deck I see the premade deck type and cant change any of the fields or the aspects of it like where does what go or the colour of the text and how to add some of the stuff to my own cards do I need to know html for this
You don’t need to know HTML. If you want to add some styling, maybe a little knowledge of CSS would be useful.
Anyways usually the HTML used in Anki cards is pretty easy and limited to
<b>
<u>
<i>
<sub>
<sup>
<strong>
<div>
<ul> (and <li>'s)
You can easily find help online for such tags.
Note that CSS is the language used to style the HTML, and that the HTML is used to store the structure of some data. For example, the HTML would store the fact that you have a list and some elements inside it, and the CSS would allow you to color the list in any color you want.
I would say it depends on what you want. You can do a lot of styling using the toolbar and there are addons to increase the options here as well. E.g. with a quick search I found this one: https://ankiweb.net/shared/info/1899278645.
But if you want to change the templates themselves, then yes, you will need to know at least the basics of html and css; and if you want more advanced features, you will need js as well. Though, arguably, you could also take code that others have written already or use an ai chat bot for assistence. Just keep in mind that ai is often full of errors, especially if you need anki specific features (like the {{FIELD}} syntax).
Ive seen and understood the single letter tags its just the major coding for fields and adding new text and div tbh this is an example of one of the cards in the deck
this is the code for a single card including audio and different colours and divs
`<!-- link -->
<link href='style.css' rel='stylesheet' type='text/css'>
<!-- start row -->
<div class="row">
<!-- column 1 -->
<div class="large-6 columns text-center ga-container">
<h1>{{GA}}</h1>
</div>
<!-- end column 1 -->
<div class="large-6 columns text-center genitive-vn-container">{{GenitiveVN}}</div>
<!-- column 2 -->
<div class="large-6 columns">
<!-- inner row -->
<div class="row pronounce-container">
<!-- start -->
<div class="large-12 columns text-right no-mobile">
<p class="no-mobile">Pronunciation</p>
</div>
<!-- end -->
<!-- start -->
<div class="large-12 columns text-center">
<button class="button" onclick="document.getElementById('connacht').play()"><span>Connacht</span></button>
<audio id="connacht" preload="none" onerror="document.location=this.src">
<source src="https://www.teanglann.ie/CanC/dĂłcha.mp3" type="audio/mpeg">
</audio>
<button class="button" onclick="document.getElementById('ulster').play()"><span>Ulster</span></button>
<audio id="ulster" preload="none">
<source src="https://www.teanglann.ie/CanU/{{GA}}.mp3" type="audio/mpeg">
</audio>
<button class="button" onclick="document.getElementById('munster').play()"><span>Munster</span></button>
<audio id="munster" preload="none">
<source src="https://www.teanglann.ie/CanM/{{GA}}.mp3" type="audio/mpeg">
</audio>
</div>
<!-- end -->
</div>
<!-- end inner row -->
</div>
<!-- end column 2 -->
</div>
<!-- end -->
ignore the code if you want i just want to know is this amount normal or not
Nothing about the code amount is weird. My templates that I created myself have at least double that amount, whereas the default html (in templates anki ships by default) are not even half of it.
1 Like
The complexity of templates can vary significantly, which is reflected in the code that can take anything between only a couple of lines to multiple pages of dense text. So yours seem rather moderate in comparison to what one can come up with.
To adjust the fields, you don’t need to know any HTML besides being able to locate a place in the template to insert a field at or exclude an existing one. You can look for present fields (enclosed in {{ }} in the code) and orient yourself by referencing their position in the card preview.
To create a completely new field (or rename/reorder/delete existing ones) to be used in the template, you need to go to the field editing menu (click Fields in Anki Browser when one of your cards is selected, or in the Note Type manager). There is no HTML there at all.
To edit the formatting of the fields in the template, some html/css will be needed. But the basic stuff, such as setting specific colors for fields, is as simple as:
<div style="color:red">
{{YourField}}
</div>
1 Like
That has lot of good signposts for you, so it shouldn’t be too tough to edit. Anything you don’t understand, you can look up at W3 Schools, for a common-sense explanation.
- When you see this notation –
<!-- ... -->– it’s a comment, to let you know what is going on in that area of the template. - If you want to move an opening tag, like
<h1>or<div ...>, make sure you keep it related to its closing tag</h1>or</div ...>. (Think of them like open and close parentheses that surround something.) - When you see anything in double curly braces
{{...}}– that’s the name of a field in your note type, and it tells Anki where to display the contents of that field. Field Replacements - Anki Manual
If you want help with something specific – post your front template, back template, and Styling (as text in separate code blocks, just like you did above 
) – as well as a screenshot of a note, and what the card looks like now. Then explain what you want to change and I bet someone can help you find a solution.
1 Like
thanks to everyone who helped me Ive figured a bit more out and realised that alot of my problems are with myself and not with my ability with anki but one issue I have is how to have text on the front of the card and remove it on the back If i have a verb and want to specify which tense but then on the back I wish to remove it and maybe replace with an explanation or translation
Check this topic Shared section on front and back.
2 Likes
If your template doesn’t use {{FrontSide}}, it is as simple as putting the required field on the front template and not putting it on the back.
2 Likes
@Limidan what is the link to the deck, please? It looks like one of mine. I may be able to help you more directly.
2 Likes