Styling for Anki

[ThomasOctavian]

Hello Bryan and Community,

I'm currently in the middle of your video 'Best Ways to Learn Javascript with Anki & Obsidian'; at around the 5 minute mark you advised your viewers post here if we're interested in getting our hands on the styling you have set in Anki. I'd love to get my hands on it when you find the time.

Love what you do, let me know if you can help.

[tallguyjenks]

sure! here's the Anki CSS behind my cards for

basic

.card {
  font-family: fira code;
  font-size: 20px;
  text-align: center;
  color: #ebdbb2 !important;
  background-color: #282828 !important;
}
#spacer, #answer {
background-image: linear-gradient(to right, #282828, #d65d0e, #282828);
}

#spacer, #answer {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
}

#spacer::after, #answer::after {
  content: 'ᛟ';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: #689d6a;
  background-color: #282828;
}

close deletion

.cloze {
 font-weight: bold;
 color: #076678;
}
.nightMode .cloze {
 color: #458588;
}
.card {
  font-family: fira code;
  font-size: 20px;
  text-align: center;
  color: #ebdbb2 !important;
  background-color: #282828 !important;
}
#spacer, #answer {
background-image: linear-gradient(to right, #282828, #d65d0e, #282828);
}

#spacer, #answer {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
}

#spacer::after, #answer::after {
  content: 'ᛟ';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: #689d6a;
  background-color: #282828;
}

Programming Typing Cards

.card {
  font-family: fira code;
  font-size: 20px;
  text-align: center;
  color: #ebdbb2 !important;
  background-color: #282828 !important;
}
#spacer, #answer {
background-image: linear-gradient(to right, #282828, #d65d0e, #282828);
}

#spacer, #answer {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 1px;
}

#spacer::after, #answer::after {
  content: 'ᛟ';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: #689d6a;
  background-color: #282828;
}

.typeGood {
  background-color: #427b58;
}
.typeBad {
  background-color: #9d0006;
}
.typeMissed {
  background-color: #928374;
}

a {
  color: #d65d0e !important;
}
strong {
  color: #d79921;
}

[alcopuro]

hey bryan, is there also html code for the fore- and background of the flashcards, which you named above?

[tallguyjenks]

oh yeah, here's what i have

basic

Front

{{edit:Front}}

Back

{{FrontSide}}

<hr id=answer>

{{edit:Back}}

close deletion

Front

{{cloze:Text}}

Back

{{cloze:Text}}
<hr id=spacer>
{{Back Extra}}
<br>

<br>

Programming Typing Cards

Front

{{edit:Front}}
<br><br>
{{type:Back}}

Back

{{FrontSide}}

<hr id=answer>
<br><br>
<strong>Additional Information:</strong>
<br><br>
{{edit:Additional Info}}
<br><br>
<hr id=spacer>

[BeJa1996]

Hello Bryan,

How did you style the tags in such a nice way (https://youtu.be/OqVs1Sw-Ahg?t=4938)

[tallguyjenks]

i cant remember, it's been a long time, it may have been an anki plugin