How to Theme Fedora

Máirín Duffy
Interaction Designer, Red Hat, Inc.
<duffy@fedoraproject.org>
 What We'll Talk About
➔ Which parts of Fedora are themeable?
➔ (GNOME-focused, sorry!)
➔ What are good design principles and
approaches to follow in creating a overall
theme and each component?
➔ What tools are involved?
➔ What file formats, file locations, and package
names are involved in applying new artwork?
➔ Where to seek help?
 Why Theme Fedora?
➔ Help define 'upstream' Fedora's look!
➔ Create a unique look for your Fedora spin.
➔ Rebrand a non-Fedora derivative distro.
➔ Bling up and personalize your system.
General Design Principles
➔ Consider having a common thematic thread
to unify the graphics (start => finish)
➔ Put more care into the design of those
graphics which will be seen most often
➔ Accommodate as many screen resolutions
and aspect ratios as possible (including dual)
➔ Don't distract or disrupt your audience.
➔ Consider space for translated text.
➔ Get feedback early and often!
 More Tips
➔ Try not to consume too much disk space with
graphics files
➔ Make the licensing of your graphics clear and
the source artwork available.
➔ Test the graphics! Use them yourself over time.
➔ If you have a great idea that doesn't seem
implementable – suggest it! Let folks know!
➔ Try remixing already available themes
(art.gnome.org, gnome-look.org, etc.)
What's Typically Themed?
➔ Install-time graphics
boot media splash, installer, first boot
configuration
➔ Boot-up graphics
kernel/os selection menu, graphical boot, login
screen, desktop splash
➔ Ubiquitous graphics
wallpaper, icons, window manager, widgets,
cursors, screensaver dialog
Install-time graphics
Boot Media Splash
 Boot Media Splash
Seen when booting from Fedora media.
➔ File format: PNG or JPG
➔ Package: fedora-logos, anaconda/syslinux-
vesa-splash.jpg
➔ File path: /isolinux/splash.jpg
➔ Specification: 16-bit color per channel,
640x480, 65,536-color image. (This is a real
weird one!)
➔ Workflow: Inkscape > Gimp > ImageMagick
 Boot Media Splash
➔ How to test:
➔ Create a boot cd or usb stick and put the image in
the isolinux directory of the cd as 'splash.jpg', boot it
up
Installer
 Installer Banner
Seen throughout the install process.
➔ File format: PNG
➔ Package: fedora-logos, anaconda/anaconda_header.png
➔ File path:
/usr/share/anaconda/pixmaps/anaconda_header.png
➔ Specification: 800x88px full-color + alpha PNG
➔ Workflow: Inkscape > Gimp
 Installer Splash
