How do I theme the xscreensaver unlock screen?

Question

How can I replace ugly screensaver unlock screen in Xubuntu 11.10?

Standard xscreensaver is very ugly.

Is there any themes for unlock screen?

score 10 · Answer 1 · edited Jun 12 '20 at 14:37

The closest you can come to theming is to change the colours/fonts & date-time format. Anything more will probably need to recompile xscreensaver and change the source.

For example -

enter image description here

can be changed to -

enter image description here

how to

Using leafpad (leafpad ~/.Xresources) create/amend the file .Xresources located in the home folder.

Copy and paste the following for the first picture above:

xscreensaver.splash: false
 
!font settings
xscreensaver.Dialog.headingFont:        -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.bodyFont:           -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.labelFont:          -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.unameFont:          -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.buttonFont:         -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.dateFont:           -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.passwd.passwdFont:         -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
 
!general dialog box (affects main hostname, username, password text)
xscreensaver.Dialog.foreground:         #ffffff
xscreensaver.Dialog.background:         #111111
xscreensaver.Dialog.topShadowColor:     #111111
xscreensaver.Dialog.bottomShadowColor:  #111111
xscreensaver.Dialog.Button.foreground:  #666666
xscreensaver.Dialog.Button.background:  #ffffff
 
!username/password input box and date text colour
xscreensaver.Dialog.text.foreground:    #666666
xscreensaver.Dialog.text.background:    #ffffff
xscreensaver.Dialog.internalBorderWidth:24
xscreensaver.Dialog.borderWidth:        20
xscreensaver.Dialog.shadowThickness:    2
 
!timeout bar (background is actually determined by Dialog.text.background)
xscreensaver.passwd.thermometer.foreground:  #ff0000
xscreensaver.passwd.thermometer.background:  #000000
xscreensaver.passwd.thermometer.width:       8
 
!datestamp format--see the strftime(3) manual page for details
xscreensaver.dateFormat:    %I:%M%P %a %b %d, %Y

Copy and paste the following for the second picture:

xscreensaver.splash: false
 
!font settings
xscreensaver.Dialog.headingFont:        -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.bodyFont:           -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.labelFont:          -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.unameFont:          -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.buttonFont:         -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.Dialog.dateFont:           -*-dina-medium-r-*-*-12-*-*-*-*-*-*-*
xscreensaver.passwd.passwdFont:         -*-dina-bold-r-*-*-12-*-*-*-*-*-*-*
 
!general dialog box (affects main hostname, username, password text)
xscreensaver.Dialog.foreground:         #111111
xscreensaver.Dialog.background:         #ffffff
xscreensaver.Dialog.topShadowColor:     #111111
xscreensaver.Dialog.bottomShadowColor:  #111111
xscreensaver.Dialog.Button.foreground:  #ffffff
xscreensaver.Dialog.Button.background:  #666666
 
!username/password input box and date text colour
xscreensaver.Dialog.text.foreground:    #ffffff
xscreensaver.Dialog.text.background:    #666666
xscreensaver.Dialog.internalBorderWidth:24
xscreensaver.Dialog.borderWidth:        20
xscreensaver.Dialog.shadowThickness:    2
 
!timeout bar (background is actually determined by Dialog.text.background)
xscreensaver.passwd.thermometer.foreground:  #ff0000
xscreensaver.passwd.thermometer.background:  #000000
xscreensaver.passwd.thermometer.width:       8
 
!datestamp format--see the strftime(3) manual page for details
xscreensaver.dateFormat:    %I:%M%P %b %d

The run through the following steps to enable your changes:

xrdb -merge ~/.Xresources
killall xscreensaver
xscreensaver -no-splash &

_source

score 6 · Answer 2 · edited Jun 04 '20 at 11:39

If you are familiar with svg image programmes (like Inkscape), you also could modify the logo to suit your own wishes. The logo is located in usr/share/pixmaps and is called xscreensaver.svg and xscreensaver.xpm.

However, there is a remark on changing the logo. See this thread for more info

Also, there are various important restrictions regarding the xpm file. I neglected those, resulting in a complete crash of my system. I will give it a try in the future, but so far i will stick to the flaming computer logo. See here for the restrictions, which I found only afterwards: http://www.improbability.net/xss/

And here is the process you have to follow to properly hard-code the images: http://www.inductiveload.com/posts/change-the-xscreensaver-icon/ or http://web.archive.org/web/20130309211615/http://www.inductiveload.com/posts/change-the-xscreensaver-icon

By the way, I suggest to change the font to something else, as not everyone has the "dina" font. It will then revert back to its original, failsafe font. Replacing "dina" with "arial" works for example, but the Ubuntu font doesn't seem to work.

Yuck, mostly dead links sadly. – meawoppl Aug 26 '14 at 04:15 — meawoppl, Aug 26 '14 at 04:15

score 4 · Answer 3 · answered Jan 20 '12 at 11:48

