Learn and Discover Open Source with Daily Genuine Experience. From Coding, Design, Package Management Tweak to Desktop Customization.
 
   

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.

Inkscape Document

SVG source available at:

SVG Filename

Copy our previous document and name it as tutor-02-solid.svg, or anything you desire.

Box Size

We are using 10px border for this theme.

Open the SVG file, and select Left box. You can see the size is [W*H = 10px * 20px].

Layer

Create new layer named, theme, or anything you want.

Create Solid Border, above the Left box. We are going to divide the 10px width into three area

  • 4px: Black (#000000ff)

  • 2px: Yellow500 (#fff176ff)

  • 4px: Leave it empty, no object.

xfwm4 Theme: Tutor 02 - Solid Border Window

The Box.

Continue for each box, until all border finished as a whole.

xfwm4 Theme: Tutor 02 - Slices

Inactive Border

Add rounded corner. It require inkscape tools, such as Path - Difference.

Export PNG

This is a tricky part.

In general, to export the PNG, you must hide both name layer and background layer. 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 bottom-left-active.png. 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.

xfwm4 Theme: Tutor 02 - Active Full Preview

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.

xfwm4 Theme: Tutor 02 - GIMP Preview


Checking Out The Theme

This is the XFWM Part.

Mogrify

The last thing to do is to convert PNG files to XPM. You can do this using mogrify, from ImageMagick.

$ mogrify -format xpm *.png

xfwm4 Theme: Tutor 02 - Mogrify

Now you can safely delete all the PNG file.

Inside XPM

It is like a C language script document.

/* XPM */
static char *bottom_left_active[] = {
/* columns rows colors chars-per-pixel */
"10 10 3 1 ",
"  c black",
". c #FFF176",
"X c None",
/* pixels */
"    ..XXXX",
"    ..XXXX",
"    ..XXXX",
"    ..XXXX",
"    ......",
"    ......",
"          ",
"          ",
"          ",
"          "
};

Changing XPM

I would like to change the code from X to space, 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.

/* XPM */
static char *bottom_left_active[] = {
/* columns rows colors chars-per-pixel */
"10 10 3 1 ",
"@ c black",
". c #FFF176", 
"  c None",
/* pixels */
"@@@@..    ",
"@@@@..    ",
"@@@@..    ",
"@@@@..    ",
"@@@@......",
"@@@@......",
"@@@@@@@@@@",
"@@@@@@@@@@",
"@@@@@@@@@@",
"@@@@@@@@@@"
};

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 active_color_1 and active_color_1.

Consider change this part.

static char *bottom_left_active[] = {
"@ c black",
". c #FFF176", 
"  c None",
}

It is easy when you master your text editor. Just do search and replace to get this looks below.

static char *bottom_left_active[] = {
"@ c black s active_color_2",
". c #FFF176 s active_color_1", 
"  c None",
}

Now, the complete XPM would be as below

/* XPM */
static char *bottom_left_active[] = {
/* columns rows colors chars-per-pixel */
"10 10 3 1 ",
"@ c black s active_color_2",
". c #FFF176 s active_color_1", 
"  c None",
/* pixels */
"@@@@..    ",
"@@@@..    ",
"@@@@..    ",
"@@@@..    ",
"@@@@......",
"@@@@......",
"@@@@@@@@@@",
"@@@@@@@@@@",
"@@@@@@@@@@",
"@@@@@@@@@@"
};

Do it for each XPM.

Result

The border would follow the color of your GTK appearance, instead of just Yellow.

xfwm4 Theme: Tutor 02 - XPM with GTK Color

We are done with solid border.


What’s Next

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 ].


Epsi Nurwijayadi bio photo
By Epsi Nurwijayadi