Anki Forums

Can't customize type:cloze CSS

Hello,

I’m trying to change the background-color/color properties for the classes .typeGoo/Bad/Missed.
The CSS wont work though. I am not sure what I have missed and would really appreciate if somebody could help me find the mistake.

The current CSS in “Styling”:

@import url("_styles_for_syntax_highlighting.css");
@font-face { font-family: myfont; src: url(’_menlor.ttff’); }

html { overflow: scroll; overflow-x: hidden; }
/* CONTAINER FOR YOUR CARDS /
#kard {
padding: 0px 0px;
max-width: 500px; /
CHANGE CARD SIZE HERE /
margin: 0 auto; /
CENTERS THE CARD IN THE MIDDLE OF THE WINDOW /
word-wrap: break-word; /
BREAKS UP LONG WORKS */
}

/* APPLIES TO THE WHOLE CARD /
.card {
font-family: Menlo, baskerville, sans;
font-size: 22px; /
FONT SIZE /
text-align: left; /
ALIGN TEXT /
color: #D7DEE9; /
FONT COLOR /
line-height: 1.6em;
background-color: #111111; /
BACKGROUND COLOR */
padding-top: 80px;
padding-right: 500px;

}
/* STYLE FOR CLOZE DELETIONS */
.cloze, .cloze b, .cloze u, .cloze i { font-weight: bold; color: MediumSeaGreen !important;}

/* STYLE FOR EXTRA PORTION ON BACK OF CARD */
#extra, #extra i { font-size: 15px; color:#D7DEE9; font-style: italic; }

/* STYLE TAGS TO APPEAR WHEN HOVERING OVER TOP OF CARD */
.tags {
color: #A6ABB9;
opacity: 0;
font-size: 10px;
width: 100%;
text-align: center;
text-transform: uppercase;
position: fixed;
padding: 0;
top:0;
right: 0;}

.tags:hover { opacity: 1; position: fixed;}

/* IMAGE STYLE */
img { display: left; max-width: 100%; max-height: none; margin-left: auto; margin: 10px auto 10px auto;}
tr {font-size: 20px; }

/* COLOR ACCENTS FOR BOLD-ITALICS-UNDERLINE /
b { color: #C695C6 !important; } /
BOLD STYLE /
u { text-decoration: none; color: #5EB3B3;} /
UNDERLINE STYLE /
i { color: IndianRed; } /
ITALICS STYLE /
a { color: LightGray !important; text-decoration: none; font-size: 10px; font-style: normal; } /
LINK STYLE */

/* ADJUSTMENT FOR MOBILE DEVICES */
.mobile .card { color: #D7DEE9; background-color: #333B45; }
.mobile .tags:hover { opacity: 1; position: relative;}

input[type=text] {

background-color: #111111;
font-family: Menlo, baskerville, sans;
color: #39ff14;
font-weight: bold;
padding: 2px 0px 2px 5px;
border-style: solid;
border-width: 0px 0px 2px 0px !important;
border-radius: 2px;
letter-spacing: 1px;
outline-style: none;
}

.typeGood { background-color: #111111 !important; }
.typeBad { background-color: red !important; }
.typeMissed { background-color: brown !important; }