XFWM4 Theme - Overview

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.

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.

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:

• howto/xfwm4_theme

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)

   

2. XPM Solid Border

   

3. Minimalist PNG Button (Flat Design)

   

4. PNG Gradient over XPM

   

5. PNG Fancy Icon

   

For each guidance, there is two parts.

• Inkscape Part

• Theme Part

SVG Source

SVG source available at:

• github.com/epsi-rns/dotfiles/…/themes

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">

I mostly use text editor to fix dpi issue.

Material Color

I’m using Google Material Color

• material.io/guidelines/style/color.html

There is also an inkscape palette:

• KiSSFLOW/gimp-material-design-color-palette

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

Dotfiles Resources

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

Theme

Known dotfiles resources containing XFWM4 theme.

• Faat Fuut: Fuut13/fuut-xfwm.xfce-theme-Collections

• White Cat: addy-dclxvi/xfwm4-theme-collections

• Hard Cat: epsi-rns/dotfiles/../themes

• Nanda Vera: yuune/Stick-xfwm4

Tools

Known dotfiles resources containing XFWM4 tools.

• Black Cat: noirecat/Shift

What’s Next

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