Adding an Opaque Background to AnKingOverhaul?

Hi! Forgive me if something similar has been asked before, I tried to search through the topics and wasn’t able to find anything…

I created my own note type prior to using AnkiHub, the most important feature of which (to me) is an opaque background behind the text/notes. I use a somewhat “busy” background, so this really helps me to be able to see my content, haha!

I’m wondering if it’s possible to insert the code for this into the AnKingOverhaul note type on my own? If so, could someone show me where in the HTML I could insert it, and also would it be overwritten when I sync?

Image below of my note type!

Thanks :slight_smile:

Hello,

If you know the code you’d like to insert it can be inserted into the styling of the card.

From the browser, you can select a card of the note type you’d like to edit, click ‘Cards.’

image

From there, you have Front Template, Back Template, and Styling.

image

In each field there is a note that modifications beneath a certain line will not be modified by Ankihub or the Anking addons:

image

Please let me know if you have any other questions. :slight_smile:

Thanks for your response!

It doesn’t look like that line is present in the “styling” section? I reset the note, too, just to make sure I hadn’t accidentally deleted it. Am I looking in the wrong place?

If the element you’re hoping to adjust is intended to affect the styling, most likely you’ll want to include the code in the styling section itself, typically via CSS (rather than HTML).

That being said, syncing won’t by itself alter the styling of your card. Updating the note type can do that, though it’s typically something that would be done manually and isn’t likely to occur with typical syncing (it could happen, for example, if you install Anki on a new machine or something similar).

I’m not a CSS expert (nor HTML), so beyond that I’m not sure I can give any specific recommendations for how to employ specific code.

Alternately, and I realize this may not be the solution you’re looking for, it is possible to suspend the background on the review screen. Again, I know that’s maybe not the solution you’re looking for but it might be an alternate route that would also solve the problem. In so doing, with the Custom Background addon, you can choose to have your background visible on the main screen and/or the review screen.

For example, I have a background that appears on my main screen:

But it does not appear on my review screen at all (which I prefer, for precisely the reason you mentioned above in that it would be too visually ‘busy’ for my liking):

Let me know if any of that is helpful, and if I can answer any other questions. :slight_smile:

I appreciate your response!