0

We are attempting to move the date and time of the lock screen. We've discovered Gnome uses a CSS file for the lock screen's configuration.

The file is located in //usr/share/gnome-shell/theme/ubuntu.css

Below is the snippet of code that we attempted to modify. You can find these between lines 1767 & 1780.

   .screen-shield-clock {
  color: white;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
  font-weight: bold;
  text-align: center;
  padding-bottom: 1.5em; }

.screen-shield-clock-time {
  font-size: 72pt;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }

.screen-shield-clock-date {
  font-size: 28pt;
  font-weight: normal; }

We tried to change the code to .screen-shield-clock to the following

.screen-shield-clock {
  color: white;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
  font-weight: bold;
  vertical-align: top;
  text-align: left;
  padding-bottom: 1.5em; }

Adding vertical-align: top and changing text-align: left

Unfortunately this didn't work. Any guidance on which settings we will need to change would be great. Even if it's on the top right hand corner, would be alright.

Thanks in advance!

Ozymandias
  • 68
  • It's hard coded.. Gnome Extensions/ compiling gnome shell from source is required.. – PRATAP Jan 27 '20 at 03:48
  • @YuganTej - Thanks for the quick response! Recompiling Gnome Shell will probably cause issues down the line when updates are pushed. It's odd I am able to change the font-weight with no issues. Having the location hard coded defeats the purpose of using Cascading Style Sheets. Hopefully there will be options in the future. Is there a place I can suggest a feature like this for the Gnome team? – Ozymandias Jan 27 '20 at 19:21
  • https://www.google.com/url?sa=t&source=web&rct=j&url=https://m.youtube.com/watch%3Fv%3DErwAjHpTrJM&ved=2ahUKEwjs4OuelqXnAhU463MBHSA2BwIQtwIwAHoECAkQAQ&usg=AOvVaw1397__a4PnaSIzTD0Bb99a – PRATAP Jan 28 '20 at 01:48

1 Answers1

0

I was able to change the position of the clock by changing the ubuntu.css file. Absolute or relative positioning wasn't working, but I found one method that does work. It may not be the best answer, but it worked for me.

  1. Type sudo gedit /usr/share/gnome-shell/theme/ubuntu.css
  2. Enter your pw for access
  3. Ctrl+F to search for .screen-shield-clock
  4. Change width to a very large number that would cover your screen. I did width: 2000px; It's larger than my screen, but it did not cause my clock to move off the screen. It seemed to simulate 100% of the screen width.
  5. If it doesn't exist, add margin-bottom: 2000px; (A small number would work as well if you just wanted the clock to move up a little. This large number moved it for the very top for me.
  6. Then adjust padding-top, padding-right, padding-bottom, padding-left to move the clock where you want it.

NOTE: When you want to test it, just press Alt+F2 to run the command "rt", which refreshes the css file. Then check out your lock screen.

For positioning the clock in the top right, this is what my screen-shield-clock class looks like:

.screen-shield-clock {
  color: white;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
  font-weight: 400;
  text-align: right;
  width: 2000px;
  padding-top: 30px;
  padding-bottom: 1.5em;
  padding-right: 30px;
  margin-bottom: 2000px; }

I was not able to find any other answers to moving the lock screen clock, so until there is a better solution, I hope this helps someone or inspires a better answer.

directuplink
  • 1
  • 1
  • Did you manage to achieve it under ubuntu 20.04 (which uses gnome 3.36.8) I think the relevant file is /usr/share/gnome-shell/theme/Yaru/gnome-shell-theme.gresource and the relevant css field is .unlock-dialog-clock but anything I do to it does not work. – n0tis Feb 12 '23 at 20:51