Create a theme for Gnome-Pie!

It is quite easy to create custom themes for Gnome-Pie. All you need to do is creating some images and editing an XML-file to make the theme behave as you want. With this little tutorial I’ll give an overview of the steps needed to create a theme.

Themes of Gnome-Pie

The themes of Gnome-Pie are either installed to /usr/share/gnome-pie/themes or /usr/local/share/gnome-pie/themes - you can have a look at these to get an impression.

When you create a new theme you should put it in your home directory in ~/.config/gnome-pie/themes, there they’ll discovered as well.

1. Decide what you want

This step might be difficult if it’s your very first theme due to your limited knowledge on what is possible with the themes of Gnome-Pie. Therefore I list some possibilities and restrictions here:

• Each theme consists of an arbitrary amount of image layers for the center and the slices of a pie.
• An image can be in various formats (svg, png, jpg, …) and sizes. But it is best if all images are svg’s. These are very small in size and can be scaled without any artifacts.
• Slice layers have two states: when the mouse hovers over a slice, this slice is active else it is inactive.
• The same applies to center layers: when any slice of the pie is hovered, the center is active. If no slice is hovered (e.g. the mouse is on the center of the pie), the center is called inactive.
• Depending on it’s state, a layer can behave differently.
  • For center layers you can specify its rotation speed, rotation mode, colorization and scale.
  • For slice layers you can specify its colorization, opacity and scale.

2. Draw the necessary images

This can be done with the image manipulating application of your choice. For svg’s this probably will be Inkscape, if you decide to use another image format, the Gimp may be a good choice. I won’t get into detail how to draw those images, but I’ll post the images used for an old version of the theme “Adwaita” as an example.

3. Create a theme.xml file

If you have your images, they need to be combined to one theme with an theme.xml file. Place all your images in the directory ~/.config/gnome-pie/themes/name_of_your_theme. You may have to create this directory if it doesn’t exist. Then create a new file in this directory called theme.xml.

The basic structure of this XML document is as follows:

<?xml version="1.0" encoding="UTF-8"?>

<theme>
    <pie>
        <center>
            <center_layer />
            ...
        </center>
        <slices>
            <activeSlice>
                <slice_layer />
                ...
            </activeSlice>
            <inactiveSlice>
                <slice_layer />
                ...
            </inactiveSlice>
        </slices>
        <caption />
    </pie>
</theme>

Remember, there can be an arbitrary amount of layers! The order of the layers in the XML file specifies how they are painted on top of each other. The first layer will be the bottom-most, succeeding layers will be painted on by one on to each other.

The most basic, working theme without any images looks like that. Maybe you can use this as a base and start experimenting!

<?xml version="1.0" encoding="UTF-8"?>

<theme name="Simple" description="The simplest theme" author="Simon Schneegans" email="code@simonschneegans.de">
    <pie>
        <center>
        </center>
        <slices>
            <activeSlice>
                <slice_layer type="icon" />
            </activeSlice>
            <inactiveSlice>
                <slice_layer type="icon" />
            </inactiveSlice>
        </slices>
        <caption />
    </pie>
</theme>

For each element there are some attributes which can be specified. Not all of them are necessary, the following is a complete list as reference. On the right side there is the default value. Each element with a default value is optional, all others are marked as mandatory.

The <theme> element

The <pie> element

The <center> element

The <center_layer> element

The <slices> element

The <slice_layer> element

4. Post a screenshot in the comments

If you created a theme you’re happy with, share it! Please post a screenshot or the entire theme in the comments! I’m very pleased to include new themes in future releases of Gnome-Pie!

Happy theming!

Comments