Appearance

The JsKeyboard library supports style-based appearance through CSS style sheets. You can load the theme in code by referencing the *.css file from the web page of your application:

HTML

<link href="css/VirtualKeyboard.Default.css" rel="Stylesheet" />

The code in the *.css file is easy to customize. It lists the colors of the key, the keyboard background and the color of a pressed key. This is the CSS of the Default theme:

CSS

.KeyboardKey
{
    border-radius: 4px;
    background: #f9f9f6;
    color: #3d3a3d;
    border-color: #757575;
}

.KeyboardKeyDown
{
    border-width: medium;
    background: #ebebe0;
}

.Keyboard
{
    background: #b2b2b2;
}

By default the virtual keyboard has 8 themes, which you can load with their respective files. The files are located in the css folder archived in the JsKeyboard.zip file that you download from MindFusion website:

• VirtualKeyboard.Bordo.css
• VirtualKeyboard.Default.css
• VirtualKeyboard.Fire.css
• VirtualKeyboard.Neon.css
• VirtualKeyboard.Silver.css
• VirtualKeyboard.Sky.css
• VirtualKeyboard.Smoke.css
• VirtualKeyboard.Standard.css