Zen and the Art of Creating BLACKBOX Styles.

by thewayofzen (thewayofzen@gmail.com) & snkmchnb (snkmchnb@crackmonkey.us)

Blackbox was originally a window manager for the X Window System in the *NIX environments. It aimed at providing the user with a minimalistic, attractive yet customizeable and fast interface. Blackbox then influenced the creation of several other window managers aiming to do more or less the same thing.

Fluxbox, OpenBox, Hackedbox.. all taking more or less the same approach. It was only a matter of time before alternative shell users who were NOT *NIX users grabbed onto the concept.. and before long BlackBox for Windows (and its sister branches) was born.

The actual look of blackbox, as far as the colouring is concerned, is all done through the use of a text file called a STYLE. This text file contains all the definitions for each component of the interface, assigns the way it looks (bevelled or flat?), the appearance of the color (gradients or solid?), fonts and their sizes, and it will even change your wall paper for you. This
tutorial has one goal and that is simple. Helping you create your own styles for blackbox, whether you choose to use any of the *NIX variants.. or a WINDOWS branch. Thats the beauty of it because they all manage to use the same definitions.

Before one begins to create their own style it is important to understand a few things first. Here are those things:

1. Any item can take on a number of different "looks" or "feels" The first of which would be RAISED, SUNKEN or FLAT. These are rather self explanitory but for the sake of keeping things simple do you wish your style to look "3d" then use RAISED or SUNKEN.. if you would prefer a "2D" approach then use FLAT

2. If you choose to use RAISED of SUNKEN as a definition you then enter the realm of BEVEL. Bevel will effect the appearance of the RAISED or SUNKEN object. BEVEL can be defined as either bevel1 or bevel2 . Forgetting to assign a bevel type to any 3D object defaults to bevel1. (Play with these..you will grasp the concept better if you actaully see them in action)

3. The next part of any object definition usually determines the color format. Is your style going to be one color? or do u wish it to fade from one color and then into another different or darker shade of color? This is determined with either GRADIENT or SOLID. Solid is self explanitory while a gradient can be either horizontal, vertical, elliptical, rectangular, or pipecross. (grasped much better through practice)

4. You can add texture to any object you define by making it INTERLACED. This will add the effect that the object is composed somewhat like a ruffled potato chip.

5. The colors of any object can be assigned using a number of different
formats. You can choose from HEX code or RGB.

6. Certain "appearance" definitions can also be given the definition of
PARENTRELATIVE whereby the item will inherit the look of that object which blackbox considers its parent. (for example a toolbar button.. or a toolbar label considers the toolbar itself to be parent)

Any object on the interface you wish to script will generally use an approach where you will assign the LOOK of the object and then assign the color(s) of the object and the font.

To put the above information in perspective consider the following
configuration if you wish to make a toolbar that is 3d and "pops out" at you and changes color vertically from WHITE to BLACK with a GREY font. The standard would be:


Time to get your hands dirty.

The first thing you will find in any style is a blurb at the top tht will fill
you in on the name of the artist, the name of the style and maybe any comments that wish to be made. These usually take the format of:


This is quite self explanitory. After you have created this portion of your
style its time to worry about actual parts of a style and the definitions that
effect how they look to the user. These are handled below.. object by object.

A. THE BLACKBOX TOOLBAR!

The first thing you will notice about Blackbox is the TOOLBAR. The toolbar is made up of a few components. Your toolbar is generally at the top or bottom of the screen. It looks like a stick with buttons on each end. Generally the toolbar itself is made up of a few import elements when it comes to style. They are:


1.Toolbar

The toolbar is assigned its appearance and its color using the following
extensions


2.Toolbar Button

Buttons are defined in a few different ways because they are likely the only moving part of your default interface in blackbox. The toolbar buttons are defined as follows:


3.Toolbar Label

This is the portion of the toolbar that will display your workspace names
informing you of which virtual desktop you are currently working. Its
definitions are:


4.Toolbar Window Label

The part of the toolbar that you find between both sets of buttons is called
the window label. If you are a blackbox for windows user this portion of the style will also define the portion of your systembar that indicates which of your tasks is currently active and focused. It is defined as:


5.Toolbar Clock

Simply put this is your clock. It might even have the date. It is defined with the following extensions:


B. THE BLACKBOX MENU

If one was to right click anywhere on the actual desktop not covered by a
window one would discover the menu. A menu in blackbox is composed of the following elements.

1.MENU TITLE

The menu title is the top part of the menu. It is defined using:


2. MENU FRAME

The menu frame is perhaps the largest part of the menu. It is here that any applications you wish to open or any submenus etc will be found. Change its appearance using:


3. MENU HILITE

The menu hilite is self explanitory. But it is basically the way that the menu shows the user what part of the menu is user is about to choose. Its settings are changed using:


4. BULLET

The bullet is the little thingy that lets you know when something splits off
into a submenu. It defines itself with a shape (square, circle, triangle and empty) and
also a direction (left or right) as:


C. BLACKBOX WINDOWS

Any application in blackbox will open in a window. Each of these windows are made up of a few different parts that all work together to provide you with that window you see. Any window definition found in this section will actually look like it might be assigned its look twice. A closer look will let the user know that there are actually two windows that need to be defined. These are the FOCUS WINDOW(which is the currently ACTIVE window being used by the user) and UNFOCUS WINDOW(any window in the back ground that is open but not necessarily active and being used). The parts of a window that need definition are:

1. Window Title

The window title is the part of the window that, if anything resembles the
toolbar. It is the top portion of the window which houses a few other things on it. (the buttons and labels) Remember: There are two window titles that need be configured. (focus and unfocus)


2. Label

The label on the window is the portion of the window which contains the TEXT. This is the part of the label which lets the user know what that window actually is. It is defined as follows:


