Increase Window Border Size in Xubuntu 14.04 Greybird Theme

I've been testing out Xubuntu 14.04 lately and I like the default Greybird theme.  Though I wondered how to change the width of the window borders.  By default the window borders are very thin -- only 1px wide -- making it nearly impossible to grab with a mouse and resize. 

TLDR:  If you just want a quick way to increase the border size, go to Settings -> Window Manager -> select Daloa.  Or try a couple different themes.  This will give you thicker window borders.

Granted, you can also resize XFCE windows a couple ways:

     http://xubuntu.org/news/window-resizing-in-xubuntu-and-xfce/



How Themes Work 

This section will explain how to customize the window borders in Greybird (or any theme).  

Here's a short article that explains how the theming works:

     http://wiki.xfce.org/howto/xfwm4_theme

The visual components are apparently defined as XPM3 files.   Overall, the file format is like ASCII art, where the characters can be mapped to colors.  For example, here is ASCII art representing the text "HI"

 x x  x
 xxx  x
 x x  x

The art is then wrapped in a syntax like C-code to describe the meta data. I'll define a 8x3 image having two colors.  It will using two characters ' ' (space) and 'x' for the ASCII art.  Below, the text in /* */ are comments that explain the file format: 

/* XPM */ 

static char * YOUR_VARIABLE[] = {
/* define a 8x3 image: width height colors chars_per_pixel */ 

"8 3 2 1",

/* define your colors: your_character c RGB_value, where 'c' is a literal */

"  c #ffffff",
"x c #000000",

/* now define the ascii art: rows of characters */

" x x  x ",
" xxx  x ",
" x x  x "
};

Then, if you look at the text, you can visually get a feel of the image ("HI"). The characters ' ' and 'x' are just defined to represent two different RGB values. Any two characters could have been used.


Here are two ways to increase the border size:

Method 1: Patch existing theme

To patch the Greybird Window borders, find the theme XFCE files under:

cd /usr/share/themes/Greybird/xfwm4/

Then, back up the files and try tweaking.  I'll increase the width to 4px and add a one pixel dark border.

sudo vi left-active.xpm

/* XPM */
static char * left_active_xpm[] = {
"4 24 2 1",
".      c #CECECE",
"x      c #7C7C7C",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x...",
"x..."};

sudo vi right-active.xpm

/* XPM */
static char * right_active_xpm[] = {
"4 24 2 1",
".      c #CECECE",
"x      c #7C7C7C",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x",
"...x"};

sudo vi bottom-active.xpm

/* XPM */
static char * bottom_active_xpm[] = {
"24 4 2 1",
".      c #CECECE",
"x      c #7C7C7C",
"........................",
"........................",
"........................",
"xxxxxxxxxxxxxxxxxxxxxxxx"};

sudo vi bottom-left-active.xpm

/* XPM */
static char * left_active_xpm[] = {
"8 8 3 1",
"  c None",
". c #cecece",
"x c #7c7c7c",
"x...    ",
"x...    ",
"x...    ",
"x...    ",
"x.......",
"x.......",
"x.......",
"xxxxxxxx" };

sudo vi bottom-right-active.xpm

/* XPM */
static char * left_active_xpm[] = {
"8 8 3 1",
"  c None",
". c #cecece",
"x c #7c7c7c",
"    ...x",
"    ...x",
"    ...x",
"    ...x",
".......x",
".......x",
".......x",
"xxxxxxxx" };

To trigger a refresh, you can run (in a terminal, as your user):


     xfwm4 --replace

The larger window borders look like:

So now the window borders are larger, easier to see and grab.

Also if you look at other themes, you'll notice the color definitions include a 'c' and an 's' value:


    "   c #CECECE s inactive_hilight_1",

The 's' is a gtk color name (as in the string or symbol).  If defined, it will override the hard-coded color.

Disclaimer: It would be better to copy the files and create a new theme.  Otherwise, you can deselect and reselect the window manager theme in your settings to reload it fully.


If the borders look dashed (due to video card rendering), you can increase the size of the image to improve tiling:

left and right:  4x24 px 

bottom: 24x4 px 

corners: 16x16 px

Method 2: Or, copy thick borders from existing theme Daloa

Daloa borders are 5px, and include a highlight.

# find your themes

cd /usr/share/themes

# Create copy of Greybird

sudo cp -r   Greybird   Greybird-thick

# copy borders from Daloa to new theme

sudo cp Daloa/xfwm4/bottom-active.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/bottom-inactive.xpm     Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/left-active.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/left-inactive.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/right-active.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/right-inactive.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/bottom-left-active.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/bottom-left-inactive.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/bottom-right-active.xpm    Greybird-thick/xfwm4/

sudo cp Daloa/xfwm4/bottom-right-inactive.xpm     Greybird-thick/xfwm4/

# look at the colors defined in Daloa's bottom-active.xpm:

# "       c None",

# "+      c #E0E0FF",

# "@      c #A0A0FF",

# "$      c #B0B0B0",

# "#      c #C0C0C0",

# "########################",

# "########################",

# "########################",

# "++++++++++++++++++++++++",

# "@@@@@@@@@@@@@@@@@@@@@@@@"};

# Find/Replace the colors in the new theme with grey colors

sudo sed -i -e 's/C0C0C0/CECECE/'  Greybird-thick/xfwm4/*

sudo sed -i -e 's/A0A0FF/7C7C7C/'  Greybird-thick/xfwm4/*

sudo sed -i -e 's/E0E0FF/E0E0E0/'  Greybird-thick/xfwm4/*

# now update your theme

Settings -> Window Manager -> Pick the new theme "Greybird-thick"

# your new borders look like: