HTML templates

How to customize the display

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

Mouse Dictionary employes mustache style template (It internally uses Hogan.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.

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&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&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&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.co.uk/run.cgi/wordsketch?lpos=&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&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.co.uk/run.cgi/wordsketch?lpos=&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