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

[fralb5]

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 :

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 !

[dcz]

@fralb5

Squeekboard will restart if you killall squeekboard (Doing this, I had 2 crashes of phosh or phoc, and 1 crash of the L5, do you have the same problem?)

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.

[fralb5]

Just for the fun, I tried something else

[Zouzou]

Awesome thanks for this tuto

[fralb5]

Someone wanted the purple keyboard in this purism news

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;
}

[wednesday]

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

[buzzLightyear]

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

Refer this URL;

How to display a gif fullscreen for a webpage background?

[dcz]

Nope. Redraws don’t happen without user action.

[fralb5]

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

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;
}

[mtogop]

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).

[dcz]

Good question; I don’t know.

Try mucking around in eek_renderer.c maybe.

Some GTK expert might know more.

[Flamethrower]

Hey did anyone figure out how to do this last bit? It seems squeekboard displaces the content on the screen when opened and therefore opacity just makes it more transparent against a blank background. Is it possible to make it overlay the windows?

[Ick]

You can add a background-image to Squeekboard. It’s a not so handy workaround, but the visual result is the same.

[Flamethrower]

No but that’s not the problem because, in my case, the reason I want it to overlay the content is because my screen is quite small and it leaves but a centimeter of visible stuff, so being able to see behind the keyboard while I’m typing would allow me to see what I’m writing or even play games that require a keyboard. Or did you mean using a transparent background-image would work?

[Ick]

I did not mean transparent background since it does not work. And your idea will also not work since keyboard and other content are split. The applications do not draw any content below Squeekboard. But the newer versions of Squeekboard allow to adjust the height. You also can reduce the screen scale inside settings to get more space available.

[Marts]

@fralb5

Here you go, just copy/paste the following in the file

I’ve just done this and my keyboard hasn’t turned purple nothing has changed… why? I copied/pasted it after the paragraphs where you choose the background images. Should I have pasted it before the choice of background images?

[ASwyD2]

You have to restart squeekboard. The easiest way being to reboot the phone

[Marts]

@ASwyD2

You have to restart

I reboot but the color is the same

[ASwyD2]

You have too many ‘/’ in your path. It should be file:///home/purism/Pictures/Muave.jpeg
Edit: Nevermind
You need a } one line up from sq_button

[Marts]

@ASwyD2

u need a } one line

Cool! It works!! Thanks!