TUTORIAL: How to customize the look of the L5 keyboard (squeekboard)

Hardware Librem 5
1

Hello

Here are some hints to customize the look of squeekboard

In all my screenshots, layouts are AZERTY, because my setup is FR, those modifications won’t change your keyboard layout, only the colors and images

You need to edit/create the file /home/purism/.config/gtk-3.0/gtk.css

you have 2 main component to edit

  • The settings of the keys are in sq_button
  • The settings of the view holding the keys are in sq_view

So here an exemple of what you can do, the Ctrl key is locked :
space

It’s done with the following CSS code:

sq_button {
    background-color: rgba(0, 0, 0, 0.5); /* Background of the key, black with 50% transparency*/
    color: #00c0c0; /* color of the characters in the key */
    border-radius: 50% 20% / 10% 40%;
}

sq_view {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
                    url('file:///home/purism/path/to/background.jpg');
}

sq_button.altline,                                                                                                                         
sq_button.special,                                                                                                                         
sq_button.wide {
    background-color: rgba(0, 0, 0, 0.3); /* Background of the key */
    color: #00a0a0; /* color of the characters in the key */
  border-color: #202020;
}

sq_button:active,
sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
  /* Settings of the keys when you press a key */
  background: #747077;
  border-color: #96949d;
}

sq_button.locked {
  /* Settings of the keys like 'ctrl' or 'alt' */
  background: #ffffff;
  color: #2b292f;
}

#Return {
  border-color: #008080;
}

Of course it’s just an exemple you have some other regular properties that you can use (see style.css)

If you want, you can put an image un the backgroupd of the keys with background-image instead of the background-color in the sq_button block

For my tests, I opened the terminal (which popup squeekboard) and because I don’t know how to restart properly squeekboard, 2 ways (someone has a third one?):

  • Restart your librem5 (boring, useless, cutting ssh)

Or

  • Squeekboard will restart if you killall squeekboard (Doing this, I had 2 crashes of phosh or phoc, and 1 crash of the L5 — I probably did hit the power button while phosh restarted —, do you have the same problem?)

Now your turn ! Share your excentric one !

10 Likes
2

This is, sadly, expected. Squeekboard is managed by gnome-session, which assumes that something went horribly wrong when Squeekboard exits, and will restart phosh.

I want to turn Squeekboard into a systemd daemon, so that you can restart or replace it, but I haven’t had the time to do it yet.

9 Likes
3

Just for the fun, I tried something else

killbill_scr

5 Likes
4

Awesome thanks for this tuto :star_struck:

5

Someone wanted the purple keyboard in this purism news

mauve_scr

Here you go, just copy/paste the following in the file ~/.config/gtk-3.0/gtk.css

sq_button {
    background-color: #362585; /* Background of the key */
    color: #ffffff; /* color of the characters in the key */
}

sq_view {
    background-color: #000000;
}

sq_button.altline,                                                                                                                              
sq_button.wide,
sq_button.special {
  background: #151233;
}

sq_button:active,
sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
  /* Settings of the keys when you press a key */
  background: #747077;
  border-color: #96949d;
}

sq_button.locked {
  /* Settings of the keys like 'ctrl' or 'alt' when locked */
  background: #ffffff;
  color: #2b292f;
}

#Return {
    background: #bb1a2a;
    border-color: #ff0000;
}

#Return:active {
    background: #1c71d8;
    border-color: #3584e4;
}
3 Likes
6

does it also work if you use .gif as keyboard background? Would it display the animated gif??

7

Looks like it will work. ```
background-image: ur(file://home/purism/path/to/background.gif);

Refer this URL;

8

Nope. Redraws don’t happen without user action.

9

I improved my initial “space” keyboard, and also here an IOS-like style for the keyboard

IOS-light

sq_button {
    background-color: #ffffff; /* Background of the key */
    color: #000000; /* color of the characters in the key */
    border-color: #909090;
    border-style: none none outset none;
    border-radius: 12%;
}

sq_view {
    background-color: #d6d7dd;
}

sq_button.altline,                                                                                                                         
sq_button.special,                                                                                                                         
sq_button.wide {
    background-color: #b3b8c2; /* Background of the key */
    color: #000000; /* color of the characters in the key */
}

sq_button:active {
    background: #b3b8c2;
}

sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
    background: #ffffff;
}

sq_button.locked {
  /* Settings of the keys like 'ctrl' or 'alt' */
    background: #000000;
    color: #ffffff;
    border-style: unset;
}

#Return {
  border-color: #909090;
  border-style: none none outset none;
}
10

Hi,

Is there a way to make the keyboard transparent so that the wallpaper image is in the background? I’ve set my wallpaper up to be randomized every time, so I don’t want to hardcode an image in the squeekboard css. Currently, if I try to give background: rgba(0, 0, 0, 0.8); it makes grey (so it makes the transparency over some white background).

11

Good question; I don’t know.

Try mucking around in eek_renderer.c maybe.

Some GTK expert might know more.

1 Like