Tutor Two: XPM Solid Border
No icon yet, we will create a solid border, along with a hole beside the border.
Hints: Use mogrify to convert from PNG to XPM
Unified Graphic Material
This is the Inkscape Part.
SVG source available at:
Copy our previous document and name it as
tutor-02-solid.svg, or anything you desire.
We are using 10px border for this theme.
Open the SVG file, and select
You can see the size is [W*H = 10px * 20px].
Create new layer named,
theme, or anything you want.
Create Solid Border, above the
We are going to divide the 10px width into three area
4px: Black (#000000ff)
2px: Yellow500 (#fff176ff)
4px: Leave it empty, no object.
Continue for each box, until all border finished as a whole.
Add rounded corner. It require inkscape tools, such as
Path - Difference.
This is a tricky part.
In general, to export the PNG, you must hide both
name layer and
We do not want any text in PNG. And we want to export the empty space as transparent in PNG.
Now the tricky part, for each border box parts.
We must select the box first,
so we can have the export target filename such as
Then we have to hide the
frame layer, because we want empty space as transparent.
You can see the selection in figure below.
The next thing to do is to click the export button to export PNG.
Do export for each boxes. Or even better to select all shapes in frame layer, then use Batch Export later.
Check The Result
You can see the transparent result in GIMP, just zoom with 16:1, it will be something like this.
Checking Out The Theme
This is the XFWM Part.
The last thing to do is to convert PNG files to XPM. You can do this using mogrify, from ImageMagick.
Now you can safely delete all the PNG file.
It is like a C language script document.
I would like to change the code from
so empty transparent area will be represented as space instead on any character.
With my Geany as favorite text editor I can open all XPM, and do search and replace at once. No magic required, my XPM will be looks like this below.
Now the looks of my XPM, seems make sense.
GTK Feature in XPM.
The idea of XPM, is that we can add color feature,
overriding the hardcoded hexadecimal RGB setting.
With GTK, we can add
Consider change this part.
It is easy when you master your text editor. Just do search and replace to get this looks below.
Now, the complete XPM would be as below
Do it for each XPM.
The border would follow the color of your GTK appearance, instead of just Yellow.
We are done with solid border.
Tutor Three, Minimalist PNG Button. We are going to have our very first functional theme. This will be equipped with icon, but with minimalist design. Consider reading [ Part Three ].