Skip to content

HTML templates

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

How to customize the display

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

Mouse Dictionary emploies 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>
      <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&f=concordance&query={{head}}" target="_blank" style="text-decoration:none;">🍮</a>
      </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&f=concordance&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 reseting styles "margin:0;padding:0;border:0;vertical-align:baseline;line-height:normal;"

Each word:

Parameter Assigned value Example
head A headword string
desc A description of the headword
isShort True if the headword is less than 2 letters true
shortDesc A Shortened description string up to 30 letters
Clone this wiki locally