Custom templates - please help :((

[myanki]

Hello!

I need to make a large number of cards and they all have same headers. I have tried to copy and paste the headers every time, but after 150th card it became excruciating to do so.

So my question is: How do I make a template so that every card has the heading alredy written when I start to write a new one? Also, I always make the headings purple or red, and bolded, so they are visible in the sea of text following them.

I have tried going into “Cards…” but I simply don’t know how to program so this is wayyy too complicated for me. please help!! I still have to make over 1000 cards and copy-paste method takes way too much time.

I need my cards to look like this:

front - name of the syndrome/disease

back (these are my headings)
definition
patophysiology
clinical image
diagnosis
differential diagnosis
therapy

[Anon_0000]

@myanki

How do I make a template so that every card has the heading alredy written when I start to write a new one?

1. You go to your template,
2. choose the correct side of the card (front or back)
3. and add the heading that you want.

Since you want to style your heading, you’d use something like this:

<div id="my_heading">Here goes the text that my heading should say</div>

@myanki

Also, I always make the headings purple or red, and bolded, so they are visible in the sea of text following them.

For that you go to the styling tab in the templates editor and reference the id used above:

#my_heading {
	color: red;
	font-weight: bold;
}

If you have that you can easily search for other things (e.g. “How to change the background color of my div?”), so that you can build even more complex things.

Edit: I just noticed you seem to refer to your fields as headings:

@myanki

back (these are my headings)
definition
patophysiology
clinical image
diagnosis
differential diagnosis
therapy

Assuming you already have your fields set up, you’d go to your card template window and press add field (middle, bottom). The code would change to e.g. something like this:

<div id="my_heading">{{definition}}</div>

where {{definition}} is the name of your field.

[myanki]

Thank you so much!!!

I actually use only one field because it is easier and faster. I have done as you suggested, but I only see the headings when I use the card, not while I am making it. Everything else works fine. Am I doing something wrong?

[Anon_0000]

@myanki

but I only see the headings when I use the card, not while I am making it.

I don’t think it’s possible to make those heading visible during card creation. I typically create cards in a .csv and import them (I do not use the add notes dialog), so maybe someone else here knows how to achieve that.

[myanki]

Thanks for the help!

I figured it is not possible since there are no tutorials on the internet. I guess I will have to stick to my copy and paste method. Thank you for your time

[Anon_0000]

@myanki I know you said this:

@myanki

I actually use only one field because it is easier and faster.

I use mutliple fields and want to show you what it could look like in a very basic form (based on the info you provided above). Maybe this is suitable for you.

Card Template

1. Front template says this:

{{Front – Name of Syndrome / Disease}}

2. Back template says this:

{{FrontSide}}

<hr id=answer>

<div class="header">Defintion:<br></div>
<div id="definition">{{Back – Definition}}</div>

<div class="header">Patophysiology:<br></div>
<div id="pathophysiology">{{Back – Patophysiology}}</div>

<div class="header">Clininical Image:<br></div>
<div id="clinical_image">{{Back – Clininical Image}}</div>

<div class="header">Diagnosis:<br></div>
<div id="diagnosis">{{Back – Diagnosis}}</div>

<div class="header">Differential Diagnosis:<br></div>
<div id="differential_diagnosis">{{Back – Differential Diagnosis}}</div>

<div class="header">Therapy:<br></div>
<div id="therapy">{{Back – Therapy}}</div>

3. Styling says this:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}


.header {
	color: red;
	font-weight: bold;
}

Add cards dialog

You would get something like this:

As you can see, you can clearly see what each field is supposed to do.

In the review

It might not be pretty yet, but with the code above it would look something like this:

Of course this could be styled to look better, e.g. by increasing the space above the headings (increase readability).

The great thing about this is that you do not have to add all those headers every single time and changing their style (e.g. color) becomes a matter of seconds (and applies to every single card).

(the red headers are the same for every card, the black text changes)

[myanki]

Thanks for the input. It looks good, but it creates a new problem for me. I write only in bulleted lists, so if I did it as you suggested, the names of the headers would stay in the middle, while the text would be left-centred. Unfortunately, this triggers my OCD, and I am not able to look at the cards for long.

Sorry it just seems like I’m super ungrateful, but I like my cards looking a certain way. I have photographic memory, so the design of the cards is quite important for maximising the use of it.

[leoy]

https://ankiweb.net/shared/info/291119185

[Anon_0000]

@myanki

so if I did it as you suggested, the names of the headers would stay in the middle,

You can really tweak everything, since it’s essentially a webpage. E.g. tweak the css like so:

.header {
	color: red;
	font-weight: bold;
	text-align: start;
}

This gives you this:

If you need / want a certain look and cannot figure out how to do it with card templates, then you could sent us an image of an example card and ask how certain things would be implemented with CSS / HTML.

[myanki]

This is perfect!!! Thank you so much!!!

I have been doing the copy-paste method for over 4 years. Thank you so much for solving all of my anki problems. This would be even better than my current method because I wouldn’t have to start my bulletpoints with an indentation which saves me more indentations for later points.

Edit:

I have tried to make the cards by copy-pasting your code, but I think I am doing something wrong. I keep getting errors and can’t make the cards. I will put here the error and all of the windows of what I did.

Also here is the reference photo of my current cards that you have requested

[myanki]

I’ve tried figuring out the mistake on my own - spaces, capital letters, etc. But nothing seems to work.

Could you maybe figure out what I’m doing wrong with the code in pictures that I posted above?

[Ab_Bc]

In your templates, try to remove the "Back - " part from the name of the fields so that they match the actual name of the fields of the note type (e.g. change “{{Back - Definition}}” to just “{{Definition}}”)

[Anon_0000]

@Ab_Bc

so that they match the actual name of the fields of the note type

Agreed, that’s the solution to your problem. You can also insert them from the add fields button in the templates window (in the middle, bottom).

@myanki I didn’t see that you edited your last post with additional questions. Sorry about that.

[myanki]

It works perfectly now, thank you all so much!

I have one last question, how can I delete the fileds that are not in use for that particular card. I don’t use all of them for all cards, so I don’t want there to be empty headers when there is no text in that field. Is it possible?

[Anon_0000]

You might be looking for Card Generation - Anki Manual.