Skip to content

HTML templates

Jump to bottom
Tetsu edited this page Aug 12, 2022 · 22 revisions

How to customize the display

Open "advanced settings" in the options screen, and change "Description" in "HTML templates" section.

Mouse Dictionary employs mustache style template (It internally uses mustache.js)

In order to customize the templates, some knowledge of HTML is required. I offer some useful examples here, which you can use them just by copy-paste.

For example, these can accelerate your language learning dramatically:

  • Click and open Google image search
  • Click and search synonyms/antonyms
  • Click and search collocations

md_03

Examples

Example 1: Click headwords and open Google image search

<div style="{{cssReset}};all:initial;cursor:inherit;font-family:'hiragino kaku gothic pro', meiryo, sans-serif;">
  {{#words}}
    {{^isShort}}
      <span style="{{cssReset}};font-size:{{headFontSize}};font-weight:bold;color:{{headFontColor}}">
        <a href="https://www.google.com/search?tbm=isch&amp;q={{head}}" target="_blank" style="text-decoration:none;">{{head}}</a>
      </span>
      <span style="cursor:pointer;visibility:hidden;" data-md-pronunciation="{{head}}" data-md-hovervisible="true">🔊</span>
      <br/>
      <span style="{{cssReset}};font-size:{{descFontSize}};color:{{descFontColor}};">
        {{{desc}}}
      </span>
    {{/isShort}}
    {{#isShort}}
      <span style="{{cssReset}};font-size:{{headFontSize}};font-weight:bold;color:{{headFontColor}}">
        <a href="https://www.google.com/search?tbm=isch&amp;q={{head}}" target="_blank" style="text-decoration:none;">{{head}}</a>
      </span>
      <span style="{{cssReset}};color:#505050;font-size:x-small;">{{shortDesc}}</span>
    {{/isShort}}
    {{^isLast}}
      <br/><hr style="border:0;border-top:1px solid #E0E0E0;margin:0;height:1px;width:100%;" />
    {{/isLast}}
  {{/words}}
</div>

Example 2: Search images, synonyms, collocations

<div style="{{cssReset}};all:initial;cursor:inherit;font-family:'hiragino kaku gothic pro', meiryo, sans-serif;">
  {{#words}}
    {{^isShort}}
      <span style="{{cssReset}};font-size:{{headFontSize}};font-weight:bold;">
        <a href="https://www.google.com/search?tbm=isch&amp;q={{head}}" target="_blank" style="text-decoration:none;color:{{headFontColor}}">{{head}}</a>
        <a href="http://www.freecollocation.com/search?word={{head}}" target="_blank" style="text-decoration:none;">🍪</a>
        <a href="https://www.thesaurus.com/browse/{{head}}" target="_blank" style="text-decoration:none;">🍩</a>
        <a href="https://skell.sketchengine.eu/#result?lang=en&amp;f=concordance&amp;query={{head}}" target="_blank" style="text-decoration:none;">🍮</a>
      </span>
      <span style="cursor:pointer;visibility:hidden;" data-md-pronunciation="{{head}}" data-md-hovervisible="true">🔊</span>
      <br/>
      <span style="{{cssReset}};font-size:{{descFontSize}};color:{{descFontColor}};">
        {{{desc}}}
      </span>
    {{/isShort}}
    {{#isShort}}
      <span style="{{cssReset}};font-size:{{headFontSize}};font-weight:bold;">
        <a href="https://www.google.com/search?tbm=isch&amp;q={{head}}" target="_blank" style="text-decoration:none;color:{{headFontColor}};">{{head}}</a>
        <a href="http://www.freecollocation.com/search?word={{head}}" target="_blank" style="text-decoration:none;">🍪</a>
        <a href="https://www.thesaurus.com/browse/{{head}}" target="_blank" style="text-decoration:none;">🍩</a>
        <a href="https://skell.sketchengine.eu/#result?lang=en&amp;f=concordance&amp;query={{head}}" target="_blank" style="text-decoration:none;">🍮</a>
      </span>
      <span style="{{cssReset}};color:#505050;font-size:x-small;">{{shortDesc}}</span>
    {{/isShort}}
    {{^isLast}}
      <br/><hr style="border:0;border-top:1px solid #E0E0E0;margin:0;height:1px;width:100%;" />
    {{/isLast}}
  {{/words}}
</div>

Parameters

Mouse Dictionary window frame

Parameter Assigned value Example
backgroundColor A config value of dialog background color "#FFFFFF"
width A config value of dialog width 300
height A config value of dialog height 400
scroll A CSS value for overflow property "scroll"
systemStyles "border-radius: 5px 5px 5px 5px;"

Description

Parameter Assigned value Example
words A list of a set of a headword and description. See below
headFontColor A config value of headword font color "#000088"
descFontColor A config value of description font color "#101010"
headFontSize A config value of headword font size "small"
descFontSize A config value of headword font size "small"
cssReset CSS values for resetting styles "margin:0;padding:0;border:0;vertical-align:baseline;line-height:normal;text-shadow:none;"

Each word:

Parameter Assigned value Example
head A headword string "cat"
desc A description of the headword
isShortWord True if the headword is less than 2 letters true / false
isFirst True if true / false
isLast A true / false
isShort isShortWord && !isFirst true / false
shortDesc desc.substring(0, 30)
Clone this wiki locally