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

We have two new locations for Keyman technical support:

The Tavultesoft Forums are now read only.


# KeymanWeb - change colour of the header & footer & toggle button   2014-12-15 16:13:18.923
Matt
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?

# RE: KeymanWeb - change colour of the header & footer & toggle button   2014-12-18 15:53:23.837
Matt
Any suggestions would be appreciated.
# RE: KeymanWeb - change colour of the header & footer & toggle button   2014-12-18 16:12:00.150
Marc Durdin
Tavultesoft Staff
I'll ask John to take a look when he gets a chance.
# RE: KeymanWeb - change colour of the header & footer & toggle button   2014-12-19 10:17:22.480
Tavultesoft
Tavultesoft Staff
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.
# RE: KeymanWeb - change colour of the header & footer & toggle button   2014-12-20 05:59:29.050
Matt
Thank you.

Appreciate your assistance. That works well.