Text Colouring Does Not Work

[Toni]

I can’t get text colours to work. This problem has now bothered me across Anki versions from at least Anki 2.1.x to 24.11-qt6, and also on AnkiDroid. I have tried to disable everything except for the respective Chinese addons (Chinese redux before, now Chinese 3), to no avail. Here’s a screenshot of a note from the card browser, and one from the field where I would expect the colours to show up:

This is how the backside of the card looks like:

Here is the template for the backside of the card:

<div class="tags">{{Deck}} {{#Tags}} -- {{/Tags}}{{Tags}}</div>

<div class="answer">

<div class="chinese">{{Hanzi}}</div>
<div class="pinyin">{{Pinyin}}</div>

{{#Simplified}}<div class="chinese"><span class="comment">Simplified:</span> {{Simplified}}</div>{{/Simplified}}
{{#Traditional}}<div class="traditional"><span class="comment">Traditional:</span> {{Traditional}}</div>{{/Traditional}}

<hr>
<div class="meaning">{{English}}</div><br>
<div class="meaning">{{German}}</div>

{{#Mean Word}}<div class="chinese"><span class="comment">Mean Word:</span> {{Mean Word}}</div>{{/Mean Word}}
{{#Also Written}}<div class="chinese"><span class="comment">Also written:</span> {{Also Written}}</div>{{/Also Written}}
<hr>
<!-- {{Sound}}-->

</div>

<div class="comment"> <!-- Word lookup -->
<a href="http://www.mdbg.net/chindict/chindict.php?page=worddict&wdrst=0&wdqb={{text:Hanzi}}">MDBG</a>, 
<a href="http://zhidao.baidu.com/q?word={{text:Hanzi}}&ct=17&pn=0&tn=ikaslist&rn=10&lm=0&fr=search">百度</a>,
<a href="http://image.baidu.com/i?ie=utf-8&word={{text:Hanzi}}">Image</a>
</div>

Here is the corresponding styling:

.card {
 font-family: arial;
 font-size: 30pt;
 text-align: center;
 color: black;
 background-color: white;
}
.card { word-wrap: break-word; }
.win .chinese { font-family: "MS Mincho", "ＭＳ 明朝"; }
.mac .chinese { }
.linux .chinese { font-family: "Kochi Mincho", "東風明朝"; }
.mobile .chinese { font-family: "Hiragino Mincho ProN"; }
.chinesetop { font-size: 38pt;}
.chinese { font-size: 28pt;}
.traditional { font-size: 32pt; margin-top: 1ex; margin-bottom: 1ex;font-family: "Kochi Mincho", "東風明朝"; }
.pinyin { font-size: 20pt; }
.meaning { font-size: 20pt; }
.smallmeaning { font-size: 14pt; }
.comment {font-size: 10pt; color:grey; margin-top: 3ex; }
.tags {color:gray;text-align:right;font-size:10pt; background-color: #fafad0;}
.note {color:gray;font-size:20pt;margin-top:20pt;}
.meanword { font-size: 20pt; }
.hint {font-size:20pt;}
.answer { /* background-color:bisque; border:dotted;border-width:1px */}

.tone1 {color: "red" !important;}
.tone2 {color: "orange" !important;}
.tone3 {color: "green" !important;}
.tone4 {color: "blue" !important;}
.tone5 {color: "gray" !important;}

Originally, I didn’t have the “!important” flags set, but that didn’t make a difference, either.

I feel I must be doing something really wrong, but can’t find it. Can anyone please help?

[rossgb]

Don’t use quotes around the colour names.

e.g.:

.tone1 { color: red; }
.tone2 { color: orange; }
.tone3 { color: green; }
.tone4 { color: blue; }
.tone5 { color: gray; }

[Toni]

I have tried without the quotes as well, but see no change.

[rossgb]

That’s weird. It worked for me when I tried your CSS without quotes around the colour names.

N.B. The pinyin appeared the correct colours in the “Preview” window. They still looked the default black/white when looking at the field in the “Browse” window.

I don’t know if your addons could be messing with the styling.

Maybe you could use the AnkiWebView Inspector addon to help you debug what CSS is actually being applied to your cards:

https://ankiweb.net/shared/info/31746032

[Toni]

Hi Ross,

I was expecting the colours to show up in the ‘Browse’ and ‘Add’ windows as well, not only during review. Formerly, the ‘Pinyin’ input field and the ‘Color’ input field were coloured, too. But thanks a lot for the pointer to this add-on.

Thanks,
Toni

[Danika_Dakika]

@Toni

I was expecting the colours to show up in the ‘Browse’ and ‘Add’ windows as well, not only during review.

It’s important to remember the difference between notes and cards. When you’re adding/editing the fields of a note in the Add/Browse windows, those fields don’t get any of the formatting from a specific card template/styling. You could even have that field formatted in different ways on different cards.