How To Theme Fedora


Published on

Published in: Self Improvement
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How To Theme Fedora

  1. 1. How to Theme Fedora <ul><ul><li>Máirín Duffy </li></ul></ul><ul><ul><li>Interaction Designer, Red Hat, Inc. </li></ul></ul><ul><ul><li><> </li></ul></ul>
  2. 2. What We'll Talk About <ul><li>Which parts of Fedora are themeable? </li></ul><ul><ul><li>(GNOME-focused, sorry!) </li></ul></ul><ul><li>What are good design principles and approaches to follow in creating a overall theme and each component? </li></ul><ul><li>What tools are involved? </li></ul><ul><li>What file formats, file locations, and package names are involved in applying new artwork? </li></ul><ul><li>Where to seek help? </li></ul>
  3. 3. Why Theme Fedora? <ul><li>Help define 'upstream' Fedora's look! </li></ul><ul><li>Create a unique look for your Fedora spin. </li></ul><ul><li>Rebrand a non-Fedora derivative distro. </li></ul><ul><li>Bling up and personalize your system. </li></ul>
  4. 4. General Design Principles <ul><li>Consider having a common thematic thread to unify the graphics (start => finish) </li></ul><ul><li>Put more care into the design of those graphics which will be seen most often </li></ul><ul><li>Accommodate as many screen resolutions and aspect ratios as possible (including dual) </li></ul><ul><li>Don't distract or disrupt your audience. </li></ul><ul><li>Consider space for translated text. </li></ul><ul><li>Get feedback early and often! </li></ul>
  5. 5. More Tips <ul><li>Try not to consume too much disk space with graphics files </li></ul><ul><li>Make the licensing of your graphics clear and the source artwork available. </li></ul><ul><li>Test the graphics! Use them yourself over time. </li></ul><ul><li>If you have a great idea that doesn't seem implementable – suggest it! Let folks know! </li></ul><ul><li>Try remixing already available themes (,, etc.) </li></ul>
  6. 6. What's Typically Themed? <ul><li>Install-time graphics boot media splash, installer, first boot configuration </li></ul><ul><li>Boot-up graphics kernel/os selection menu, graphical boot, login screen, desktop splash </li></ul><ul><li>Ubiquitous graphics wallpaper, icons, window manager, widgets, cursors, screensaver dialog </li></ul>
  7. 7. Install-time graphics
  8. 8. Boot Media Splash
  9. 10. Boot Media Splash <ul><li>Seen when booting from Fedora media. </li></ul><ul><li>File format: PNG or JPG </li></ul><ul><li>Package: fedora-logos, anaconda/syslinux-vesa-splash.jpg </li></ul><ul><li>File path: /isolinux/splash.jpg </li></ul><ul><li>Specification: 16-bit color per channel, 640x480, 65,536-color image. (This is a real weird one!) </li></ul><ul><li>Workflow: Inkscape > Gimp > ImageMagick </li></ul>
  10. 11. Boot Media Splash <ul><li>How to test: </li></ul><ul><ul><li>Create a boot cd or usb stick and put the image in the isolinux directory of the cd as 'splash.jpg', boot it up </li></ul></ul>
  11. 12. Installer
  12. 14. Installer Banner <ul><li>Seen throughout the install process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, anaconda/anaconda_header.png </li></ul><ul><li>File path: /usr/share/anaconda/pixmaps/anaconda_header.png </li></ul><ul><li>Specification: 800x88px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  13. 15. Installer Splash <ul><li>Seen at the beginning and installation phases of install process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos; anaconda/splash.png & anaconda/progress_first.png, anaconda/progress_first-lowres.png </li></ul><ul><li>File path: /usr/share/anaconda/pixmaps/* </li></ul><ul><li>Specification: 500x325px / 320x225px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  14. 16. Installer <ul><li>How to test: </li></ul><ul><ul><li>Pop into #anaconda on and ask for help – it can be involved. </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Press Shift+PrtSc or PrtSc </li></ul></ul><ul><ul><li>Shots wll be saved to /tmp/ramfs/anaconda-screenshots </li></ul></ul><ul><li>Tip: </li></ul><ul><ul><li>Other anaconda graphics to consider: about-to-install.png, done.png; icons: upgrade.png, install.png </li></ul></ul>
  15. 17. Firstboot
  16. 19. Firstboot Banner <ul><li>Seen throughout the first boot process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, firstboot/firstboot-left.png </li></ul><ul><li>File path: /usr/share/firstboot/pixmaps/firstboot-left.png </li></ul><ul><li>Specification: 160x600px full-color + alpha PNG </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  17. 20. Firstboot Splash <ul><li>Seen at the beginning of the first boot process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, firstboot/splash-small.png </li></ul><ul><li>File path: /usr/share/firstboot/pixmaps/splash-small.png </li></ul><ul><li>Specification: variable size... but you'll probably want to keep it under 500x325px. full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  18. 21. First Boot <ul><li>How to test: </li></ul><ul><ul><li>Run '/usr/sbin/firstboot –debug' as root (make sure firstboot's gui is installed!) </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Press Shift+PrtSc or PrtSc </li></ul></ul><ul><ul><li>Shots wll be saved to /root/firstboot-screenshots </li></ul></ul><ul><li>Tip: </li></ul><ul><ul><li>The icons displayed for each screen in firstboot are in the same directory as the banner and splash. </li></ul></ul>
  19. 22. Boot-up graphics
  20. 23. OS Selection Menu
  21. 25. OS Selection Menu <ul><li>Shown after BIOS when a system is booted. </li></ul><ul><li>File format: xpm.gz </li></ul><ul><li>Package: fedora-logos, bootloader/grub-splash.xpm.gz </li></ul><ul><li>File path: /boot/grub/splash.xpm.gz </li></ul><ul><li>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)) </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  22. 26. OS Selection Menu <ul><li>How to test: </li></ul><ul><ul><li>Create xpm.gz using Gimp </li></ul></ul><ul><ul><li>Replace ' /boot/grub/splash.xpm.gz ' on your system with new artwork </li></ul></ul><ul><ul><li>Reboot! </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>The easiest way is to run a virtualized copy of Fedora with your artwork replaced in it, and then take a screenshot of the VM window. </li></ul></ul>
  23. 27. Graphical Boot
  24. 29. Graphical Boot Graphic <ul><li>Shown in the center while system starts up. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos, /usr/share/rhgb/main-logo.png </li></ul><ul><li>File path: /usr/share/rhgb/main-logo.png </li></ul><ul><li>Specification: variable, might want to keep it within 500x350px, full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  25. 30. Graphical Boot Colors These colors are compiled into RHGB's code! :(
  26. 31. Graphical Boot <ul><li>How to test: </li></ul><ul><ul><li>Type 'rhgb -u $DISPLAY -i', then press Ctrl + Alt + D (Press Ctrl + Alt + D to get out of debug mode) </li></ul></ul><ul><li>How to take screenshots: </li></ul><ul><ul><li>Go into debug mode and take a screenshot. </li></ul></ul><ul><li>Tips: </li></ul><ul><ul><li>Other graphic possibilities exist: progress.png and system-logo.png </li></ul></ul>
  27. 32. Login Screen
  28. 33. Login Screen
  29. 34. Login Screen <ul><li>Login screen. </li></ul><ul><li>File format: XML </li></ul><ul><li>Package: fedorainfinity-gdm-theme </li></ul><ul><li>File paths: </li></ul><ul><ul><li>/usr/share/gdm/themes/$NAME/$NAME.xml </li></ul></ul><ul><ul><li>/usr/share/gdm/themes/$NAME/GdmGreeterTheme.desktop </li></ul></ul><ul><li>Specification: See GDM Manual </li></ul><ul><li>Workflow: Inkscape, Gimp, text editor </li></ul>
  30. 35. Login Screen <ul><li>How to test: </li></ul><ul><ul><li>'export DOING_GDM_DEVELOPMENT = 1' </li></ul></ul><ul><ul><li>'Xnest -ac -geometry 1680x525 :123 &' </li></ul></ul><ul><ul><li>'DISPLAY=:123 /usr/bin/gdmgreeter' </li></ul></ul><ul><li>Tips: </li></ul><ul><ul><li>Consider using a theme from or as a basis. </li></ul></ul><ul><ul><li>Doesn't have to have face browser. </li></ul></ul><ul><ul><li>There is a lot of 'hidden' text you need – incorrect password, pam message, caps lock warning ... </li></ul></ul>
  31. 36. Desktop Splash
  32. 38. Desktop Splash <ul><li>Shown in the center during login process. </li></ul><ul><li>File format: PNG </li></ul><ul><li>Package: fedora-logos </li></ul><ul><li>File path: /usr/share/pixmaps/splash/gnome-splash.png (GNOME) </li></ul><ul><li>Specification: variable, might want to keep it around 500x420px, full-color + alpha PNG file. </li></ul><ul><li>Workflow: Inkscape > Gimp </li></ul>
  33. 39. Ubiquitous Graphics
  34. 40. Wallpaper
  35. 42. Basic Wallpaper <ul><li>Color is very important: </li></ul><ul><ul><li>Symbolically: Any time you use a color other than blue BE PREPARED TO JUSTIFY IT! :) </li></ul></ul><ul><ul><li>Usability: too bright and you'll hurt people's eyes. Too dark and you will depress them. </li></ul></ul><ul><li>Avoid wallpaper artwork that will interfere with icon visibility – or look clickable. </li></ul><ul><li>Depth is good. Simplicity is good. </li></ul><ul><li>Have three basic sizes: Regular screen ratio, widescreen ratio, dual screen ratio. </li></ul>
  36. 43. Basic Wallpaper <ul><li>File format: PNG </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/backgrounds/$NAME/$NAME.png </li></ul><ul><li>Specification: </li></ul><ul><ul><li>Normal: 1600x1200 </li></ul></ul><ul><ul><li>Wide: 2560 x 1600 </li></ul></ul><ul><ul><li>Dual: 5200 x 3200 </li></ul></ul>
  37. 44. Wallpaper Set <ul><li>A set of wallpapers shown in the background chooser. </li></ul><ul><li>File format: XML </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/gnome-background-properties/desktop-backgrounds-$NAME.xml (default set is named desktop-backgrounds-basic.xml) </li></ul><ul><li>Specification: Uses the gnome wallpaper format, see /usr/share/gnome-background-properties for examples. </li></ul>
  38. 45. Animated Wallpaper <ul><li>The animation is not noticeable – it is very gradual over time. If it moves too quickly it's distracting and wastes CPU. </li></ul><ul><li>Can use to bring natural things to the desktop – movement of the sun and moon, growth cycle of plants, emotions of a character </li></ul><ul><li>Be extra careful to watch your disk space usage! </li></ul>
  39. 46. Animated Wallpaper <ul><li>File format: XML </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/backgrounds/$NAME/$NAME.xml </li></ul><ul><li>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. </li></ul>
  40. 47. Icons
  41. 48. Icon Theme <ul><li>File format: .theme (ini-style file) </li></ul><ul><li>Package: desktop-backgrounds-basic </li></ul><ul><li>File path: /usr/share/icons/$NAME/index.theme </li></ul><ul><li>Specification: </li></ul><ul><li>Tip: You can modify the icons used by specific applications by modifying their .desktop files in /usr/share/applications. See: </li></ul>
  42. 49. Window Manager
  43. 50. Window Manager <ul><li>File format: XML </li></ul><ul><li>Package: nodoka-theme-gnome </li></ul><ul><li>File path: /usr/share/themes/$NAME/metacity-1/metacity-theme-1.xml </li></ul><ul><li>Specification: </li></ul><ul><ul><li> </li></ul></ul>
  44. 51. Widgets
  45. 52. Widgets <ul><li>File format: gtkrc </li></ul><ul><li>Package: nodoka-theme-gnome </li></ul><ul><li>File path: /usr/share/themes/$NAME/gtk-2.0/gtkrc </li></ul><ul><li>Tools: the widget factory is a great tool for developing and testing GTK themes. (yum install thewidgetfactory) </li></ul><ul><li>Specification: </li></ul>
  46. 53. Cursors
  47. 54. Cursors <ul><li>File format: X cursor format. </li></ul><ul><li>Package: redhat-artwork </li></ul><ul><li>File path: /usr/share/icons/Bluecurve/cursors </li></ul><ul><li>Specification: Generate PNGs for each cursor and use xcursorgen to create cursors. See:!!!?content=11428 </li></ul>
  48. 55. Screensaver Dialog
  49. 56. Screensaver Dialog <ul><li>File format: XML </li></ul><ul><li>Package: fedora-logos </li></ul><ul><li>File path: /usr/share/gnome-screensaver/lock-dialog-system.png (image), /usr/share/gnome-screensaver/lock-dialog-system.gtk (colors / style) </li></ul><ul><li>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. </li></ul>
  50. 57. Resources
  51. 58. Where To Go For Help <ul><li>The Fedora Art list: </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Fedora Art Team IRC: </li></ul><ul><ul><li>#fedora-art on </li></ul></ul>