CSS Injector [Official Support]

bradydjohnson · December 15, 2022, 3:30am

How do I change the size of the tags in the Tags field? I imagine that’s in the field.css file, right? What are the attributes that I use?

kleinerpirat · December 15, 2022, 9:18am

It’s actually editor.css

Try the class .tag for the wrapper of a single tag. It also has some children. I advise to use AnkiWebView Inspector to find your selectors.

ijgnd · January 10, 2023, 12:13pm

The add-on does not seem to work in 2.1.55 or newer. I’d be grateful if you could update it when you have some time. Your add-on is very useful because it allows me to make long notetypes manageable by adding some additonal spacing between some fields

Or do I just need different css rules? If so I’d appreciate a hint.

In 2.1.54 I use

:root[mid="9999999999999"] .fields > div:nth-child(6) .editor-field {margin-top: ...}

P.S. Your work on the 2.1.55 GUI looks great.

ijgnd · February 15, 2023, 6:28pm

Just bumping this topic. I’ve forgot multiple times about planned add-on updates. Maybe (I read that were you busy the last few weeks) it’s the same with you. Sorry for bothering you.

mlmmr · September 12, 2023, 12:42pm

Can this addon (or any other?) change tag text to smaller font size in browser, as well as display full parent deck for subdecks (not the shortened ...::subdeck)?

So instead of ...::short show the full example::short as seen on hover here:

I tried using the AnkiWebView Inspector but couldn’t figure out how to accomplish this.

Aq6b3az · February 18, 2025, 9:40pm

Hello, @kleinerpirat , it appears that the CSS Injector add-on is no longer functioning correctly on the latest Anki versions (24.11 and 25.02).

Regression Description:
After updating to 25.02, I noticed that the Browser and Editor menus are rendered differently compared to 24.06.03 while using JPMN (note type for learning Japanese).

24.06.03:

25.02:

Observed Behavior:

In 25.02 , all fields are shrunk to fit, and only one field is displayed per line
In contrast, on 24.06.03 , fields occupy the full horizontal space, and certain fields (e.g., PAOverride , PAOverrideText , AJTWordPitch ) are rendered on the same line, forming a group as defined by the following CSS:

[notetype="JP Mining Note"] .fields {
  /* Word, WordReading */
  /* PAOverride, PAOverrideText, AJTWordPitch */
}

Additional Context:
A similar issue has been reported on the add-on page:

Seems to break with 24.10rc1? I have a bunch of these rows in editor.css : [notetype=“…”] .fields > div:nth-child(9) {width: 25%}, but it doesn’t change the field width anymore.

This suggests that the CSS rules for field widths and grouping are no longer being applied as expected in the newer Anki versions.

Could you please investigate this issue? Let me know if you need additional details.

Also, @dae , (apologies for the ping), could this issue potentially be caused by a regression on the Anki side in the latest updates (24.11 or 25.02 )?

Thank you for your time and effort!

Aq6b3az · February 18, 2025, 10:03pm

Steps to reproduce:

install the JPMN: Setup: Installing - jp-mining-note
install and configure the CSS Injector add-on: Setup: Anki - jp-mining-note
stretch the right menu all the way to the left
observe the discrepancy, with the 24.06.03 in the example JPMN-Examples deck:

image1920×1080 158 KB

Shigeyuki · February 19, 2025, 12:11pm

Kleinerpirat has been offline for over 1 year, and the official Anki basically does not support Add-ons.

In my opinion Css-injector is working fine. CSS-injector is an advanced add-on that needs you to edit HTML and CSS by yourself. If Anki is updated you need to check and update the code yourself. (So this add-on is usually broken periodically when Anki is updated.)

This my code will probably work with the latest Anki. (editor.css)

.fields {display: inline-block !important;}
.field-container {
    display: inline-block !important;
    padding: 2px 2px !important;
}

[notetype="Your notetype name"] .fields > *:nth-child(1) > div {
    width: 10%;
}

[notetype="Your notetype name"] .fields > *:nth-child(2) > div {
    width: 20%;
}

[notetype="Your notetype name"] .fields > *:nth-child(3) > div {
    width: 20%;
}

[notetype="Your notetype name"] .fields > *:nth-child(10) > div {
    width: 100%;
}

Maybe you need to report problems directly to the developer of jp-mining-note.
Github: jp-mining-note/issues

If you want multiple fields I recommend using the “Multi-column note editor” add-on. It doesn’t need to edit the code so it’s easy to use. Multi-column note editor (2025 edition)

Aq6b3az · February 19, 2025, 12:24pm

I appreciate you taking the time to write a suggestion, but the thing is that JPMN editor.css is already have the width computation (same as you wrote in your answer):

/* css to collapse certain fields into the same row */
[notetype="JP Mining Note"] .fields {
  display: inline-block !important;
}
[notetype="JP Mining Note"] .fields > div {
  display: inline-block !important;
  width: 100%;
  padding-bottom: var(--field-gap);
}

