Showing Tags at the bottom of the cards while studying

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.

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

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

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

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).

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.

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

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:

3 Likes

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