info for customizing Ubuntu 20.04 gdm3 theme
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Adam Piontek 93974f105d added notes on CSS for custom login background image 5 months ago
flat-remix-73k fleshed out script and instructions for gresource extraction, modification, and compilation 5 months ago
README.md added notes on CSS for custom login background image 5 months ago
extract-gresource.sh fleshed out script and instructions for gresource extraction, modification, and compilation 5 months ago

README.md

gdm3-theme-mod

Process for modifying gdm3 theme on Ubuntu 20.04

Identifying active theme, Installing custom theme

Ubuntu allows different gdm3 themes set as alternatives.

  • View them with update-alternatives --query gdm3-theme.gresource
  • Set the one you want with update-alternatives --set gdm3-theme.gresource [/path/to/file.gresource]
  • Install a new one with update-alternatives --install /usr/share/gnome-shell/gdm3-theme.gresource gdm3-theme.gresource [/path/to/new/custom.gresource] 0

Modifications

To modify an existing theme, first set gst and workdir variables in extract-gresource.sh script, then run the commands to extract the gresource file contents, and to generate the gresource contents xml.

To allow the modified theme to use an external CSS file for easier modifications, copy theme/gdm3.css up a level for editing, then replace the theme/gdm3.css contents with:

@import url(file:///usr/local/share/gnome-shell/theme/mygdm3/mygdm3.css);

Set the file://[path] to a path where you want to store the new, external css file.

CSS for custom login background

Assuming all you want to do is add your custom background, look for the #lockDialogGroup selector (there might be two, make sure you comment out any existing background image setting for that selector) and set a local file resource with this CSS:

#lockDialogGroup {
  background: url(file:///etc/gdm3/custom73k/bgfile);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Compile new gresource file

Command to compile the new gresource from these extracted contents + xml file:

glib-compile-resources --target ${xmlfile%.*} --sourcedir $workdir/theme $xmlfile

Then copy the resulting gresource file to the location you want to set with update-alternatives and ensure the external css is at the location set in the theme/gdm3.css css @import

Credit

This work based on information gleaned from PRATAP-KUMAR/focal_gdm3_login_theme_complete_hack (github)