Custom Anki CSS Customizable Design

/*---------------------------------

www.benkyogo.co.uk
Custom Anki CSS Customizable Design

Check out the benkyogo store: https://www.etsy.com/uk/shop/Benkyogo for Japanese language learning resources!

-----------------------------------*/

[[FRONT:]]

<div id=TopBox>
<span class=expression>{{Expression}}</span></div>





[[STYLING:]]

/*---------------------------------

【BENKYOGO NOTES:BACKGROUND】
● For a gradient background, replace the details below by copying and replacing the code found at cssgradient.io (unafilliated website). If you're not using an image background, delete the code below where indicated.
● For an image background, download and save your background image to the collection.media folder in your Anki files on your PC. Then, replace 'bg.jpg' below with the file name. The collection.media folder is found in: Windows: C:\Users\YOUR_USERNAME\AppData\Roaming\Anki2\YOUR_USERNAME\collection.media,    Mac: ~/Library/Application Support/Anki2 (hidden folder).
● Do not erase the final '}' below, else your backgrounds will not work!
● Your gradient must always be linear at 90' degrees.

-----------------------------------*/

.card {
font-family: calibri;
font-size: 14x;
text-align: left;
margin: 60px 60px 60px 60px;

/*-----START GRADIENT BACKGROUND -----*/

background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 100%);

/*-----END GRADIENT BACKGROUND -----*/


/*-----START IMAGE BACKGROUND (IF USING A GRADIENT BACKGROUND, DELETE THIS BUT DO NOT DELETE THE "}" BRACKET BELOW! -----*/

background: url('bg.jpg') top left fixed;

/*-----END IMAGE BACKGROUND -----*/

 }


/*---------------------------------

【BENKYOGO NOTES:  ENCLOSURE】
● Change the colour of the left & bottom borders by editing the colours '#DDDDDD' and '#AAAAAA'.
● Change the background gradient of your boxes by replacing the gradient background using cssgradient.io (unafiliated website)
● Change the radius of the enclosure from 20px to your desired curvature. (border-radius:20px)
● Change the thickness of the borders by replacing 6px with any number of pixels (border-left: 6px / border-bottom 6px)

-----------------------------------*/

#TopBox { padding: 35px 35px 24px 30px; background: rgb(212,20,90);
background: linear-gradient(90deg, rgba(212,20,90,1) 0%, rgba(251,176,56,1) 100%); border-radius:20px; overflow:hidden; border-left: 6px solid #DDDDDD;  border-bottom: 6px solid #AAAAAA }

#BottomBox { padding: 35px 35px 24px 30px; background: rgb(85,108,241);
background: linear-gradient(90deg, rgba(85,108,241,1) 0%, rgba(24,205,241,1) 100%); border-radius:20px; overflow:hidden; border-left: 6px solid #DDDDDD;  border-bottom: 6px solid #AAAAAA }

/*---------------------------------

【BENKYOGO NOTES:  FONTS】
● Change the text colour hash codes (e.g. color:#FFFFFF) for each font type - expression, pronunciation and meaning.
● Change the font sizes (font-size: 36px)
● Remove the 'font-weight: bold' if you want regular thickness.

-----------------------------------*/

.expression,.sent { font-family: Helvetica; line-height:40px;  font-weight: bold; font-size: 36px; color:#FFFFFF }

.pronunciation { font-family: Helvetica; line-height:30px;  font-weight: bold; font-size: 30px; color:#FFFFFF }

.meaning {  background:#FFFFFF; color:#389bf1; font-family: "Helvetica"; font-size: 30px; padding:10px 10px 10px 10px; margin: 0 5px 0 -5px; border-radius:15px; line-height:60px; }


/*---------------------------------

【BENKYOGO NOTES:  OTHER】
● This customizable ANKI template is produced by BENKYOGO.CO.UK. Check out the website for hints, tips and tricks to self-study Japanese.

-----------------------------------*/







[[BACK:]]

<div id=TopBox>
<span class=expression>{{Expression}}</span></div>
<br>
<br>
<div id=BottomBox><span class=pronunciation>{{Pronunciation}}
<hr><span class=meaning>{{Meaning}}</span></div>