Class Names and Identifiers for On-Screen Keyboard and Other KeymanWeb Elements
The appearance of the KeymanWeb on-screen keyboard, menu amd other elements can be customized by a web designer by redefining (or adding to) the default styles. Styles and named elements all have the class name (or id) prefix kmw- joined to the object and item names, for example kmw-key-text, to set the basic style for the keycap text on each on-screen keyboard key. Multiple classes are applied to many objects, with top-level classes of tablet, phone and desktop used to set different element styles according to the device type. Unique elements, such as the menu and pop-up key frame, are named rather than referred to by class.
Most visual attributes such as text size and colour, background colour, shading, margins, etc. can be varied according to preference but developers should avoid changing positional attributes.
Class names applied to on-screen keyboard elements:
| Class name | Keyboard element |
|---|---|
| kmw-osk-frame | Outer keyboard frame |
| kmw-osk-inner-frame | Inner keyboard frame |
| kmw-key-layer-group | Keyboard layers container element |
| kmw-key-layer | Keyboard layer element |
| kmw-key-row | Keyboard row container element |
| kmw-key-square | Keyboard key container element |
| kmw-key-square-ex | Pop-up key container element |
| kmw-key | Key element |
| kmw-key-label | Key label (desktop OSK and phonetic layouts) |
| kmw-key-text | Keycap text |
| kmw-key-popup-icon | Text or graphic to indicate that a keyboard key has associated popup keys |
| kmw-spacebar-caption | Style applied to caption on spacebar |
Class names applied to different types of keys:
| Class name | Key style |
|---|---|
| kmw-key-default | Default |
| kmw-key-shift | Shift key |
| kmw-key-shift-on | Active shift key |
| kmw-key-deadkey | Dead key |
| kmw-key-blank | Blank key (unmapped) |
| kmw-key-hidden | Hidden key (spacer) |
| kmw-key-touched | Active (touched) key |
Element identifiers and class names for desktop on-screen keyboard elements:
| Class name or id | Desktop OSK element |
|---|---|
| kmw-title-bar | OSK title bar |
| kmw-title-bar-caption | OSK title bar caption (keyboard name) |
| kmw-title-bar-actions | Container for image elements in OSK title bar |
| kmw-title-bar-image | Active image element in OSK title bar |
| kmw-footer | Desktop OSK footer element |
| kmw-footer-caption | Caption in desktop OSK footer |
| kmw-footer-resize | Style for resizing icon |
| kmw-osk-static | Container style for non-sizable keyboards |
| kmw-osk-none | Empty keyboard container style |
| #kmw-pin-image | Style of icon to return OSK to default position |
| #kmw-config-image | Style of icon to open configuration options window |
| #kmw-help-image | Style of icon to open keymanweb help window |
| #kmw-close-button | Style of close button image |
Element identifiers and class names applied to pop-up key container elements:
| Class name or id | Element |
|---|---|
| #kmw-popup-keys | Pop-up key container |
| arrow-border | Style setting callout arrow border |
| arrow-content | Style setting callout arrow background |
Element identifiers and class names applied to language menu elements:
| Class name | Menu element |
|---|---|
| #kmw-language-menu | Language menu container element |
| #kmw-language-menu-background | Hidden background layer preventing unwanted action while selecting a language or keyboard. |
| #kmw-menu-scroll-container | Container for language list scroller |
| #kmw-menu-scroller | Language list scroller |
| #kmw-menu-index | Container for language index |
| #kmw-menu-footer | Placeholder at bottom of scroller |
| kbd-list | Style for language list element |
| kbd-list-open | Style for list element when expanded |
| kbd-list-closed | Style for list element when not expanded |
| kmw-list-entry | Language entry in language list |
| kmw-single-entry | Single keyboard entry in language list |
| current | Active keyboard entry in language list |
| selected | Touched entry in language list |
Message box class names:
| Class name | Element |
|---|---|
| kmw-wait-box | Message box |
| kmw-wait-background | Message box background |
| kmw-wait-text | Message box wait text |
| kmw-wait-graphic | Message box wait icon |
| kmw-alert-text | Message box alert text |
| kmw-alert-close | Message box close icon |
The default styles for any released build of KeymanWeb can be found on line, for example, https://s.keyman.com/kmw/engine/339/osk/kmwosk.css for Build 339.
