Hello guys,
I’m trying to change the color of the type:cloze box background from the standard yellow/red to a custom color.
Can somebody please tell me how I should go forward?
You can override the colors and any styling by using CSS on your template. Here is the default styling:
#typeans {
width: 100%;
box-sizing: border-box;
}
.typeGood {
background: #0f0;
}
.typeBad {
background: #f00;
}
.typeMissed {
background: #ccc;
}
Hi,
I have edited the code, but the problem still persists.
Are you using nightmode or any add-ons that may confict?
I completely forgot about add-ons.
It seems that the “Fill the blanks - Multiple typecloze support” was interfering with the CSS.
The problem now though is that there is essentially no cloze anymore.
The type:cloze “kasdf{{c1::jlksd}}fjk” only shows one big cloze on the front which doesnt take the classes .typeBad/Missed as well as the font either. The back of the card is fine.
I uploaded another image on imgur.
Can you share the card front template and styling tab? Preferably past the text here rather than screenshoting.
[Front]
div id=“kard”> //had to delete opening/closing tags; the code wouldnt show otherwise (here on page)
div class=“tags”>{{Tags}}</div
{{type:cloze:Text}}
[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;
}
input#typeans{
width: 100%;
box-sizing: border-box;
}
.typeGood {
background: #111111;
}
.typeBad {
background: #f00;
}
.typeMissed {
background: #ccc;
}
Front template should be the following:
<div id="kard">
<div class="tags">{{Tags}}</div>
{{cloze:Text}}
{{type:cloze:Text}}
</div>
Everything stayed the same
That works for me. I just tried out. Perhaps is the content you have in the file you are importing? _styles_for_syntax_highlighting.css
The problem was the instant feedback function of the “Fill the blanks - multiple typecloze support” addon.
in config
{
“feedback-enabled”: false,
“feedback-ignore-accents”: false,
“feedback-ignore-case”: false
}
“feedback-enabled” set to the value false prevents that the Javascript(?) will override the CSS in the styling tab.
Many thanks guillempalausalva…Your pointer to the addons really helped me out:)
Now all that is to do is to modify the JavaScript of the addon (if possible). Originally I didnt want to deactivate the feedback function completely, but reduce it to the typeface (font-color would change as soon as the typed in answer deviated from the correct answer). Although this can wait I’m guessing that the way it’s working now may be better for recall and retention then with the instant feedback function activated, but I’ll have to test that.
I don’t use this add-on and I don’t know if it will help you but for night-mode I use a lot of !important. This helps to overwrite default values.
.night_mode .cloze {
font-weight: bold;
color: red!important;
}
input {
font-size:34px !important;
color: white !important;
background-color: black !important;
border-style: hidden;
}
.typeGood { background: DarkCyan!important;
font-size:34px !important;
border-radius: 20px;
padding: 1px 5px 1px 5px;
margin: 0.25rem;
}
.typeBad { background: red!important;
font-size:34px !important;
border-radius: 20px;
padding: 1px 5px 1px 5px;
margin: 0.25rem;
}
.typeMissed {
font-weight: bold!important;
background: orange!important;
color: black!important;
font-style: bold!important;
font-size:34px !important;
border-radius: 20px;
padding: 1px 5px 1px 5px;
margin: 0.25rem;
}
I suggest to contact the add-on developer to make him aware of this conficlt.
Indeed, although is not the most desirable solution, is gets the trick done in most cases.