Seen at the beginning and installation phases
of install process.
➔ File format: PNG
➔ Package: fedora-logos; anaconda/splash.png &
anaconda/progress_first.png, anaconda/progress_first-lowres.png
➔ File path:
/usr/share/anaconda/pixmaps/*
➔ Specification: 500x325px / 320x225px full-color
+ alpha PNG
➔ Workflow: Inkscape > Gimp
 Installer
➔ How to test:
➔ FIXME: get advice from Jeremy on how to address
this.
➔ How to take screenshots:
➔ Press Shift+PrtSc or PrtSc
➔ Shots wll be saved to /tmp/ramfs/anaconda-
screenshots
➔ Tip:
➔ Other anaconda graphics to consider: about-to-
install.png, done.png; icons: upgrade.png,
install.png
Firstboot
 Firstboot Banner
Seen throughout the first boot process.
➔ File format: PNG
➔ Package: fedora-logos, firstboot/firstboot-left.png
➔ File path:
/usr/share/firstboot/pixmaps/firstboot-left.png
➔ Specification: 160x600px full-color + alpha PNG
➔ Workflow: Inkscape > Gimp
 Firstboot Splash
Seen at the beginning of the first boot process.
➔ File format: PNG
➔ Package: fedora-logos, firstboot/splash-small.png
➔ File path:
/usr/share/firstboot/pixmaps/splash-small.png
➔ Specification: variable size... but you'll probably
want to keep it under 500x325px. full-color +
alpha PNG file.
➔ Workflow: Inkscape > Gimp
 First Boot
➔ How to test:
➔ Run '/usr/sbin/firstboot –debug' as root (make sure
firstboot's gui is installed!)
➔ How to take screenshots:
➔ Press Shift+PrtSc or PrtSc
➔ Shots wll be saved to /root/firstboot-screenshots
➔ Tip:
➔ The icons displayed for each screen in firstboot are
in the same directory as the banner and splash.
Boot-up graphics
OS Selection Menu
 OS Selection Menu
Shown after BIOS when a system is booted.
➔ File format: xpm.gz
➔ Package: fedora-logos, bootloader/grub-splash.xpm.gz
➔ File path: /boot/grub/splash.xpm.gz
➔ Specification: 640x480px PNG file with 16-color
indexed palette. 2 of the 16 colors are required,
so you've got only 14 to play with. The required
colors (and slot #s in the color map) are: 0 =
#000000 (black), 1 = #ffffff (white))
➔ Workflow: Inkscape > Gimp
 OS Selection Menu
➔ How to test:
➔ Create xpm.gz using Gimp
➔ Replace '/boot/grub/splash.xpm.gz ' on your system
with new artwork
➔ Reboot!
➔ How to take screenshots:
➔ FIXME: Unknown
Graphical Boot
 Graphical Boot Graphic
Shown in the center while system starts up.
➔ File format: PNG
➔ Package: fedora-logos, /usr/share/rhgb/main-logo.png
➔ File path: /usr/share/rhgb/main-logo.png
➔ Specification: variable, might want to keep it
within 500x350px, full-color + alpha PNG file.
➔ Workflow: Inkscape > Gimp
Graphical Boot Colors

These
colors are
compiled
into
RHGB's
code! :(
 Graphical Boot
➔ How to test:
➔ FIXME: confirm with halfline, rhgb --debug
➔ How to take screenshots:
➔ Go into debug mode and take a screenshot.
➔ Tips:
➔ Other graphic possibilities exist: progress.png and
system-logo.png
Login Screen
Login Screen
 Login Screen
Login screen.
➔ File format: XML
➔ Package: fedorainfinity-gdm-theme
➔ File paths:
➔ /usr/share/gdm/themes/$NAME/$NAME.xml
➔ /usr/share/gdm/themes/$NAME/GdmGreeterTheme.desktop
➔ Specification: See GDM Manual
➔ Workflow: Inkscape, Gimp, text editor
 Login Screen
➔ How to test:
➔ 'export DOING_GDM_DEVELOPMENT = 1'
➔ 'Xnest -ac -geometry 1680x525 :123 &'
➔ 'DISPLAY=:123 /usr/bin/gdmgreeter'
➔ Tips:
➔ Consider using a theme from art.gnome.org or
gnome-look.org as a basis.
➔ Doesn't have to have face browser.
➔ There is a lot of 'hidden' text you need – incorrect
password, pam message, caps lock warning ...
Desktop Splash
 Desktop Splash
Shown in the center during login process.
➔ File format: PNG
➔ Package: fedora-logos
➔ File path: /usr/share/pixmaps/splash/gnome-splash.png
(GNOME)
➔ Specification: variable, might want to keep it
around 500x420px, full-color + alpha PNG file.
➔ Workflow: Inkscape > Gimp
Ubiquitous Graphics
Wallpaper
 Basic Wallpaper
➔ Color is very important:
➔ Symbolically: Any time you use a color other than
blue BE PREPARED TO JUSTIFY IT! :)
➔ Usability: too bright and you'll hurt people's eyes.
Too dark and you will depress them.
➔ Avoid wallpaper artwork that will interfere with
icon visibility – or look clickable.
➔ Depth is good. Simplicity is good.
➔ Have three basic sizes: Regular screen ratio,
widescreen ratio, dual screen ratio.
 Basic Wallpaper
➔ File format: PNG
➔ Package: desktop-backgrounds-basic
➔ File path: /usr/share/backgrounds/$NAME/$NAME.png
➔ Specification:
➔ Normal: 1600x1200
➔ Wide: 2560 x 1600
➔ Dual: 5200 x 3200
 Wallpaper Set
A set of wallpapers shown in the background
chooser.
➔ File format: XML
➔ Package: desktop-backgrounds-basic
➔ File path: /usr/share/gnome-background-properties/desktop-
backgrounds-$NAME.xml (default set is named desktop-
backgrounds-basic.xml)
➔ Specification: Uses the gnome wallpaper
format, see /usr/share/gnome-background-
properties for examples.
 Animated Wallpaper
➔ The animation is not noticeable – it is very
gradual over time. If it moves too quickly it's
distracting and wastes CPU.
➔ Can use to bring natural things to the desktop –
movement of the sun and moon, growth cycle of
plants, emotions of a character
➔ Be extra careful to watch your disk space
usage!
 Animated Wallpaper
➔ File format: XML
➔ Package: desktop-backgrounds-basic
➔ File path: /usr/share/backgrounds/$NAME/$NAME.xml
➔ Specification: Uses XML format to reference
image files and specify transitions and timing.
Please refer
to /usr/share/backgrounds/infinity/infinity.xml for a
commented example of the format.
Icons
 Icon Theme
➔ File format: .theme (ini-style file)
➔ Package: desktop-backgrounds-basic
➔ File path: /usr/share/icons/$NAME/index.theme
➔ Specification: http://freedesktop.org/wiki/Specifications/icon-
theme-spec?action=show
➔ Tip: You can modify the icons used by specific
applications by modifying their .desktop files
in /usr/share/applications. See:
http://www.redhat.com/magazine/012oct05/featur
es/freedesktop/
Window Manager
 Window Manager
➔ File format: XML
➔ Package: nodoka-theme-gnome
➔ File path: /usr/share/themes/$NAME/metacity-1/metacity-
theme-1.xml
➔ Specification:
➔ http://developer.gnome.org/doc/tutorials/metacity/met
acity-themes.html
Widgets
 Widgets
➔ File format: gtkrc
➔ Package: nodoka-theme-gnome
➔ File path: /usr/share/themes/$NAME/gtk-2.0/gtkrc
➔ Tools: the widget factory is a great tool for
developing and testing GTK themes. (yum
install thewidgetfactory)
➔ Specification:
http://www.gtk.org/~otaylor/gtk/2.0/theme-
engines.html
Cursors
 Cursors
➔ File format: X cursor format.
➔ Package: redhat-artwork
➔ File path: /usr/share/icons/Bluecurve/cursors
➔ Specification: Generate PNGs for each cursor
and use xcursorgen to create cursors. See:
http://kde-look.org/content/show.php/Xcursor+Theme
+Tutorial+!!!?content=11428
Screensaver Dialog
 Screensaver Dialog
➔ File format: XML
➔ Package: fedora-logos
➔ File path: /usr/share/gnome-screensaver/lock-dialog-
system.png (image), /usr/share/gnome-screensaver/lock-dialog-
system.gtk (colors / style)
➔ Specification: No real restrictions on image size
but you'll want it to be big enough to hold login
information. Use the gtkrc format to modify colors
of the widgets in the dialog.
Resources
FIXME: TBA