/* index number of where the field group starts (all indices start at 1) */
/* group of 2 */
/* group of 3 */
/* group of 11 */
/* group of 4 */
[notetype="JP Mining Note"] .fields {
  /* Word, WordReading */
  /* PAOverride, PAOverrideText, AJTWordPitch */
}
<...>
[notetype="JP Mining Note"] .fields > div:nth-child(2) {
  width: calc(100%/2);
  padding-left: 0px;
}
[notetype="JP Mining Note"] .fields > div:nth-child(3) {
  width: calc(100%/2);
  padding-left: var(--field-gap);
}
[notetype="JP Mining Note"] .fields > div:nth-child(4) {
  width: calc(100%/3);
  padding-left: 0px;
}
[notetype="JP Mining Note"] .fields > div:nth-child(5) {
  width: calc(100%/3);
  padding-left: var(--field-gap);
}
[notetype="JP Mining Note"] .fields > div:nth-child(6) {
  width: calc(100%/3);
  padding-left: var(--field-gap);
}
<...>

So it seems to me that this is a regression on Anki’s side

Shigeyuki · February 19, 2025, 12:50pm

This code is working fine on my device, I don’t know why.

/* css to collapse certain fields into the same row */
[notetype="JP Mining Note"] .fields {
    display: inline-block !important;
  }
  [notetype="JP Mining Note"] .field-container {
    display: inline-block !important;
    width: 100%;
    padding-bottom: var(--field-gap);
  }
  
  /* index number of where the field group starts (all indices start at 1) */
  /* group of 2 */
  /* group of 3 */
  /* group of 11 */
  /* group of 4 */
  [notetype="JP Mining Note"] .fields {
    /* Word, WordReading */
    /* PAOverride, PAOverrideText, AJTWordPitch */
  }
  <...>

  [notetype="JP Mining Note"] .fields > *:nth-child(2) > div  {
    width: calc(100%/2);
    padding-left: 0px;
  }
  [notetype="JP Mining Note"] .fields > *:nth-child(3) > div  {
    width: calc(100%/2);
    padding-left: var(--field-gap);
  }
  [notetype="JP Mining Note"] .fields > *:nth-child(4) > div  {
    width: calc(100%/3);
    padding-left: 0px;
  }
  [notetype="JP Mining Note"] .fields > *:nth-child(5) > div  {
    width: calc(100%/3);
    padding-left: var(--field-gap);
  }
  [notetype="JP Mining Note"] .fields > *:nth-child(6) > div {
    width: calc(100%/3);
    padding-left: var(--field-gap);
  }

Aq6b3az · February 19, 2025, 1:46pm

Wait a minute, what do you mean by saing

This code is working fine on my device, I don’t know why.

Have you followed the Steps to reproduce? After that you have correctly displayed browser as in screenshot I’ve posted above (24.06.03)?

If it is the case, can you please provide a screenshot of your browser menu?

I am aware of at least 2 people who also affected by this issue.

Upd: Now I see, you have changed the [notetype="JP Mining Note"] .fields > div:nth-child(2) parts to [notetype="JP Mining Note"] .fields > *:nth-child(2) > div.
And

[notetype="JP Mining Note"] .fields > div {
  display: inline-block !important;
  width: 100%;
  padding-bottom: var(--field-gap);
}

To

[notetype="JP Mining Note"] .field-container {
    display: inline-block !important;
    width: 100%;
    padding-bottom: var(--field-gap);
  }

Do these changes fix both issues (shrink to fit and multiple fields on one line)? How do these fixes work?

Shigeyuki · February 19, 2025, 2:29pm

Hmm? I may misunderstand something your explanation. With my fixed version of the code it looks like this on Anki25.02, Win11. editor.css contains only the short code I modified, so I did not use the default editor.css of jp-mining-note, and field.css has no content.

I tried to reproduce your procedure but it did not include the function to make the field multiple in the first place. So you may have customized it, or maybe the deck version is different.

If so I might be able to figure something out if you provide me with your editor.css and field.css code. (But the CSS of this deck is complicated and I don’t know if I can fix it, the author of the original deck should be able to fix it easily, so I recommend you to contact the author as I already mentioned.)

Aq6b3az · February 19, 2025, 2:39pm

I apologize for the misunderstanding - it was on my part.

Let’s start over: You installed JPMN , pasted only the short code snippet you provided earlier into Anki2\addons21\181103283\user_files\editor.css, and that resolved the issues I described. Is that correct?

Shigeyuki · February 19, 2025, 2:59pm

I think it’s a bit different. I used the procedure you provided but the same functionality as yours was not included in the deck at the first place, I could not reproduce the problem so I deleted it.

Next I tried fixing the problem in AnkiWeb’s comment ([notetype=“…”] .fields > div:nth-child(9) {width: 25%}), and it worked so I pasted that code.

Then you provided your code, I tried to repair that code the same way and it worked on my device.

In short, I only repaired the code in AnkiWeb’s comment and the short code you provided, not the JP Mining Note.

Topic		Replies	Views
Change default HTML/CSS template in editing mode Suggestions	5	4278	April 4, 2022
Editor: apply font color, background color, custom class, custom style [Official thread] Add-ons	94	7766	March 5, 2025
Can you change whether a note has html rendered after import? Help	3	90	July 10, 2024
Extended html editor for fields and card templates (with some versioning) [Official Support Thread] Add-ons	5	632	September 6, 2022
Is there an add-on to style field names? Add-ons	3	384	August 2, 2020

CSS Injector [Official Support]

Related topics