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)

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;" />
    {{/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;" />
    {{/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
head	a headword string
desc	description of the headword
isShort	true if the headword is less than 2 letters	true
shortDesc	a Shortened description string upto 30 letters
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;"