Easy Effective Theming

From BLUG

Jump to: navigation, search

Contents

[edit]

Easy Effective Theming

by Steven Black

[edit]

Introduction

Hello, my name is Steven Black. I migrated from DOS 6.22 and Windows 3.1 to Linux in 1995. I was recently inspired to explore themes in Linux when the company I work for started pushing for a more consistent user interface on their websites. My idea was to completely eliminate the distribution's logo and replace it with the organization's logo.

[edit]

What do I mean by easy, effective theming?

Easy theming means that it is doable and you can see clear progress without excess effort. In this sense anything requiring an all new icon set would not qualify as "easy".

Effective theming means that you notice it regularly. Theming an application that you rarely use is not effective. Theming an application with a tiny window is not as effective as theming an application that controls the whole screen.

For easy and effective theming, we want a set of projects that are each easy to do, and are each clearly noticeable when you are done. The end result is a completely themed start-up sequence with enough theming later that it is clear it has been customized.

[edit]

What topics will be covered?

We start from the earliest point in the boot sequence and go on.

  • Grub background image
  • Usplash theme
  • GDM themes
  • Screen savers
  • System Icons
[edit]

Leverage existing resources

Base your themes off themes for your distribution.

Some aspects of some of these tools are have better examples than documentation.

Additionally, making packages for your distribution of choice is frequently a complex matter. The easiest way to do it right is to, if not directly base your files off of distribution files, to at least consult other packages files to the point that you are comfortable you are doing all the standard things.

In the end, this saves you time as you can concentrate on what you need to do to make the theme yours, and not worry so much about the mechanics of the process.

[edit]

SVG files

SVG stands for Scalable Vector Graphics. It is an XML-based standard that aims to be an eventual open replacement for Flash animations.

[edit]

Benefits of SVG files

The benefits of SVG files include the following:

Scalable
Create an image once, and have a crisp, clear version of it for a wide range of resolutions. This is exceptionally handy for icons.
Higher abstraction level
Instead of dealing with colors of individual pixels you're dealing with the colors of shapes. This allows you to recolor images must faster.
Layered image format
The parts of an image are layered on top of each other, with full alpha color.support. This allows easily adding image effects by use of layers on top of a base image.
Grouping within an image
Grouping logical parts of an image allows an entire subimage to be grossly manipulated without changing the relationships of the underlying parts. This allows you to easily move, resize, and reorient parts of an image.
Increased reusability
The combined effect of these things is that it is easy to take pieces of a number of images and combine them in to a new image. This increases productivity.
[edit]

Programs to edit SVG files

There are a variety of programs that will work to edit SVG files.

The Gimp's SVG plugin allows you to import SVG files, but does not allow you to edit them. This works well if you are using an SVG component in a bitmap.

If you're distribution does not include the Gimp SVG plugin, you can export vector files from Inkscape, Sodipodi, and probably any other SVG editors.

[edit]

Command-line programs to convert SVG to vector files

Not all environments have full support of SVG files. If you ever need to automate the generation of bitmaped files from SVG files you may want to use a command-line tool.

These include:

  • ksvgtopng, part of KDE
  • rsvg, part of librsvg2

Some interactive tools may allow you to use them in a non-interactive manner, however for portability you will probably want to support more than one SVG to PNG conversion tool.

[edit]

Using either ksvgtopng or rsvg

Many of the Gnome icon theme source packages include a svg2png.sh script. The configure process automatically picks either rsvg or ksvgtopng (or it can be explicitly specified at the configure step) and it manages to provide a uniform set of command-line option support for the makefiles. (As the two commands have different command-line expectations.)

You may want to look in to this script, if you need a similar ability to have SVG files converted to PNG files automatically.

[edit]

GRUB background image

Grub is very restrictive on the file-format and image settings that are acceptable. It uses Gzip-compressed XPM files. The resolution can only be 640x480. It also requires the images to use a maximum of 14 colors.

It is possible to use command-line tools to resize the image and drop the colors to an indexed palette, however I highly recommend you do this in your image editor. Any modern image editor should support resizing images and dropping to indexed palettes of given sizes. If you're not using The Gimp, you can save the image as PNG, BMP, TIF, PPM or any lossless image format that supports indexed color. Of course if the editor has native support of XPM files it will make it easier.

If necisary, you can then use command-line tools to convert the source file format to an XPM file. Imagemagick, netbpm, or other similar tools should help with this task.

[edit]

More about Color limitations

I mentioned that GRUB does not support images with more than 14 colors. If you use The Gimp, this won't be an issue. You can either have The Gimp automatically create the palette of 14 colors, or you can have The Gimp use a palette you create by hand, giving you finer control.

If you have any doubts, you should have your graphics program dither the image down to 14 colors for you. You will want to do this after you resize the image to retain as much quality as possible.

Also note that when dithering down to a smaller palette the original size of the image matters less. The dithering process masks the blockiness of scaling images up.

[edit]

