Hi! Is there a way to have two different hint fields with two different styles?
I’m using
.hint {
color: purple;
}
which works good, but I’d like to have a different “hint2” field with a different color, and I can’t find out how I should do that.
Thanks!
Do you already have a second hint field for your card?
Like: {{hint1} and {{hint2}}?
You could put both into their own div element along with their own id.
Example:
<div id='hint1field'>{{hint1}}</div>
<div id='hint2field'>{{hint2}}</div>
In the styling section you only need to adress different stylings for the different ids:
#hint1field
{
color: purple;
}
#hint2field
{
color: blue;
}
The “#” is needed, as you adress with a “#” the id of an element.
With the “.” you only adress classes.
REMEMBER: IDs are unique! You can’t have two elements with the same id.
Thanks, Duude.
I am trying to use this, but it looks like I am doing something wrong or maybe we are talking about different things.
I’m using:
<div id="hint2">{{hint:English}}</div>
with CSS:
.hint {
color: purple;
}
#hint2 {
color: blue;
}
But it doesn’t work.
When I say hint fields I mean this: Field Replacements - Anki Manual, so I don’t have two different hint fields because I actually don’t have one either, since this is an internal field used by Anki, if I understand it correctly.
Basically what I want is to have
{{hint:English}}
{{hint:Spanish}}
and each of them will show in a different color.
My current CSS for hints is this,
.hint {
color: purple;
}
but of course it applies to all of them and I don’t know how to separate them with an id/class and how to refer to that from CSS.
Oh. Yeah. {{hint:fields}} are being treated as anchor elements. So you would need to come up with more selectors.
It would have to look like this on the HTML Page:
<div id="hint1">
{{hint:Spanish}}
</div>
<div id="hint2">
{{hint:English}}
</div>
and like this on the styling page:
div#hint1 a.hint
{
color: purple;
}
div#hint2 a.hint
{
color: green;
}
Remember: This will only color the hint field, as soon as you click on it. The color switches back to black.
BUT: You can make this change too with:
#hint1
{
color: purple;
}
#hint2
{
color: green;
}
Great, thanks! Everything is working now!
Sorry, one more thing.
Now when I reveal the hints, the text below them is pushed down (as if the revealed hint had a <br> or two at the end).
I don’t think this was happening before, but now even after removing the styling and tags it keeps happening. Other decks are unaffected. Any idea what can be going on?
Weird. Could you post your code here maybe, so I can tinker a bit around with it?
Because when I try it, this doesn’t happen to me somehow.
Make also sure, you don’t have any invisible <br> or   fragments in your card. (Not Notetemplate!).
You can look at this, by opening up the card editor and activating the HTML-Editor (you have to press these small “< >” arrows on top of the field to the upper left - right next to the pin.)
Yes, the html in the fields is clean, if forgot to mention that.
I actually checked and this was happening before the styling change, actually. But I think this is not the normal behavior, and I have some other decks where this doesn’t happen.
Here’s a note for you to try. Thanks!
Okay. That is weird now. I tinkered a bit… it works now.
I don’t know why (probably it has something to do with the span elements).
You only have to put the span elements into their own div elements. Then it works. It’s not popping up any <br> elements anymore after clicking on the hint.
Here:
<div><span id="hint2">{{hint:IPA}}</span></div><br><br>
<div><span id="hint1">{{hint:English}}</span></div><br><br>
Perfect, thank you so much!
I’m back at it. Sorry!
Do you know if there is a way to add a .nightMode style to these hints? My usual tricks don’t seem to work (.nightMode #hint1 or #hint1.nightMode).
This one works for me:
/* Hint Styling (not clicked!)*/
#hint1 a.hint
{
color: purple;
}
#hint2 a.hint
{
color: green;
}
.nightMode #hint1 a.hint
{
color: blue;
}
.nightMode #hint2 a.hint
{
color: red;
}
/* Hint Styling (after opening click) */
#hint1
{
color: purple;
}
#hint2
{
color: green;
}
.nightMode #hint1
{
color: blue;
}
.nightMode #hint2
{
color: red;
}
It probably “didn’t work”, because you forgot, that with your styling you only style the hint text after clicking on the hint. If you still want to style the hint text as is, then you have to set additional selectors.
Thanks! Great as always!
No, I actually remembered that, the problem was I wasn’t adding the a.hint. I guess that happens because I don’t really know what I’m doing in HTML/CSS and I just experiment with what little I understand. ChatGPT wasn’t being helpful either and I guess I don’t know the right terminology (“class”, “element”…), so my search was not being very productive.
Thanks again!! 
No problem! I always like to help 
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.