Skip to content

Custom Styles in Yomitan

Stephen Kraus edited this page Apr 22, 2024 · 26 revisions

You can change the appearance of Jitendex in Yomitan by adding custom styles. This page contains some examples.

To add custom styles to Yomitan, open the extension's settings page.

Scroll down to the "Popup Appearance" section and click the "Configure custom CSS..." button. Screenshot of the "Configure custom CSS..." button in the Yomitan settings page
Paste the custom style text into the "Popup CSS" textbox. Screenshot of the CSS textbox

Hiding Example Sentences

If for any reason you do not want to see the example sentences, you can easily hide them with CSS.

/* Hide Japanese example sentences in Jitendex and their English translations */
[data-sc-content|="example-sentence"] {
  display: none;
}

Hiding Database Links

Hyperlinks to the online database records for a given Jitendex entry are included at the bottom of every entry.

They can be hidden with CSS if you do not want to see them.

/* Hide source database links in Jitendex */
[data-sc-content|="attribution"] {
  display: none;
}
Screenshot of a the database hyperlinks at the bottom of a Jitendex entry

Hiding Lists of Forms

If you use Yomitan's "Group related terms" mode for grouping search results, then lists of forms will appear above an entry.

Jitendex also displays this information at the bottom of entries. The following CSS can be used to hide the bottom list.

/* Hide lists of forms in Jitendex */
[data-sc-content="forms"]:has(ul) {
  display: none;
}
Screenshot of the entry for コンピュータ in Jitendex which displays the list of forms twice
Clone this wiki locally