CSS Help - Adding values in cards

I really don’t know CSS at all, other than faking simple edits on existing templates to suit my needs. I am hoping someone here could advise what I’m trying to do as all my edit attempts does not get what I want.

Hoping just to mod an existing template with typing input, like on the ‘Kitsun - Japanese - Vocabulary’ or like ‘10k Voc Kitsun mod - Community Deck’. However I’m looking for the following values, particularly how to add values to front of card. Seems I was able to modify the styling but actually creating the value into the card template has me stuck

On the front of card, I’m looking for the following values:
-Sentence
-Diagram
-Audio
-Kana

Back of card:
-Sentence w/ kanji
-Another additional diagram
-English meaning
-extra value

1 Like

If you just want to swap out fields, you can do so by changing say {{Japanese}} to {{Sentence}} in the HTML code of the layout. Note that if you are using the Kitsun defaults you first have to make a personal copy of the template & layouts.

Is that what you meant? Adding new fields can also just be done by adding {{NameOfField}} to the cards. If you want the same styling, consider taking a look at the html structure surrounding other fields and copy paste the divs around it. I’d recommend just playing around and copy pasting stuff a few times to see what effect it has if you are not that well versed in HTML/CSS :grinning_face_with_smiling_eyes:

If you have specific styling questions or need help be sure to let me know!

1 Like

Ok, I may play with the default template instead a bit with, thanks for your response. Yeah, I like cheat by copy/paste from other structures and seems to work usually…but for this different idea, it’s front card value heavy.

Just to be clear, I thought I had to add the field in Templates for the placeholder for the new value then insert the HTML within Layouts for those values. Within the Layout preview, I can more or less get what I’m looking for but once it came actually card generation, the new value made in Templates versus the styling made in Layout does not connect…so figure I must be missing something in the HTML, I’ll play more

1 Like

Woops, I forgot to mention that yeah. You’d have to add any custom fields to your template copy first, after which you can reference them with the mentioned syntax inside the layouts. They are case-sensitive, so make sure the references are exactly the same as the fields.

1 Like

I actually just figured this an hour ago…haha. It makes sense…going the other way around definitely did not work to lock the values :grin:. I’m actually pretty close what I want using the ‘Kitsun - Japanese -Vocabulary’ as a base layout.

One slight issue I’m seeing is that front card pictures on this layout has the ratio way too big, I think I’m missing something. I know @Buscadon customized some element on the 500+ Japanese Foods that worked nicely for the front card picture in that layout which is pretty similar to what I’m looking for. If either of you have any recommendations, I will take them! :slight_smile:

Edit: I think I found something that works, something like this, at least for card formats on a phone

img {
 width: auto;
 height: auto;
 max-width: 260px;
 max-height: 210px;
}

Sorry to bother again…
This is a separate issue I believe, I was able to get a card format to what I wanted which was to use Complete Jouyou Kanji Writing Deck with drawing productive input. Have to say, works very good with the Mazec drawing app (see below). Happy to share publicly if cool here and assuming permission from the original creator.

However, I went to go through some lessons and reviews today and it seems all my audio and picture/diagrams are broken on every card, cards that were not broken the day before. Has anyone seen this before? I have other anki imports with audio/visual…no problems there.

Ex. (day before)



Ex. w/ Mazec

Broken today (don’t have an app screenshot but in preview manager on desktop here, same thing)