How do I add a rounded corner box in anki templates?

Anki Card Design
1

Hello.
I making a new deck from scratch, a simple front card/ back card deck. Just using sentences in Japanese on the front, and their English translation at the back.
I have found a really beautiful deck online but sadly it’s only used for Chinese.

676×1200 27 KB

674×1200 40.7 KB

If I were to create something like that, how would I go about making it?
Again, my deck will be infinitely more simple.

2

To achieve this look, you’ll need to modify your front- and back templates (“Cards…”) as well as the CSS in the “Styling” tab.

Here’s a quick replica:

Just paste the markup into your card template editor.

4 Likes
3

Thank you so much!
Another person also helped me on reddit, the thread is named “Can anyone help me stylise a simple sentence deck to make it look like this?” by eru777 (I can’t post links)

4

Posting that template here as some people might find it useful: https://gist.github.com/TheWinterDev/d326566974c57731c52c8072081196bf

5

Would you please share the name of this chinese deck?

6

I’m sorry, I can’t post links here. You can find it if you google : beautify-chinese-study and loganconnor44 (the author)

1 Like
7

@ [kleinerpirat]
Can you help me with a minor detail on the deck template? The front of the card already displays the English. How do I remove it from it?
I mean, what section do I delete?
Here’s the code:


<div class="mainContainer">
    <div class="paperContainer">
        <!-- The top section (Japanese Text) -->
        <div class="cardSection">
            <div class="subSection jpTopic">
                <jp>{{JP-Topic}}</jp>
            </div>

            <div class="subSection jpSentence">
                <jp>{{JP-Sentence}}</jp>
            </div>
        </div>
        <!-- ####### -->

        <!-- The bottom section (English Translation) -->
        <div class="cardSection">
            <div class="subSection enTopic">
                {{EN-Topic}}
            </div>
            
            <div class="subSection enSentence">
                {{EN-Sentence}}
            </div>
        </div>
        <!-- ####### -->

        <!-- Meaning (or other) Tag -->
        <div class="tag">
            {{Tag}}
        </div>
        <!-- ####### -->
    </div>
</div>

EDIT: Nevermind, I just deleted the middle section and it’s fine now :slight_smile:

1 Like