Following fossfreedom's example, I chose the following settings in a a newly created ~/.Xresources file, and I found the result quite attractive (a dark-background theme with gentle blues):

xscreensaver.splash: false

!font settings
xscreensaver.Dialog.headingFont:        -*-georgia-bold-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.Dialog.bodyFont:           -*-georgia-medium-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.Dialog.labelFont:          -*-georgia-medium-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.Dialog.unameFont:          -*-georgia-medium-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.Dialog.buttonFont:         -*-georgia-bold-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.Dialog.dateFont:           -*-georgia-medium-r-*-*-18-*-*-*-*-*-*-*
xscreensaver.passwd.passwdFont:         -*-georgia-bold-r-*-*-18-*-*-*-*-*-*-*

!general dialog box (affects main hostname, username, password text)
xscreensaver.Dialog.foreground:         #00efef
xscreensaver.Dialog.background:         #111111
xscreensaver.Dialog.topShadowColor:     #111111
xscreensaver.Dialog.bottomShadowColor:  #111111
xscreensaver.Dialog.Button.foreground:  #111111
xscreensaver.Dialog.Button.background:  #2040e0

!username/password input box and date text colour
xscreensaver.Dialog.text.foreground:    #2040e0
xscreensaver.Dialog.text.background:    #efefef
xscreensaver.Dialog.internalBorderWidth:36
xscreensaver.Dialog.borderWidth:        0
xscreensaver.Dialog.shadowThickness:    2

!timeout bar (background is actually determined by Dialog.text.background)
xscreensaver.passwd.thermometer.foreground:  #2040e0
xscreensaver.passwd.thermometer.background:  #2040e0
xscreensaver.passwd.thermometer.width:       0

!datestamp format--see the strftime(3) manual page for details
xscreensaver.dateFormat:    %I:%M%p - %a %b %d, %Y

Also with the changes loaded with:

xrdb -merge ~/.Xresources; killall xscreensaver; xscreensaver -no-splash &

Please would you share a screenshot? – user230910 Mar 25 '19 at 22:33 — user230910, Mar 25 '19 at 22:33

score 1 · Answer 4 · edited Feb 18 '19 at 16:36

1

Solution with Xresources is a good one, I use it myself, but you may as well try these:

XScreenSaver Lock Window Theming

edited Feb 18 '19 at 16:36

Monkleys

3
2

answered Jan 10 '15 at 14:37

Keios Solutions

11
2

An excellent hint, but not supported for `xscreensaver` >= 5.0. – Murphy Dec 03 '16 at 13:51

score 0 · Answer 5 · answered Apr 23 '23 at 06:09

The Arch distro actually modifies the dialog to present an Arch logo. The relevant package with a link to the source repo is here: https://aur.archlinux.org/packages/xscreensaver-arch-logo

In that repository, you'll find image files of different dimensions and formats, along with a PKGBUILD file. That file describes how they go about recompiling the original xscreensaver source with the Arch imagery.

It shouldn't be too hard to implement your own version of what's in that PKGUILD file:

prepare() {
  local logos_png
  local logos

  cd "${srcdir}"
  logos_png=(logo-32.png
             logo-50.png
             logo-180.png
             logo-360.png)
  for _pngfile in "${logos_png[@]}"; do
  install -Dm0644 "${_pngfile}" "${srcdir}/${pkgname%%-*}-${pkgver}/hacks/images/${_pngfile}"
  done
  
  logos=(logo.pdf
         logo-50.gif
         logo-50.xpm
         logo-180.gif
         logo-180.xpm
         logo-360.gif
         logo-360.xpm
         logo-512.png
         logo-big.gif)
  for _file in "${logos[@]}"; do
  install -Dm0644 "${_file}" "${srcdir}/${pkgname%%-*}-${pkgver}/utils/images/${_file}"
  done
}

build() {
  cd "${pkgname%%-*}-${pkgver}"
  ./configure \
  --prefix=/usr \
  --sysconfdir=/etc \
  --localstatedir=/var \
  --libexecdir=/usr/lib \
  --with-app-defaults=/usr/share/X11/app-defaults \
  --without-setuid-hacks \
  --with-pam \
  --with-login-manager \
  --with-gtk \
  --with-gl \
  --without-gle \
  --with-pixbuf \
  --with-jpeg
  make
}

package() {
  cd "${pkgname%%-*}-${pkgver}"
  install -d "${pkgdir}/etc/pam.d"
  make install_prefix="${pkgdir}" install
  install -Dm0644 ../LICENSE "${pkgdir}/usr/share/licenses/${pkgname}/LICENSE"
}

score 0 · Answer 6 · answered Oct 13 '12 at 20:47

0

It seems they use raw Xlib for security reasons.

http://www.jwz.org/xscreensaver/toolkits.html

answered Oct 13 '12 at 20:47

Raúl Salinas-Monteagudo

9
1

2

Welcome to Ask Ubuntu! Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Peachy Oct 14 '12 at 03:05

How do I theme the xscreensaver unlock screen?

6 Answers6

how to

Linked