Share with friends and colleagues on social media

SLED 12 ships with GNOME 3.10 which means GDM 3. GDM 3 provides very little scope for customising how it looks. In this article I’ll describe some pros and cons of the officially provided ways of customising GDM 3 and how you can go further customising by hacking.

Testing changes will require you to repeatedly restart GDM, so you’ll want to do things whilst logged in to the machine via SSH or non-graphical session. You need to be root to make all the changes described.

Before you proceed install the gnome-backgrounds and ImageMagick packages as you’ll need them later on.

First let’s look at what options are provided by GNOME.

You can set a banner message. Create /etc/dconf/db/gdm.d/99-initech containing

[org/gnome/login-screen]
banner-message-enable=true
banner-message-text="If you could log in, that'd be great"

After making any changes to the file you need to update dconf and restart GDM

$ dconf update && systemctl restart display-manager

Whilst this is potentially useful, it is unfortunately not as useful as it could be. Disable the user list by modifying /etc/dconf/db/gdm.d/99-initech to look like

[org/gnome/login-screen]
banner-message-enable=true
banner-message-text="If you could just log in, that'd be great"
disable-user-list=true

Update dconf and restart GDM again. Notice how not only has the user list disappeared but your banner message has too. So if like me you want to disable the user list, the banner message option is useless. At time of writing GNOME documentation makes no mention of this but there is a bug logged in GNOME’s bugzilla for it. As far as I can tell the problem is due to how in the structure of the login screen the banner message is a child element of the user list. Look at lines 426-437 in /usr/share/gnome-shell/js/gdm/loginDialog.js

There’s one other dconf setting you can use to change the look of the login screen which is set a logo

[org/gnome/login-screen]
banner-message-enable=true
banner-message-text="If you could just log in, that'd be great"
disable-user-list=true
logo='/opt/initech/initechlogo.png'

This isn’t used by default on SLED 12. If you set it your image will appear centred towards the bottom of the screen. Note that the image will be displayed at a set size. E.g. In this screenshot the logo file is 400×270

gdmlogodefault

As you can see, it’s not 400×270 when displayed. So if your logo doesn’t look good at this size and/or you want it displayed larger than GDM displays it this option some hacking is needed. Also notice that there’s big SUSE logo next to your logo. For some reason, possibly because of the aforementioned resizing issue, SUSE have decide the way to get their logo on there is by way changing the upstream GDM background image. (More on this later.) A downside to this decision is that if you use the logo option yourself your logo sits under a comparatively huge SUSE logo.

And that’s it for officially provided options. Just three. One of them is rendered useless by another and one of them is rendered far less useful due to modifications made by SUSE. In earlier versions of GDM 3 there was another dconf option which allowed you to set a background image but that was removed for reasons I’ve never seen explained.

Now to the hacking.

If you search on Google for info about how to change the background you’ll find people suggesting that you replace /usr/share/gnome-shell/theme/noise-texture.png with your own image. That works but the posts I found about it had some severe limitations. I won’t go in to those limitations here because, in SLED 12 SUSE have actually replaced noise-texture and removed some of the limitations. If you look in /usr/share/gnome-shell/theme/gnome-shell.css for the reference to noise-texture.png you’ll see it’s commented out along with a few other lines and the background used is sle-background.png. So SUSE have already done some hacking on GDM, but it can be taken further. There’s been a lot of words so far before going any further, let’s have a picture

gdmbackgroundwaves

gnome-shell.css is part of the gnome-shell package so any modifications you make to it will get wiped out by an update to the gnome-shell package. As such you need to script the modification so that it can be easily re-applied. (You could call this script from boot.local)

Unknown:~ # cat hack_gnome_shell_theme_for_gdm_background
#!/bin/bash

cssfile=/usr/share/gnome-shell/theme/gnome-shell.css;

# Do not change these during production!
css_comment_start=’BEGIN INITECH RULES’;
css_comment_end=’END INITECH RULES’;

# remove our CSS rules
sed -i “/\/\* ${css_comment_start} \*\//,/\/\* ${css_comment_end} \/\*/d” “${cssfile}”;

# add our CSS rules
# background-size: cover cause picture to be scaled to fit window (screen)

cat >> “${cssfile}” << EOF
/* ${css_comment_start} */
/* written by $0 */

#lockDialogGroup {
background-color: black;
background-image: url(file:///opt/initech/gdmbackground.jpg);
background-size: cover;
background-repeat: no-repeat;
/* for reasons i haven’t tried to discern i discovered that setting border fixes issue where background image is ‘wrapped’ when using backgrounds of certain dimensions on monitors of certain resolutions */
border:solid transparent 1px;
}

.login-dialog {
border: none;
background-color: transparent;
background-image: url(file:///opt/initech/gdmblackoverlay.png);
background-repeat: no-repeat;
}

/* add a black background to the panel at top of screen to ensure contents is visible on light coloured backgrounds */
#panel.login-screen, #panel.unlock-screen {
background: rgba(0,0,0,0.6);
}

/* ${css_comment_end} */
EOF
Unknown:~ #

The images referenced can be created with

$ mkdir -p /opt/initech/
$ convert -size 380x380 xc:transparent -fill "rgba(0,0,0,0.8)" -draw "roundrectangle 0,0, 380,380 18,18" /opt/initech/gdmblackoverlay.png
$ ln -s /usr/share/backgrounds/gnome/Mirror.jpg /opt/initech/gdmbackground.jpg

