Create a theme for Gnome-Pie!

The theme "Adwaita"

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.

The themes of Gnome-Pie are installed to /usr/share/gnome-pie/themes – you can have a look a these to get an impression. Local themes can be placed in ~/.config/gnome-pie/themes, 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 the theme “Adwaita” (as seen in the image above) 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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

name: Name of the theme mandatory
description: Description of the theme mandatory
author: Your name mandatory
email: Your e-mail address mandatory

The <pie> element

radius: Radius of the pie in pixels 150.0
maxZoom: Zoom factor for hovered slices 1.2
zoomRange: Area around the hovered slice which is zoomed 0.2
transitionTime: Global animation speed 0.5
springiness: Bouncy-ness of all animations 0.0
fadeInTime: Time for opening animation 0.2
fadeOutTime: Time for closing animation 0.1
fadeInZoom: Initial zoom-factor when opening a pie 1.0
fadeOutZoom: Final zoom-factor when closing a pie 1.0
fadeInRotation: Initial rotation when opening a pie 0.0
fadeOutRotation: Final rotation when closing a pie 0.0

The <center> element

radius: Radius of the center in pixels 90.0
activeRadius: Radius until the center becomes active 45.0

The <center_layer> element

file: Image file used for this layer mandatory
[in]active_scale: Scale factor of this layer 1.0
[in]active_rotationMode: Possible values: auto (turns endlessly around), turn_to_active (the image is rotated so it faces with its right side the currently active slice), turn_to_mouse (the image is rotated so it faces with its right side the mouse) auto
[in]active_rotationSpeed: The speed of any rotation of this layer 0.0
[in]active_colorize: Whether this layer should be colored according to the currently active slice false
[in]active_alpha: Opacity of this layer 1.0

The <slices> element

radius: Radius of a slice in pixels 150.0
minGap: If the gap between adjacent slices becomes to narrow (due to the pie being full of slices) the entire pie will expand 14.0

The <slice_layer> element

type: Type of this slice layer, can be one of the following: file (an image file), icon (the actual icon of the slice is placed at this level of slice) file
file: If type is file: the image file to use, is type is icon: a mask – the icon will be visible at the non-transparent parts of this image mandatory if type=”file”
scale: Scale of this layer 1.0
colorize: Whether this layer gets colorized according to the icon of this slice false

The <caption> element

position: Vertical position of the caption 0.0
font: Font of the caption sans 12
width: Maximum width 100
height: Maximum height 100
color: Color of the font #FFFFFF

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!

13 Responses

    • Simon says:
      November 1, 2011 at 8:51 pm

      Hey this looks really cool! You could create a theme-pack! With themes for some major distributions, like Mint, Arch, Fedora etc! Would be awesome :D

      And maybe the logo is spinning a bit too fast, looks a very hectic in my opinion ;)

      Btw, you can put the theme also in ~/.config/gnome-pie/themes — this is a bit easier since you won’t need root privileges.

  2. albercuba says:
    November 2, 2011 at 5:59 pm

    jaja yes i thought about the theme pack :P and changing the arrow to something else, depending on the distribution, for example in the Ubuntu theme it could be a circle. I’ll do it as soon as i have some free time.

    • Simon says:
      November 9, 2011 at 9:47 am

      Hey really cool :D
      Especially the DebianO-Pie. This is my personal favorite! Thanks a lot for making those… I’m sure that many will use them!

  5. Shadow_Max says:
    January 30, 2012 at 12:41 am

    Hey

    I Have two question before create theme :
    1 – When we creat theme, can we use gif files?
    2 – I have create a test theme myself, but it does not appear in the theme list how can i do to use my theme?

    Thanks

    • Simon says:
      January 30, 2012 at 10:16 am

      1: Gif files may be recognized but they won’t be animated.
      2: If you put your theme directory (the one with the theme.xml file inside) in ~/.config/gnome-pie/themes or in /usr/share/gnome-pie/themes it should be loaded. You have to restart gnome-pie, in order to reload the theme list!

  6. Pingback: Gnome-Pie 0.5 0.5.1! | Simon Schneegans

  7. Pingback: Gnome-Pie: Un lanzador circular para GNOME bastante original

Leave a Reply

*