Is there an actual tutorial for how to make custom card layouts?

Help
#1

Is there an actual tutorial for how to make custom card layouts?

Hey all,

Just officially subscribed after testing out Kitsun while it was in beta last year. I’ve already used community decks, but now I’m ready to make my own custom decks for vocab from native Japanese materials that I am currently reading.

Can someone point me to a tutorial on how to do this? I work in web/ux/ui and I am fully competent with html/css/etc, but I can’t seem to find an actual basic walk-through of how to make a more complex layout anywhere in the Kitsun documentation or here in the community center.

Since you can’t duplicate a community/shared deck’s custom layout, am I really supposed to just reverse engineer it with my browser? I really think a basic example that explains some of the available (or most common) behaviors should exist, especially for a tool that requires a subscription.

Thanks!

2 Likes
#2

Welcome, and thanks for the support!

If you are well versed in css/html you can basically go at it the same way you would create your designs for a website.

When you go to the layout editor page you can create a new layout or choose and modify existing ones. The screen will show you a live preview of what you are coding.

If you want to see how other layouts work, you can check the default layouts and check the html and css in that same editor. No browser tools needed there :smile:

Next to that, the help/guide section has most information on special templating syntax that you can use, such as {{type:fieldname}} to create a input field for a card. Although the help section is very outdated in general, the syntax described there is still the same so it should still work :slight_smile:

In case you want hinekidori’s layouts, you can actually grab that from the community centre (at the very bottom of the front page), which could also act as a reference on how the syntax works.

So basically: check other layouts in the layout editor, check the documentation on templating syntax and apply your general css/html knowledge to create your own designs with some of the templating syntax put into there.

If you have specific questions or something is unclear I’d love to help you out by the way, feel free to ask!

1 Like