Saturday, December 13, 2014

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:






12 comments:

e2 said...

Excellent guide, thanks for posting this.
That should be the default window border size imho as it's so much easier to grab hold of.

Aoxo Moxoa said...

You are a saint! I don't know who is to blame for there being 8 or so themes in Xubuntu by default, all of which have a 1px border. KDE makes it pretty simple; there is a border thickness option. Easy. This solution however is not so obvious. It's weird, and it wouldn't have made much sense without your explanation. Thank you. I now have Numix with a 5px border, and I no longer have to punch a kitten in the face every time I want to resize a window.

Every recommended solution to the problem involves the user compromising. Chang to another theme, change your behavior, suck it up and get used to it....

P.S.
Is there a typo on your example of "bottom-right-active.xpm"? It contains this line:

static char * left_active_xpm[] = {

When i got to bottom-right-active I just copied the text from bottom-left-active and did a couple quick edits. I wonder if you did the same thing but didn't edit that line to say right_active_xpm. Or is your example correct?

Thanks again!

sevkeifert said...

Thanks for the feedback. :-)

Those pseudo variables are apparently ignored in the XPM3 files. For example in Greybird, they just symlink the inactive files to the active files ... so half of the variable names are wrong. The only thing that matters is the filename.

Pablo Alessandro said...

Thanks so much for the post, man. I'm new to Linux and I've been trying to find a distro that fits me. I loved Xubuntu, but I got so frustrated everytime I had to use the windows resizing options. It annoyed me all the time. I really can't get why they don't add something like this Greybird-thick by default.

DaVince said...

Considering you did all the hard work already... could you please provide this as a theme? That would be fantastic! :)

e2 said...

This is the theme I've been using which is based on this thread.

http://linuxinternationals.org/forum/viewtopic.php?f=167&t=14562

DaVince said...

e2, that theme works excellently! You're a life saver. Thank you very much!

Aaron Franke said...

How would one re-size the top? I see 10 different XPM files marked "title-[1-5]-[active/inactive].xpm" Each one contains a vertical line of text, which is very strange, since I thought the title was horizontal? It doesn't seem to follow your method of laying it out like ASCII art.

Kevin Seifert said...

I think it should follow the same xpm pattern as the sides and bottom. The vertical slice is probably just tiled.

I'm not exactly sure which files to tweak for the top... I haven't tested that yet.

Mitch said...

Does this technique work in Ubuntu 16.04? I've tried several different edits to a copy of Greybird and none of my changes show up.

e2 said...

^ Mitch, Xubuntu 16.04? It should work fine as long as you haven't used a ppa (or other method) to upgrade past the gtk3.18 series.
You are selecting your edited theme from both Appearance and Window manager in the xfce settings?

I've left the 2 greybird themes I made based on this thread at LI (link is a few post back).
Looking at them may help you to see why your edits aren't working.

I've not being using greybird for a while because of: https://github.com/shimmerproject/Greybird/issues/120 but that shouldn't effect Xubuntu 16.04

There doesn't seem much point in me trying to do anything with greybird until it's ported to gtk3.20+, thankfully it seems as if it might not be too much longer until that happens.

Romeo oot said...

thank a lot. extremely useful!