XFWM4 Theme - Part Three

This is a five-parts article. There are few sections here.

Preface

Tutor Three: Flat Design, Minimalist PNG Button

Table of Content

Preface: Table of Content
1: Unified Graphic Material
2: Minimalist Theme
3: 2bmat Minimalist Theme
4: xfgaps Minimalist Theme
What is Next?

1: Unified Graphic Material

This is the Inkscape Part.

Inkscape Document

SVG source available at:

github.com/epsi-rns/dotfiles/…/tutor-03

Get the SVG

You may make from scratch or get my tutor-03-button.svg from my dotfiles repository at github.

Slices

Before you begin this the slices that we want to achieve.

xfwm4 Theme: Tutor 03 - Slices Preview

Border

I won’t give much explanation. We’re already have border tutorial in previous article.

We are using 10px border for this theme. Additionaly, the top has 14px height. 10px solid, with additional 4px empty space.

xfwm4 Theme: Tutor 03 - Border Preview

Just export each PNG boxes and test the theme border.

Button

There are some window buttons, in my themerc, my layout is:

button_layout=O|TSHMC

Let me explain with my own window understanding, or better, with target save button

S : shade
St : shade-toggled
H : hide
M : maximize
Mt : maximize-toggled (restore)
C : close
T : stick
Tt : stick-toggled
O : menu

Each button has states:

active
inactive
prelight (hover)
pressed

So we can have a complete button name, for example for close button such as

close-active.png
close-inactive.png
close-prelight.png
close-pressed.png

Note that border only have two states [active, inactive], and do not have the other two state [prelight, pressed].

Detail

Each box button has the size of [W*H = 20px * 14px]. You can clone my example, or you have your own creation.

I’m using goggle material color: red100, red300, red500, red700, red900. You can use other color as well such as: blue100, blue300, blue500, blue700, blue900. Or other color combination, as you desire.

xfwm4 Theme: Tutor 03 - Detail Guidance

2: Minimalist Theme

This is the XFWM Part.

Result

Now, we already have our preview.

xfwm4 Theme: Tutor 03 - Active Window

Usability

The issue with minimalist color is that, it is good in aestethic issue, but lack of functional aspect. In order to solve this usability issue, I put functional icon on keypressed, such as the x icon for close. So that user won’t click the wrong button.

xfwm4 Theme: Tutor 03 - Usability Issue