Skip to content

HTML templates

Jump to bottom
tetsu edited this page Mar 17, 2019 · 22 revisions

How to customize the display

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

Examples

Example 1: Click headwords and open Google image search

<div style="all:initial;cursor:inherit;font-family:'hiragino kaku gothic pro', meiryo, sans-serif;">
  {{#words}}
    {{^isShort}}
      <span style="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="font-size:{{descFontSize}};color:{{descFontColor}};">
        {{{desc}}}
      </span>
    {{/isShort}}
    {{#isShort}}
      <span style="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="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="all:initial;cursor:inherit;font-family:'hiragino kaku gothic pro', meiryo, sans-serif;">
  {{#words}}
    {{^isShort}}
      <span style="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="font-size:{{descFontSize}};color:{{descFontColor}};">
        {{{desc}}}
      </span>
    {{/isShort}}
    {{#isShort}}
      <span style="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="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 3 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"
Clone this wiki locally