Bootstrap/bulma in card template?

Anki Card Design
1

Is there any way to use bootstrap/bulma in Anki card template, save for pasting it into the CSS styling section? I was wondering about “additional assets” field of sorts.

There is a 5yo thread (How to find a template's external css file?) pointing to “global css” : https://anki.tenderapp.com/discussions/ankidesktop/19694-global-css#comment_40775861 but the link is dead…

1 Like
2

If you’re looking for a way to include external css files in your Styling, yes you can do that:

  1. move the css file into your collection.media folder,
  2. make sure the file name starts with an underscore (to keep Anki media check from deleting it), e.g. _my_card_styling_stuff.css
  3. and then in each card template where you want to use it, import the file with
    @import url(“\_my_card_styling_stuff.css”);
2 Likes
3

There’s also a way to import css through javascript, which is useful when some script you use should always be accompanied by an additional css file.

if (!document.getElementById("my_card_styling_stuff")) {
  fetch("_my_card_styling_stuff.css")
    .then(async (response) => {
      const style = document.createElement("style");
      style.id = "my_card_styling_stuff";
      style.textContent = await response.text();
      document.head.appendChild(style);
    })
    .catch((error) => {
      console.error(
        "Error loading my_card_styling_stuff CSS:",
        error
      );
    });
}
2 Likes
4

Will it be synchronised and work on AnkiDroid as well?

I don’t plan on using JS :slight_smile:

5

Yes, css files in the collection.media folder get synced through AnkiWeb like any other file.

2 Likes
6

Perfect. Walks like a charm. Thank you so much! <3

7

Everything seems to be working fine with CSS, but I tried to use FontAwesome and while it work great with desktop anki, after sync, I get an error: “Error loading ”:

image
image1080×263 13.4 KB

Does font embedding / Font Awesome work with AnkiDroid?

8

I use a custom font in my card templates and it works fine in Anki and AnkiDroid. I used an actual file for that, not a cdn or similar to fetch the file.

I followed the steps as outlined in the manual: Styling & HTML - Anki Manual.

1 Like
9

Thank you!

I was following that and it seems that the problem was using subfolder for fonts.

I had collection.media/_webfonts/_fa-brands-400.woff2 and then referrenced it as

@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("_webfonts/_fa-brands-400.woff2");
}

And it couldn’t find it. I put everything in the main collection.media directory and now everything works perfecty <3 :slight_smile:

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.