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

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