I don’t see anything in the default HTML generated around templates that would allow for user CSS to separately style a note’s two sides without adding another parent element.
Sounds like a bit of an oversight that’s easily fixable by just adding “front” / “back” to the <body> classes?
I’m new around here, so I will be interested to see how the experienced Anki users will respond. By way of preliminary response, it is not as simple as adding “front” or “back” classes to the body element. There are probably multiple reasons for this (and I am curious to know how the structure of the desktop and mobile versions), but at the very least, for the sake of the the ankiweb.net version, the top element of a question and answer is not the body, because there also needs to be additional elements to the web page for the interface around the card.
Here is an example of the structure of the card, as you can easily see from the web version:
The <div id="qa"> (highlighted in the screenshot) is the parent container of everything in the template, and it itself is a child of <div id="qa_box"> with a class of card, which is the top level of the card itself.
You basically have complete control of the structure of everything that goes inside of <div id="qa">, and it is entirely possible for you to separate the front and back into separate parent elements if you want to, but that structure is not forced, so other possibilities are available as well.
Yes of course it’s fully possible to add your own parent element to signal front/back, that’s literally what I wrote (and so far am doing on my decks).
But it’s a needless overhead to something the client should IMO signal by itself, and all it takes for that is to add a unique class to one of the parent elements — to the user CSS it’s just about entirely insignificant whether it’s to Anki desktop’s body or Anki web’s div id="qa_box", the rules will match anyway.
Besides, this actually would allow for a more flexible/straight-forward use of {{FrontSide}}, seeing (unlike now) there’d be no user hard-coded parent element anymore to influence styling on the back.
It’s easy enough to wrap your content in divs if you need to distinguish the two, and most users don’t.
Again, if you wrap that’ll copy in {{FrontSide}}, if it’s by the client to a parent it won’t. I guess you can see how the latter obviates some more convoluted CSS.
Anyway, bit of a chicken or egg issue. Enough people won’t use functionality until it’s there by default, like (I guess) night mode.
Pretty sure a new user is surprised to learn they may directly style cards separately via .card# but for no real reason their sides.
Every extra feature increases the maintenance burden, and given the lack of people asking for this up until now, I’m afraid I don’t think adding it into Anki is a priority at this point.
Having a hard time figuring out how one new class attribute does that, but you’re the maintainer so ok.
I’d like it too. I’m not a programmer but seems really easy to implement (just a class in a template). Thank you
It’s also very easy to achieve the same result yourself via the template. You may well already know this, but if not, I would be glad to help you achieve the result you are looking for.
Thank you very much.
I just want to apply some different styles to front and back sides of the card (maybe a border, or a different shade of background). I’m experienced in html and css, so if there was a class to differentiate the two it would have been trivial.
On reddit they told me that I have to use javascript, thaht I don’t know. Even using the “inspector” plugin it’s still a tedious try and test process.
<script>
document.body.classList.add(“front”);
</script>
…and similar did’nt work
What shall I do?
Thank you very much again.
For most things, the easiest is to just add <div id='back'> at the very top of the back template, and a corresponding </div> at the very end of the back template. Then after you have styled the front side, you can apply style overrides for the answer side using the #back selector.
Background is a little different (and so I am starting to concede the original point in this thread). If you refer back to my screenshot, you will see that there is a <style> block directly under the highlighted line. That is how Anki is inserting your template CSS. Well, you can do the very same thing: you can add your own additional <style> block directly in the back template—not the Styling section—like so:
<style>
.card {
background: lightblue;
}
</style>
<div id='back'>
{{FrontSide}}
<hr id="answer">
{{Back}}
</div>
No need to do anything special to the front of a card: just style the front as default and target the back for any differences. But do remember that if a note type generates more than one card type (such as reverse), you will need to repeat the things you have added in each back template.
I have to admit, any CSS that you want to apply directly to .card, such as background, would be easier if it were differentiated by class.
So non need to use js - that’s good.
As a hobbyst web designer I like to use as few tags as possible, I don’t like to add DIVs just for styling. And the {{FrontSide}} ankitag actually creates some wierd effects. Anyway that’s a good solution.
Thank you very much.