Home → Effective Learning →

Formatting - opaque block over part of sentence

• Edit

Rob Ob

08 Mar, 2016 05:26 PM

Hi All,

I have been transferring paper Japanese vocabulary flashcards to Anki and had a formatting question. On the front side, there is a sentence with a kanji word covered by a light-grey box (the same color as the sentence text). Is there a simple way to change the color of the box to green (while keeping the sentence text light grey)? The green helps me quickly focus on the keyword, especially on the answer side where there is more information.

As a potential complication, the front side sentence reveals furigana on hover-over; the back side sentence has furigana showing always.

An image follows along with the sloppy code as I don't know much about coding. Any other formatting recommendations are welcomed.

Thanks!

FRONT TEMPLATE
<div id="frontSide">
<notext onclick="this.setAttribute('class', '');" class="hidden">{{furigana:Reading}}</notext></div>
<br><br>
<span style="font-size: 20px; color: #A082BD">{{hint:Meaning1}} </span><br>

STYLING
.card {
 font-family: arial;
 font-size: 30px;
 text-align: center;
 color: #E0E2E4;
 background-color: #293134;
}

/*below controls text for show phrases*/
a {
  color: #A082BD; font-size: 20px;
}

/*You can read that as "#frontSide with a parent that is not #backSide" */
:not(#backSide) > #frontSide ruby rt {visibility: hidden;}
:not(#backSide) > #frontSide ruby:hover rt { visibility: visible; color: #678CB1; #background-color: #fa5; }
#:not(#backSide) > #frontSide ruby:hover { background-color: #fcc; }
notext b { background-color:#E0E2E4; color:opaque; border-style: solid; border-width: 3px; border-color: #93C763 }
notext1 b { background-color: #93C763; color:opaque }
ruby rt { color: #678CB1; }

/* color themes from http://eclipsecolorthemes.org/?view=theme&id=21 */

BACK TEMPLATE
{{FrontSide}}
<hr id=answer>

<span class=cardback>
<span style="font-size: 50px;font-weight: bold; color:#93C763">{{furigana:Reading1}}</span><br><br>
<span style= "color: #A082BD";>{{Meaning1}}</SPAN><br><br>
_____________________<br><br>
{{furigana:Reading}}<br><br>
<span style="font-size: 20px; color: #A082BD">{{hint:Meaning}} </span>
</span>

• Anki_screen_shot_2016-03-08.png 49.4 KB

1. Support Staff 1 Posted by Damien Elmes on 10 Mar, 2016 01:03 AM

   

   I'm afraid we can't provide official support for HTML/CSS, so I'll move this to the community section.

   • Edit

2. 2 Posted by Adam on 18 Mar, 2016 09:04 PM

   

   Not a direct solution with boxes and such, but a possible solution:

   It looks like you're using a front to back style for your card. Why not just use close deletion, which will replace any word that is blanked out with a "[...]" (in bolded blue, but you could change the color to green).

   Would that work?

   • Edit

3. 3 Posted by Rob Ob on 19 Mar, 2016 04:54 AM

   

   Thanks for taking to time to respond Adam. Originally I used the cloze-delete cards but had some problems:

   1. I wanted the flexibility to easily create additional card "sides" on my own terms

   2. There were some code conflicts, which I can't remember now (and they may relate to some things that I dropped)

   Of course, this could all be a result of my poor coding skills.

   I spent a few hours searching the internet and found some neat solutions which create borders which go towards the INSIDE of the box, rather than outside the box. Unfortunately coding is a bit above my head...

   • Edit