Showing Tags at the bottom of the cards while studying

Anki Card Design
1

Hello!

I’d like to display tags at the bottom of my flashcards while I’m studying. I’ve learned that this can be done by adding {{Tags}} to the card template. However, I haven’t been able to determine the exact location where I should insert it. Should it go in the ‘Front Template,’ ‘Back Template,’ or ‘Styling’? Additionally, where in the code should I place it? I’ve tried a few possibilities, but none of them displayed the tags the way I intended.

1 Like
2

You can place it at the bottom of either the front or back template or both depending on your preference.

See this if you want the tags to look nicer:

1 Like
3

Please read the docs: h ttps://docs.ankiweb.net/templates/intro.html

4

You need to put it in some kind of footer, see examples here: Is Flexbox supported in Anki CSS?

5

Do I need to copy the whole code from there? It seems quite exhaustive compared to my need of simple tags on my cards (I’m sorry if this is a stupid question, I just have no experience with programming at all so this is very complicated for me).

6

I already read the paragraphs on this topic before opening this thread but unfortunately it did not help me. As I said in the beginning, I already tried to do it like it is written in the docs but it didn’t work as I want it.

7

Putting the tag on a card is simple (just write {{Tags}} into the front and/or back template), putting it “at the bottom” in the sense of “footer” and not “behind everything else” requires extra effort.

I use an extra template to play around, so no, please don’t put anything that isn’t fully understand in your current template.

1 Like
8

There are a lot of ways to fix an element at the bottom of the page via HTML/CSS, and I think a relatively simple way is to use a flexbox layout, as mentioned by @ferophila . Here is an example:

Template:

<div class="container">
    <main>
        <div>{{Field 1}}</div>
        <div>{{Field 2}}</div>
        <div>{{Field 3}}</div>
        <div>{{Field 4}}</div>
        <div>{{Field 5}}</div>
    </main>
    <footer>Tags: {{Tags}}</footer>
</div>

Styling:

.card {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}

main {
    flex: 1;
    background-color: lightgreen;
    overflow: auto;
}

footer {
    background-color: lightsalmon;
}

Screenshot:

fixed-footer
fixed-footer825×616 30.6 KB

4 Likes
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.