Topic KeymanWeb - change colour of the header & footer & toggle button

I have keymanweb 2.0 build 374.

How do I change the header & footer of the keyboard and the toggle button from the brown to a blue colour (#3498db) so the KeymanWeb will better integrate to my site?

Any suggestions would be appreciated.

I'll ask John to take a look when he gets a chance.

You can change the OnScreen Keyboard header and footer backgrounds quite easily by inserting the following CSS into your page header:

:

.desktop .kmw-title-bar, .desktop .kmw-footer {background-color: #3498db;}

But that won't change the border around the actual keyboard, which will remain brown unless you add further CSS that is specific to the keyboard being used:

:

.desktop .kmw-osk-inner-frame.kmw-keyboard-us {border: 2px solid #3498db;}

Note that the keyboard class name must be appended (with no space) after the element class name.

You can find a reference to all of the OSK classes that can be overridden at:

http://help.keyman.com/developer/engine/web/2.0/reference_kmw20_osk_classes.php

Changing the button CSS is more problematic, as the button was not designed to have the style overridden, and the images on the button would need to be replaced, as well as the background and border colors. Although it would require additional javascript (not just CSS), for a specific site where only one or two keyboards are needed and you want matching appearance, it is best to implement a custom UI that simply enables and disables the keyboard rather than using one of the standard UIs that provide the full language selection menu capability.

Thank you.

Appreciate your assistance. That works well.