Why only 14 colors?

Those of you in the know may be wondering about this. No graphics mode on modern PC hardware supports only 14 colors.

What is happening here is that for support with old hardware GRUB supports any VGA graphics card using standard BIOS calls. Standard VGA adapters only supported 640x480 in 16 colors. (They could do 256 colors, but only up to resolutions of 320x240.)

You might be thinking, "Okay, that makes sense, but that was 16 colors, and GRUB only supports 14 for background images." The problem is that GRUB has no idea what combinations of colors will be readable within that palette. To get around this issue GRUB reserves two colors for itself. These it uses for black and white which are what it uses to draw the menu.

[edit]

Telling GRUB to use the background

In the /boot/grub/menu.lst file you will need to add a "splashimage" setting.

Typically these look something like: 

   splashimage=(hd0,0)/grub/splashimages/splash.xpm.gz

This assumes you have a seperate /boot and root partitions, and that you have a subdirectory to store your splash images in.

Due to the flexable nature of Grub, this could have easily been: 

   splashimage=(hd1,3)/steven/theme-presentation/grub/splash.xpm.gz

This would imply that /dev/hdb4 is my /home partition.

[edit]

Additional GRUB settings to make this more useful

For some distributions and initial configurations setting the splashimage will be all that is needed.

Remember that the splashimage is used as the background image for the GRUB menu. If you are using the "hiddenmenu" setting you will get neither the background image, nor the menu by default.

Also note that if you want to show your handiwork during bootup, you may want to increase the "timeout" setting so that it displays the menu longer before booting.

[edit]

Usplash theming

Usplash is a user-space splash screen system created by Ubuntu. Usplash themes are shared object files which are dynamically loaded. This makes Usplash themes concise single files, but it also means that you need the source package to make any changes.

Usplash supports custom fonts, custom drawing functions, and animation.

The Dapper Usplash only supported 640x480 images with 16 colors and the palette entries had specific meanings.

Starting with Edgy this changed. It now supports up to 256 colors. However, if multiple images are used within the same splash screen, you need to make sure the palette is identical.

[edit]

Development requirements

The Usplash themes are compiled as C. The package requirements are:

  • Basic understanding of 'C' language (suitable for beginners)
  • libusplash-dev (formerly usplash-dev)
    • Includes example theme, but no packaging logic
    • Example is located: /usr/share/doc/libusplash-dev/examples
  • build-essential
[edit]

Create your image

The important thing here is that you create your base image.

If you're dealing with an SVG source, things are significantly easier when creating a set of sizes for your images, as you know the results will always be crisp and clear.

[edit]

Using custom progress bars

The progress bar is referred to as the "throbber" in Usplash lingo.

If you're using the default logic for updating the throber, you will need two additional graphic files. One containing the throbber background, and the other containing the throbber foreground.

All three of these images need to use the exact same palette. Otherwise things will appear off.

[edit]

Pulling out your Palette in The Gimp

I've said before that you will need to use the same palette for your background and progress bar images. This gets more complicated if you're going to support multiple background image sizes. Even though you're using different image sizes, if you're using common throbber images, you need to use a common palette for every image.

The easiest way to take care of this is to pull out a palette, and then to reduce the color of the images to those of a specific palette. To pull our a palette from an image, you want to do the following:

