# Different hint colors

**URL:** <https://forums.ankiweb.net/t/different-hint-colors/45177>\
**Category:** Card Design\
**Created:** [May 22, 2024, 10:07pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177 "2024-05-22T22:07:54Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 22, 2024, 10:07pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/1 "2024-05-22T22:07:54Z")

</div>

Hi! Is there a way to have two different hint fields with two different styles?

I’m using

```auto
.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!

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [May 22, 2024, 10:12pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/2 "2024-05-22T22:12:23Z")

</div>

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:

```auto
<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:

```auto
#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.

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 23, 2024, 4:29pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/3 "2024-05-23T16:29:24Z")

</div>

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:

```auto
<div id="hint2">{{hint:English}}</div>

```

with CSS:

```auto
.hint {
    color: purple;
}
#hint2 {
    color: blue;
}

```

But it doesn’t work.

When I say hint fields I mean this: [Field Replacements - Anki Manual](https://docs.ankiweb.net/templates/fields.html#hint-fields), 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

```auto
{{hint:English}}
{{hint:Spanish}}

```

and each of them will show in a different color.

My current CSS for hints is this,

```auto
.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.

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [May 23, 2024, 4:52pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/4 "2024-05-23T16:52:39Z")

</div>

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:

```auto
<div id="hint1">
{{hint:Spanish}}
</div>

<div id="hint2">
{{hint:English}}
</div>

```

and like this on the styling page:

```auto
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:

```auto
#hint1
{
color: purple;
}

#hint2
{
color: green;
}

```

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 23, 2024, 5:10pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/5 "2024-05-23T17:10:11Z")

</div>

Great, thanks! Everything is working now!

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 23, 2024, 5:21pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/6 "2024-05-23T17:21:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [May 23, 2024, 5:24pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/7 "2024-05-23T17:24:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [May 23, 2024, 5:27pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/8 "2024-05-23T17:27:31Z")

</div>

Make also sure, you don’t have any invisible `<br>` or &nbsp 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.)

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 23, 2024, 5:48pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/9 "2024-05-23T17:48:17Z")

</div>

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](https://gofile.io/d/fgze7k) for you to try. Thanks!

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [May 23, 2024, 6:06pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/10 "2024-05-23T18:06:40Z")

</div>

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:

```auto
<div><span id="hint2">{{hint:IPA}}</span></div><br><br>

<div><span id="hint1">{{hint:English}}</span></div><br><br>

```

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [May 23, 2024, 6:12pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/11 "2024-05-23T18:12:04Z")

</div>

Perfect, thank you so much!

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [June 2, 2024, 3:41pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/12 "2024-06-02T15:41:12Z")

</div>

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`).

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [June 2, 2024, 7:26pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/13 "2024-06-02T19:26:59Z")

</div>

This one works for me:

```auto
/* 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.

---

<div class="post-metadata">

**Author:** ![suiyuan](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/suiyuan/32/20938_2.png) [@suiyuan](https://forums.ankiweb.net/u/suiyuan)\
**Post date:** [June 2, 2024, 8:25pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/14 "2024-06-02T20:25:18Z")

</div>

Thanks! Great as always!

> [@Duude](#):
>
> 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.

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!! 🙏

---

<div class="post-metadata">

**Author:** ![Duude](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/duude/32/21017_2.png) [@Duude](https://forums.ankiweb.net/u/Duude)\
**Post date:** [June 2, 2024, 8:56pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/15 "2024-06-02T20:56:12Z")

</div>

No problem! I always like to help 🙂

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [July 2, 2024, 8:56pm UTC](https://forums.ankiweb.net/t/different-hint-colors/45177/16 "2024-07-02T20:56:52Z")

</div>

Closed on July 2, 2024, 8:56pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.