Preface

Goal: Explaining XFWM4 Theme Step by Step

After two years using Tiling Window Manager, people start to ask me how to do this, and that, and how to where to start learning. First I thought openbox is good start, but I take further backward, start from theme instead, using XFCE4. It means XFWM4 theme.

xfwm4 Theme: xfgaps tiling screenshot

Unified Graphic Material

Also: Reusable SVG, as a base for XFWM4 theme.

I have been also using inkscape for years, it is a good tools to make a theme. But instead of make a different SVG for each part. I create only one SVG for each theme, luckily inkscape has export feature that can be utilized to manage filename target for each part.

xfwm4 Theme: xfgaps SVG slices

This guidance applied for any distribution.

Hint: Use Inkscape’s Batch Export, to export all shapes at once.

Reading

Before you begin. Reading this, is a must:

All material in this article based from above link.

Table of Content

Here, I present a XFWM4 Tutorial, step by step, for beginners.

  1. PNG Solid Border (Very Basic, No Design Yet)

    xfwm4 Theme: Tutor 01 - PNG Solid Border

  2. XPM Solid Border

    xfwm4 Theme: Tutor 02 - XPM Tranparent Border

  3. Minimalist PNG Button (Flat Design)

    xfwm4 Theme: Tutor 03 - Minimalist PNG

  4. PNG Gradient over XPM

    xfwm4 Theme: Tutor 04 - PNG Gradient over XPM

  5. PNG Fancy Icon

    xfwm4 Theme: Tutor 05 - PNG Fancy Icon

For each guidance, there is two parts.

  • Inkscape Part

  • Theme Part


SVG Source

SVG source available at:


Using Inkscape XML

I have made my SVG using Inkscape in my PC. I also have made the target for each export for my particular home directory. And of course, you have your own home directory, that is sifferent than mine.

<svg
   ...
   inkscape:export-filename="/home/epsi/2018 - Inkscape/themes/tutor-01/tutor-01.png"
   inkscape:export-xdpi="90"
   inkscape:export-ydpi="90">

You can easily open the SVG file using any text editor, and do such search and replace to suit your own needs.

<svg
   ...
   inkscape:export-filename="/home/sapi/.themes/tutor-01/xfwm4/tutor-01.png"
   inkscape:export-xdpi="96"
   inkscape:export-ydpi="96">

xfwm4 Theme: SVG XML Search and Replace

I mostly use text editor to fix dpi issue.


Material Color

I’m using Google Material Color

There is also an inkscape palette:

A very useful stuff, you just have to put it at ~/.config/inkscape/palletes.

Inkscape: Google Material Colors Pallete


Dotfiles Resources

From dotcats telegram channel and groups. We are mostly cats.

Theme

Known dotfiles resources containing XFWM4 theme.

Tools

Known dotfiles resources containing XFWM4 tools.


What’s Next

Tutor One, PNG Solid Border. Consider start reading [ Part One ]. Let’s get it started.