I added custom CSS in order to color cards based on the gender of the noun.
The code works perfectly on Anki dowloaded to my computer, but the colors do not show up when I use ankiweb.net through a browser on a computer, phone, or tablet.
My questions are:
Thank you
Can you share the template code of your card? Normally it should work on any browser, except if you used e.g. chromium specific styling which doesn’t work on e.g. firefox.
It should. If it doesn’t (and we can’t tell without the code), report it here and the issue will be fixed. But of course, something as basic as colours should work put of the box.
I used this code that I found posted on reddit r/Anki. Unfortunately, the message system here won’t allow me to include a link in my reply.
Thank you!
see previous reply, thank you!
It’ll most certainly work on AnkiMobile. Colours applied to the background are a bit wacky on AnkiWeb.
It looks good to me, assuming that the html is correct as well.
I just tried it (never used AnkiWeb before to study, only to sync) and that’s true unfortunately. E.g. see this:
This is my card on ankiweb:
And this on Anki Desktop:
The styling is off and apparently the sources field (the blue box “Quellen”) doesn’t work either – which is odd, though maybe it’s related to the js it uses.
It is interessting to see that my styling overwrote the default ankiweb styling though. The Decks, Add, Search, ect apparently are list elements and get styled by my CSS templates. Probably not intended, but since AnkiWeb isn’t open source (unlike Anki), I cannot try to fix it on their end.
Lol that’s interesting. I’ll want this be like this though, seems like a side-effect feature.
It’s hard to assume any unique HTML/CSS will work cross-platform, because systems and browser can use different web-views/engines/toolkits to display the pages in Anki.
If you post your template and styling as text, in a code/preformatted block (so nothing gets eaten up by the site), I can copy it and give it a try for you specifically in AnkiMobile.
[Adding: Or, if your sync to AnkiWeb is up-to-date, give me some text from an example note, and I can grab it out of your account.]
A screenshot of what it’s supposed to look like might help too, unless Anon’s screenshot is what you’re expecting? Do you generally use dark mode or light mode?
No, it’s not. That was my own template that I know works fine on Anki (desktop) and AnkiDroid. I just wanted to test whether sorata was right and styling really does have issues in AnkiWeb – and considering my templates are quite heavily styled, I figured I could try it with my cards.
I essentially just meant to say: “sorata is right, styling on AnkiWeb really doesn’t work as expected. It’s not the browsers fault or an issue with essenceq44s templates either, but something on AnkiWebs end instead. That means essenceq44 has no way to fix it on their end, as the templates aren’t the issue here”.
That’s really generous of you! I’ll assume that OPs styling should work on AnkiMobile though, because it’s just very simple styling – and AnkiMobile is much better supported / has more features compared to AnkiWeb.
I hate to see anyone buy AnkiMobile for a specific purpose and find out the one thing they want can’t happen. I want folks who spend the money to be happy about it!
[But, thanks for clarifying about what you posted! I wondered why you were being so generous that you re-typed the styling to give it a try. I am definitely not that generous! 
]
Most of the time it doesn’t come down to features of the app – it’s just whether the browser/web-toolkit supports it. We have less control of that with AnkiWeb, since it’s up to the user what browser they use.
(fyi you can just get chatgpt to ocr it for you and ask it to extract in a code block)
Oh dear, a lot of the recent exchanges are over my head, even the request “If you post your template and styling as text , in a code/preformatted block (so nothing gets eaten up by the site)” - I’m not sure what that means.
But my AnkiWeb is up-to-date and one card is the word “estrado de cama” This screenshot shows the “blue” background that is supposed to show up, but on a browser the background is just white. Does this info allow you to test it on AnkiWeb?
Dark/Light mode - is this a phone setting or Anki setting. I don’t think I’ve chosen anything on purpose nor know how to change! Sorry, I’m not a coder and simply leveraged that reddit code to get what I wanted.
Maybe this is what the request was?
Styling:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.m {
background-color: lightblue;
}
.f {
background-color: #fdd;
}
.n {
background-color: lightyellow;
}
.background-div {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
}
Front Template:
{{Picture}}<br><br>
<font color=red></font><br><br>
<font color=red></font><br><br>
Back Template:
<div class="background-div {{Gender}}"></div>
{{FrontSide}}
<hr id=answer>
<span style="font-size:1.5em;">{{Word}}</span><br>
{{#Pronunciation (Recording and/or IPA)}}<br><font color=blue>{{Pronunciation (Recording and/or IPA)}}</font>{{/Pronunciation (Recording and/or IPA)}}
{{#Connection}}<br><font color=grey>{{Connection}}</font>{{/Connection}}
<span style="">
Summary: The styling is broken for everyone on AnkiWeb, not just for you.
You type the following:
```
Code goes here
```
and it will look like this:
Code goes here
The “Code goes here” will be replaced by your actual html and css.
Both, actually. Though Anki usually just uses the system settings (e.g. from your phone). Light mode is the view you see when it’s daytime, dark mode is the view you see when it’s night time (the color changes from light to dark or vice versa).
Edit:
Yes, indeed!
I could, but then I’d have to proofread it and worry about typos. I don’t think posting something in a usable format is too much to require of someone asking for help.
I can verify that it looks the same on AnkiMobile as it does on Desktop. 
On AnkiWeb (in Chrome), it shows up for me without the colored background except there is a band of blue across the bottom of the screen. The window has to be big enough to show the whole card without scrolling, and then the blue fills the space below the card, down to the answer buttons. This seems like a clue as to why it’s not applying, but I’ll leave it up to folks who are better with HTML/CSS to see if there’s something in your templates or styling that could improve the situation.
Oooh, thank you for doing that, esp verifying that it will work with AnkiMobile.
I’ll see if any CSS experts can solve it - and if not, then I will go the paid app route.
Much appreciated!
If that’s the only issue you’re facing, then you do not need to buy anki just for that. You can simply fix it like so:
<div class="front">{{Front}}</div>
<div class="background-div {{Gender}}"></div>
<div class="front">{{FrontSide}}</div>
<hr id=answer>
<span id="word">{{Word}}</span><br>
{{#Pronunciation (Recording and/or IPA)}}
<div id="pronunciation">
{{Pronunciation (Recording and/or IPA)}}
</div>
{{/Pronunciation (Recording and/or IPA)}}
{{#Connection}}
<div id="connection">
{{Connection}}
</div>
{{/Connection}}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
/* Fields */
.front {
z-index: 2;
position: relative;
}
#word {
font-size: 1.5em;
z-index: 2;
position: relative;
}
#pronunciation {
margin-top: 1em;
color: blue;
z-index: 2;
position: relative;
}
#connection {
margin-top: 1em;
color: gray;
z-index: 2;
position: relative;
}
/* Gender and it's background */
.m {
background-color: lightblue;
}
.f {
background-color: #fdd;
}
.n {
background-color: lightyellow;
}
.background-div {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
}
I do not know, however, if other things won’t break as well.
From AnkiWeb:
From Anki (Desktop):
Edit: In case you want to test this, Danika: It’s currently uploaded on my account linked to the same mail as this user account here. I assume you can access (and maybe download) it?
The differences are not caused by anything as drastic as differences in web engines. Card’s CSS is still getting applied, it’s just AnkiWeb has a few of its own styles, not encountered on other platforms, that sometimes can overwrite or paint over Card’s styling.
To remove AnkiWeb’s background coloring, for example, you can append the following to the styling of your Card, there is no need to change anything else:
body:has(#qa_box),
#qa_box.card {
background: unset;
}
There are other AnkiWeb styles, affecting image sizing/vertical alignment/Card padding/etc., which I also had to deal with not so long ago. I think I managed to catch most of them, so if anything else is needed, I can try and extract the respective resets from my templates.