1. Take one of your background images and set it to indexed colors with 256 colors available. You can do this with the <Image>/Image/Mode/Index menu entry, and selecting to "Generate optimum palette" with 256 colors. Save it (though you want to make sure you don't over-write any original material).

2. In the Palette Palatte window select "Import palette..." Now use "Select Source" to specify that you want to import from the "Image" of your indexed image file. Make sure you specify the number of colors is 256. Make sure you set the Palette name to be something appropriate and memorable. You will probably also want to set the "Columns" to 16, so that it creates an even grid of 16 by 16.

[edit]

After the images are done

After you have your images created, you need to set them up and align them properly. This is done in the C file. You will also want to use your palette file to decide the colors want to use for the background, general text foreground and background, success and failure text foreground, and the progress bar foreground and background. These are all defined with color index settings in the 'C' file.

I believe the progress bar foreground and background colors are only used if you do not specify custom throbber logic to use fancy throbber images.

The text area and colors are used for status messages, even when booting in "quiet" mode. Make sure you have room for at least a line or two or you may have some unexpected results.

[edit]

Other splash screens

There are a number of other splash screen systems available.

Gensplash and derivates are less kernel-based than bootsplash.

Bootsplash has good documentation about theme creation, and Gensplash can import Bootsplash themes.

[edit]

GDM theming

There are a number of components involved in a GDM theme.

  • the GdmGreeterTheme.desktop file
  • the Greeter XML file
  • the images referenced from the Greeter XML file
  • the screen shot
  • standard GDM packaging
[edit]

the GdmGreeterTheme.desktop file

This file isn't a true Desktop Entry file, but does provide useful information to GDM when a theme is being chosen. The format is roughly: 

   [GdmGreeterTheme]
   Greeter=greeter.xml
   Name=Great Theme
   Description=This is my great example theme
   Author=Your Name
   Screenshot=screenshot.jpg
   Copyright=Copyright (C) 2007, Your Name
[edit]

the Greeter XML file

The easiest solution here is to examine existing files and derive your works from them.

The Greeter file is an XML file format, with a variety of tags available.

In particular it is good to note that the file format allows images to stretch, so this is another place where an SVG file can work well.

[edit]

the screen shot

There are two ways to create a screen shot.

One way involves creating a script to, as root, change to your X11 console and capture the screen using the "import" tool from ImageMagick. This seems overly complex to me.

My prefered way to create a screen shot is to use Xnest to have a GDM session running in a window within my normal session. This is easily accomplished by installing Xnest (some may also need to install a gdm-Xnest package) and running gdmflexiserver.

With Xnest I can then use standard tools to create a screen shot.

[edit]

standard GDM packaging

GDM themes are regularly shared. Put all the files in a ThemeDir, then create a gziped tar file out of it. This would be much like you would create with the following command: tar zcf ThemeDir.tar.gz ThemeDir (Where "ThemeDir" is a name suitable for your theme.)

This tarball can be shared with the Gnome Art folks, such as the folks at http://art.gnome.org/.

[edit]

Screen Savers

There are two types of easy-to-do screen savers:

  • Image-based screen savers
  • SVG based screen savers
[edit]

Adding new screen savers

The heart of the screen saver logic involves Desktop Entry files stored in "/usr/share/applications/screensavers". These files follow a format that is shared by both Gnome and KDE (and, in fact, maintained by the freedesktop.org folks).

The essential bits of this file are something like: 

   [Desktop Entry]
   Encoding=UTF-8
   Name=Test Screensaver
   Comment=Displays test imagery
   Exec=$COMMAND_LINE
   TryExec=$TEST_FOR_COMMAND
   StartupNotify=false
   Terminal=false
   Type=Application
   Categories=GNOME;Screensaver;

$TEST_FOR_COMMAND should be replaced with a concise command to test that the screensaver is installed. For our purposes simply the name of the helper program will be enough.

$COMMAND_LINE will be a command-line referencing a helper program to perform the actual screen saver logic.

[edit]

Raster-based screen savers

These are basically just collections of images that are displayed. They may or may not have additional processing done to them at display-time.

The easiest way to set one of these screen savers up is to dump a bunch of pictures in your $HOME/Pictures and to use the "Pictures folder" screen saver.

However there are a variety of image-manipulating screen savers which normally default to either a general background image folder, or a particular image file set. On Ubuntu, these default to the /usr/share/pixmaps/backgrounds folder and there is no clear UI to change it.

We have an easy solution to part of this problem. Most of the existing screen savers are part of the xscreensaver packages and can be configured more in depth with the xscreensaver-demo program. (Or you can create/modify your ~/.xscreensaver file directly.) Remember: If you're using GNOME, you will *not* want to start the xscreensaver server!

[edit]

Creating your own image-based theme

The gnome-screensaver package includes a program called "slideshow" that can be used to create your own custom slideshow-based screensaver. This is actually the same program that runs both the "Cosmos" and "Pictures" screen savers.

When compiling your image collection, the install location will be /usr/share/pixmaps/backgrounds/$THEME where $THEME is replaced a lowercase version of the name of your theme. (For instance, the Cosmos screensaver uses a directory there called "cosmos".)

Then when creating your screensaver desktop entry file, the command-line you will use will be: slideshow --location=/usr/share/pixmaps/backgrounds/$THEME

[edit]

Vector-based screen savers

Also, the gnome-screensaver package includes a program called "floaters" that can be used to "float" many copies of an SVG image around the screen. This is used by the "Floating Feet" and "Floating Ubuntu" screen savers.

In this case, your image should be located /usr/share/pixmaps/$LOGO where $LOGO is the name of the logo file in SVG format. (So that for "Floating Ubuntu" the $LOGO would be "ubuntu.svg".)

Then when creating the screensaver desktop entry file, the command-line you will use will be: floaters /usr/share/pixmaps/$LOGO

[edit]

System Icons

I'm only covering System Icons briefly. With an SVG image, you can easily create a pseudo-icon theme which over-rides the "distribution icon" or "start menu" icon and replaces it with your own image. You can then easily reference another icon theme as being the "base" theme and all other icons will come from there.

Actually doing this is an excercise for the audience. Remember, when in doubt look at how the other people do it. One real-world example of derived icon themes is the Human (Ubuntu) theme which inherits from the Tango theme which inherits from the Gnome theme.

[edit]

References

SVG:

Grub:

Gensplash:

Bootsplash:

Usplash:

GDM:

Screensavers:

Retrieved from "http://www.bloomingtonlinux.org/wiki/Easy_Effective_Theming"
Personal tools