A symbolic link is specified for the background image so you can changed that without modifying the script and also because it can be used in another hack mentioned below. If you change what the symbolic link points at you’ll need to restart GDM to see the change. The radius of the rectangle corners is 18 as that’s what’s used in several other GNOME Shell elements. (Search gnome-shell.css for ‘Common radii’.)

gdmblackoverlay.png is used to ensure that the white text used on the login screen is easily readable when a light coloured background is used. You could, as I do, make it larger and include your company logo and/or other useful information in it.

I mentioned the logo dconf option earlier and that if you wanted to get your logo larger some hacking is needed. The trick here is to not set the logo option in dconf, but make use of the element in GDM. In the hack_gnome_shell_theme_for_gdm_background script add these lines along with the other CSS rules

.login-dialog-logo-bin {
width:200px;
height:200px;
background:url(file:///opt/initech/initechlogo.png);
background-size:cover;
background-repeat:no-repeat;
}

and the result is

gdmlogohacked

That example is lacking aesthetically, but it shows the concept.

One last hack to the login screen is to remove the text under the usercode field which reads ‘e.g. domain\user’ This isn’t a GNOME thing, it’s something SUSE have added for SLED. Some people will surely configure SLED 12 such that logging in will require people to prefix their usercode with a domain, but that message is there out of box when the concept of logging in with domain\user doesn’t apply. It baffles me why it was thought a good idea to have it always displayed and I think it has the potential to cause confusion. So I get rid of it with

$ sed -i 's/(e\.g\., domain\\\\user)/ /' /usr/share/gnome-shell/js/gdm/loginDialog.js

Like gnome-shell.css changes to loginDialog.js will be lost if the package it belongs to gets updated so you may want to add the command to the hack_gnome_shell_theme_for_gdm_background script.

This guide has got quite long already, but there’s one last thing. You can also change the background of the screen shield to match the background you set for GDM. The screen shield is what comes down after a while of inactivity and displays the time and date. You don’t actually see it much with GDM because the screen blanks out as soon as it kicks in, but you might want to change it anyway as it’s very easy to do so as you can do it with dconf by adding a couple of lines to the /etc/dconf/db/gdm.d/99-initech file

[org/gnome/desktop/screensaver]
picture-uri='file:///opt/initech/gdmbackground.jpg'

(Note the filename is the symlink I created earlier.) You’ll probably want to see the effect of that without sitting and staring at GDM carefully not providing any sort of input until the screen shield appears, so you can trigged the screen shield on demand with

$ sudo -u gdm $(grep -z DBUS_SESSION_BUS_ADDRESS /proc/$(pidof gnome-session)/environ) dbus-send --session --dest=org.gnome.ScreenSaver --type=method_call --dest=org.gnome.ScreenSaver /org/gnome/ScreenSaver org.gnome.ScreenSaver.Lock

As soon as you run this you’ll get a brief glimpse of the screen shield then the screen will blank. If you wiggle the mouse the login screen will reappear. I’ve found the trick to being able to see the screen shield for any length of time is to un-blank the screen by moving the mouse slightly horizontally but NOT at all vertically. (I know, right?) Your experience may vary. The white text used for the time and date is drop shadowed and is very legible even if you change the background to plain white, but if you feel so inclined you can add a background to it like is behind the login elements. The css to add to the hack_gnome_shell_theme_for_gdm_background script is

.screen-shield-contents-box, .screen-shield-arrows {
background:rgba(0,0,0,0.8);
border-radius:18px;
padding:18px;
}

Bear in mind that this affects more than just GDM as the screen shield can also be displayed when a user session is locked. (When shown in a user session context, notifications may also be displayed. They are displayed within the screen-shield-contents-box element which expands to accommodate them.) If you want to change the colour of the time and date you can add

.screen-shield-clock-time, .screen-shield-clock-date {
color: red;
}

(Visited 1 times, 1 visits today)

Share with friends and colleagues on social media
Tags: , ,
Category: SUSE Linux Enterprise Desktop, Technical Solutions
This entry was posted Friday, 14 November, 2014 at 4:24 pm
You can follow any responses to this entry via RSS.

Comments

  • mikewillis says:

    The issue of the banner message not being visible if the user list is disabled is fixed upstream and apparently fixed in SLED 12 SP1 in this update
    https://download.suse.com/Download?buildid=QBi1agSeT24~
    “- Display banner message even when user list is disabled. (bsc#875481)”

    I’ve not verified this myself. Due to a change of employment I no longer use SLED. I only noticed because I got an automated Bug Fix Notification email from SUSE.

  • rbeldin says:

    Everything new is old again. This harkens back to the days of hacking .Xresources and playing with xrdb under xdm and other display managers, only now playing with .css and js files. 😉

    Is there a way to completely disable the clock displayed on the lock screen?

    I can see /usr/share/gnome-shell/js/ui/screenShield.js has the code to create it. I did the following:

    – edit the file /usr/share/gnome-shell/js/ui/screenShield.js

    – comment out these lines:

    // this._wallClock = new GnomeDesktop.WallClock({ time_only: true });
    // this._wallClock.connect(‘notify::clock’, Lang.bind(this, this._updateClock));

    // this._updateClock();

    – systemctl isolate multi-user.target
    – systemctl isolate graphical.target

    This, of course, definitely falls into the realm of ‘hack’. Is there some tricky js-method to override this class and disable the clock in a different way?

  • ehanley says:

    I also would like to disable the clock on the lock screen.

  • Leave a Reply

    Your email address will not be published. Required fields are marked *