How can I adjust the font size, color, boldness, etc. of the clock and date on the 20.04 lock screen?
I want to know how to adjust the font size, color, boldness, etc. of the clock and date on the 20.04 lock screen...
The CSS elements that control the display style of the clock and date fonts are wrapped up in a GTK gresource file for your selected theme, e.g. Yaru, Adwaita, etc.
For Yaru, the file can be found here:
/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
For Adwaita, the file can be found here:
/usr/share/gnome-shell/gnome-shell-theme.gresource
To make the changes, first unpack the gresource file. For example, to accomplish this with the Adwaita theme, run the following shell script. Be sure to replace the resource bundle location with the appropriate path to your theme:
gst=/usr/share/gnome-shell/gnome-shell-theme.gresource
#!/bin/sh
workdir=${HOME}/modify_resources_bundle
if [ ! -d ${workdir}/theme ]; then
mkdir -p ${workdir}/theme
mkdir -p ${workdir}/theme/icons
mkdir -p ${workdir}/theme/icons/scalable
mkdir -p ${workdir}/theme/icons/scalable/actions
mkdir -p ${workdir}/theme/icons/scalable/status
fi
gst=/usr/share/gnome-shell/gnome-shell-theme.gresource
for r in `gresource list $gst`; do
gresource extract $gst $r > $workdir/${r#\/org\/gnome\/shell/}
done
cp ${workdir}/theme/icons/scalable/actions/* ${workdir}/theme
cp ${workdir}/theme/icons/scalable/status/* ${workdir}/theme
There's a final step at the end of the above script to flatten the contents. This is necessary because the resource list mentioned later uses a 'file alias' directive to provide the correct path for some resources within the gresource file once bundled, but specifies that the file be in the same directory as everything else during the compilation process.
Next, in the extracted contents, edit gnome-shell.css as necessary. The CSS that influences the lock screen clock and date font style:
/* Screen Shield */ .unlock-dialog-clock { color: white; font-weight: 400; text-align: center; spacing: 24px; padding-bottom: 2.5em; } .unlock-dialog-clock-time { font-size: 64pt; padding-top: 42px; font-feature-settings: "tnum"; } .unlock-dialog-clock-date { font-size: 16pt; font-weight: normal; } .unlock-dialog-clock-hint { font-weight: normal; padding-top: 48px; }
Obtain or create as necessary a resource list file for all of the theme resources. I'm running the stock or "vanilla" Gnome desktop so I've focused this guide on Adwaita -- the default Gnome theme. However, this resource list can certainly serve as a guide for other themes. For the Adwaita theme, this can be obtained here:
https://github.com/GNOME/gnome-shell/blob/gnome-3-36/data/gnome-shell-theme.gresource.xml
Copy this resource file into working directory listed in the extraction script above:
workdir=${HOME}/modify_resources_bundle
Change into the working directory and run the following command:
glib-compile-resources gnome-shell-theme.gresource.xml
This will produce a gresource binary in the same directory:
gnome-shell-theme.gresource
Copy this file back to the correct location within your distro:
For Yaru:
/usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource
For Adwaita:
/usr/share/gnome-shell/gnome-shell-theme.gresource
Alternately, you can create a new custom theme and specify the custom theme to be used.
NOTE: An update to gnome desktop will clobber this change. These updates aren't frequent but do happen. Creating a new custom theme will ensure that this doesn't happen but might mean you possibly miss out on some other theme tweaks that get included in any update. I prefer to simply merge the customization on every update. They really don't happen all that often.