3. HANDLES

The window handle is actually part of the BOTTOM of a window. You will likely notice that the window bottom is divided into THREE and that there are two short outer segments with a long bar in the middle. That long bar is the handle. Change its appearance with:


4. Grips

Look at the bottom part of your window again. The grips are the two short
segments that are on each end of the handle. They look to these definitions for their look:focus


5. Buttons

Window buttons are defined in much the same way as the buttons on the toolbar. But with one difference, you have to define the unfocused buttons as well. Use these definitions and you will be fine:


D. Fonts

Fonts can be assigned in two ways. You can assign a font to each of the above elements (A.B.C.) or you can assign one font to be applied to all of them universally. To assign your fonts use the following definitions:


Or if you wish to assign one font to be associated with EVERY object that would use or have use for a font use this as a definition:


Along with assigning a font one is also able to effect the way it sits in its
object. This is called JUSTIFICATION and can be determined as either Center, Right, Or Left:


If one does not assign a font size the window manager or shell will use the
default. If the default bores you, a fonts appearance can be changed by
definings its size (numeric value) or weight (normal or bold)


E. Misc Values

There are certain values that will help you further customize the look and feel of your interface.

1. border

Border is the portion of the window that outlines pretty much every object. It is effected by two values, its color (hex or rgb), and its width (numeric). Use these definitions for your border:


2. Handle Width

This value will change how thick your handle is and then, as a result also
effect the grips on each end. Using a numeric value it is defined with:


3. Bevel

The bevel setting allows you to change the size of the bevel (3d effect) of any object you have defined. It also uses a numeric value and is defined with:


F. RootCommand

The rootCommand in your style is optional. It is this line that will change
the wallpaper of your desktop if you wish it to. It call upon other
applications that may be available on your system to change the background of your desktop. Some of these applications are bsetroot and bsetbg or perhaps xsri or fluxbg. An example of a rootcommand using bsetbg would be:


or

PARENTS AND THEIR CHILDREN?

At some point in this tutorial i have already mentioned the idea of
parentrelative-ness. Here is a general idea of items that you most often see set to parent relative who their "parent" may be:


*IMPORTANT* Any definition that is mentioned in this tutorial is done so using its correct form. And while people might tell you that a style is a style and can be used on any *BOX variant this is not necessarily so. *NIX box is case sensitive while the windows shell replacement *BOX is not. *NIX box requires that the style be in *NIX format, while the windows variants are lazy and do not seem to care. So if you want to be known around the world for your elite style creating talent.. do yourself a favor and learn it right the first time.

For ease of use, and the well being of everyone involved, i include this
template. Feel free to copy and paste. Any value that beings with a "!" is
ignored.


The End!

Thanks Zen for this Highly Detailed Tut on Style Making and Thanks snkmchnb For Posting it on the Forum.

no problem herbalist i hope its what you were hoping it would be.

np

so thewayofzen told me to apply my name to the tutorial as i did the formating and posting of it.. if anyone else wants to submit something they feel should be in the tutorial, by all means do so. this is however a community

Excellent tutorial! I already see that I need to go through my unreleased styles and replace the capitals from menu.bullet, i.e.: triangle not Triangle and make sure other case is also correct (I don't know why I do that).

But, ever the weed that I am, I must point out a few omissions that I see:

1. While it is generally not used, menu.bullet: may also be "empty".

The reason it is not often used is that submenus are not indicated or obvious if the bullet is set to empty and may make menus harder to read, still... it's an option.

2. window.grip.focus: and window.grip.unfocus: if set to "parentrelative" adopt the definitions of window.handle.focus: and window.handle.unfocus: respectively.

3. The window.handle definitions were omitted from the template style.

Please don't take this as criticism, this is a most excellent and thorough tutorial, but there were bound to be a few glitches in the first draft... just pointing to the ones I see for the sake of completeness, I'm not tryng to "grade" it.

And btw, thanks zen for taking the time to do this!

snkmchnb - if you happen to make changes to the tutorial, please delete this post.

crowmag: i'm not going to delete it because you submitted things to the tutorial and i believe to give credit where credit is due.

Crowmag:
thanks every so much for your input.
it is greatly appreciated.

The mention of Case sensitivity in my tutorial spoke specifically to the CODE.

eg: window.label.colorTo:

And not necessarily such things as Triangle or Square. As i have not yet really tested these.
Snkmchnb is correct. The things you have added are actually of importance. And as such your post shouldnt be deleted
I will include them in future revisions if snkmchnb doesnt do so before me. You may also wish to add them into the tutorial yourself and post it somewhere as long as you keep any already creditted help along the way.. and of course be certain to add yourself.
This is a community and this tutorial.. though started by me.. should be built upon by all and any who feel it may be lacking.

no insult taken.
Cheers.
Delaney

Great tutorial, zen! Very straightforward. Just a few suggestions:

--explain what ColorTo means (that it's the 2nd color in a gradient, the two colors are blended in whatever direction you specify; horizontal, diagonal, etc.)

-- explain that if the element is solid, the ColorTo line is not needed at all--or you can just leave that line blank (correct?)

--explain that button.pressed is the color settings for buttons when clicked on by the mouse

--explain that you need the bbwinskin or bbleanskin plugin for the window settings to take effect in Windows. Or, for window.label settings only (right?) to be applied, you need bbcolor, bbcolorex or bbcolor3dc.

...

Some of my suggestions are posed as questions cuz I'm not sure if I'm quite correct on those points.

Again, great job!

ive a couple of days off coming soon.. i would guess its almost time for a revision

great stuff!! very nice work.. perhaps there could be a download link for easier printing? instead of printing out the whole thing or having to cut & paste.. otherwise its some damn good work! thanks for the effort!