How do I modify the appearance of my keyboard?

Alex_Larkin · April 14, 2024, 9:06pm

Hi there,

How do I modify the appearance of my keyboard? Particularly, the roundedness of the keys and the colors in general.

I see that gff_amharic has an outstanding, beautiful keyboard:

I understand that this is controlled by CSS. If given a file path I can locate it and edit it in Notepad++. I have a little bit of experience with CSS and what I lack I can compensate for by googling.

I did find this post:

I also like how he uses gradients:

However I feel that post is quite specific to the needs of that particular keyboard, and a bit hard to follow for others.

Is there any chance someone could write some general instructions on how to modify the colors of the different types of keys, the keyboard background, the background of keys shown when longpressing, and how to increase or decrease the roundedness of the keys? Perhaps, also, how to modify the colors, font, and font size of the letters and symbols on the keys?

Thanks so much!

darcy · April 15, 2024, 12:13am

I think your first screenshot uses gff_amharic.css that goes with this line in the kmn file

github.com

keymanapp/keyboards/blob/a9d0d4ab6b4e9f9ea89b8acb318f4f1929c11c2d/release/gff/gff_amharic/source/gff_amharic.kmn#L25


      
          store(&VERSION) '15.0'

          store(&NAME) 'አማርኛ (Amharic)'

          store(&COPYRIGHT) '© 2009-2023 Geʾez Frontier Foundation'

          store(&Message) "This is an Amharic language mnemonic input method for Ethiopic script that requires Unicode 4.1 support."

          store(&CapsAlwaysOff) '1'

          store(&HotKey) '[CTRL ALT K_A]'

          store(&BITMAP) 'gff_amharic.ico'

          store(&VISUALKEYBOARD) 'gff_amharic.kvks'

          store(&TARGETS) 'any'

          store(&LAYOUTFILE) 'gff_amharic.keyman-touch-layout'

          store(&KMW_EMBEDCSS) 'gff_amharic.css'

          $keymanonly:  store(&mnemonicLayout) "1"

          c 

          c =====================End Identity Section=====================================================

          

          c =====================Begin Data Section=======================================================

          

          c The remainder of this document is formatted with a fixed width font.

          

          c ---------------------Maps of Syllabic Forms---------------------------------------------------

          c the following is universal (language neutral) these mappings can be overridden by

You can PM @dyacob (gff_amharic) or @Matthew_Lee (cameroon_azerty) about their CSS adventures.

As of now, OSK theming is on the Keyman roadmap for 19.0

Alex_Larkin · April 15, 2024, 1:20am

Thanks so much Darcy! I hadn’t thought to check the road map. Cool to hear that color customization is coming! Good idea on reaching out to the developers too.

Marc · April 17, 2024, 3:26am

Just a caveat: some of these ideas relate to general theming and should not really be changed per-keyboard – for example I would not encourage changes to keyboard background, longpress background, or stylistic changes such as key shape at this time. Treat the space within the keycap as the playground for your keyboard – colour and font.

As we work on a more generalised theming approach in v19, we may have to deprecate the existing model in keyboards and update keyboards which have customised CSS in order to allow custom global themes to integrate well with keyboard-specific tweaks.

Alex_Larkin · April 17, 2024, 11:25am

Good points! If I customize now I may be signing myself up for trouble in future versions. Thank you Marc!