Creating a new style (aka "theme"): ----------------------------------- After getting Hackedbox up and running, the next thing you want to do is change the colors/fonts/etc. on the screen. Hackedbox uses a "style" to read its configuration information. A style in Hackedbox consists of X resources placed in a file. Just like the menu file (see README.menu), the style file can be put anywhere on the filesystem; as long as you have read access to the file, Hackedbox can use it. First, we need to decide where to put our style file, and what to name it. I recommend using the naming scheme described on http://themes.org/ when creating styles. Let's get started. Let's put our new style into a file named `results.' Following the themes.org naming scheme, this file will go into .hackedbox/styles. Same as with the menu file, we use our favorite text editor to create the new style. X resources consist of a key and a value. The key is constructed of several smaller keys, delimited by a period (`.'). Keys may also contain a star (`*') to serve as a wildcard, which means that one line of typed text will match several keys. This is useful for styles that are based on one or two colors. Hackedbox allows you to configure it's two main components: the menus and the window decorations. Lets begin by creating a style for our toolbar. First we need to define a "texture" for the toolbar and it's components. Textures tell Hackedbox how to mold or shape the colors we supply. A texture is comprised of the following elements: Raised / Sunken / Flat give the component a raised, sunken or flat appearance (respectively) Solid / Gradient tell Hackedbox whether to draw a solid or gradiented texture Interlaced tells Hackedbox to interlace a gradient (and gradient ONLY) texture Bevel1 / Bevel2 tells Hackedbox which type of bevel to use. NOTE on Bevel1 / Bevel2: Bevel1 is the default bevel. The shading is placed on the edge of the image. Bevel2 is an alternative. The shading is placed one pixel in from the edge of the image. NOTE: the texture strings don't have to be capitalized like they did in previous versions. They are still placed in capitals here, because things like the bbtools still use the old method. We define colors for the textures. Colors can be any valid X colorname (from the RGB database) or it can be a color specifier, as described by 'man 1 X.' All textures have a color and a colorTo key. These keys are required for gradient images. For solids, only color is needed. Not all textures have a text color, just certain base textures. Next, let's move onto the menus. Since Hackedbox was written in C++, all of the menus used in it are subclasses of one generic base class. Hackedbox reads the style for the configuration for that base class, which applies to all the menus used in Hackedbox. The menu has two main parts, the title and the frame. There is nothing visible under them, so we only configure these two components. The menu frame and menu title BOTH have a configurable text color, and the menu frame has a highlight color and the corresponding highlighted text color key. Let's assign some textures and colors to our menu, and see what our style file looks like so far: ... menu.title: Raised Diagonal Interlaced Gradient Bevel1 menu.frame: Raised Diagonal Gradient Bevel1 menu.title.color: grey20 menu.title.colorTo: rgb:8/8/7 menu.title.textColor: grey85 menu.frame.color: rgb:8/8/7 menu.frame.colorTo: grey10 menu.frame.textColor: white menu.frame.highlightColor: grey85 menu.frame.hiTextColor: grey20 ... Next, we need to configure our windows. Windows are like buttons, they have two states, focused and unfocused. There for we define a separate texture for unfocused windows and focused windows. The buttons on the titlebar are focus dependant also, so we need to configure them as well. The buttons only have one "pressed" state, so we only have to define that once, instead of having a focus.pressed state and an unfocus.pressed state. The window frame is the thin border around the client window. Let's be sure to catch it as well. After adding the window config, our style now looks like this: ... menu.title: Raised Diagonal Interlaced Gradient Bevel1 menu.frame: Raised Diagonal Gradient Bevel1 menu.title.color: grey20 menu.title.colorTo: rgb:8/8/7 menu.title.textColor: grey85 menu.frame.color: rgb:8/8/7 menu.frame.colorTo: grey10 menu.frame.textColor: white menu.frame.highlightColor: grey85 menu.frame.hiTextColor: grey20 window.focus: Raised Diagonal Interlaced Gradient Bevel1 window.focus.button: Raised Diagonal Gradient Bevel1 window.unfocus: Raised Diagonal Gradient Bevel1 window.unfocus.button: Sunken Diagonal Gradient Bevel1 window.button.pressed: Flat Diagonal Interlaced Gradient window.frame: Raised Solid Bevel1 window.focus.color: grey window.focus.colorTo: grey20 window.focus.textColor: grey85 window.focus.button.color: grey window.focus.button.colorTo: grey20 window.unfocus.color: rgb:8/8/7 window.unfocus.colorTo: grey20 window.unfocus.textColor: grey window.unfocus.button.color: grey20 window.unfocus.button.colorTo: grey window.button.pressed.color: rgb:4/4/38 window.button.pressed.colorTo: rgb:f/f/d window.frame.color: grey85 ... Now all we have to do is finish off the style with a few miscellanous options. These include the title and menu fonts/justification, border color, bevel and handle widths, window move style and the root command. Fonts must be a valid X11 font screen, or a valid font alias. Use a utility like `xfontsel' (and others) to preview fonts. Also use the utility `xlsfonts' to spit out all the current X font names and aliases stored in the X server. Justification can be one of three things: LeftJustify, CenterJustify or RightJustify. The border color is the color applied to the 1 pixel border around the menu frame/title and the window titlebar/buttons/handle/etc. Setting this color can have drastic effects on your style, so don't just leave it set to `black' all the time. ;) The bevel and handle widths control the size and spacing of decorations in Hackedbox. The larger the number, the more space Hackedbox takes up. The window move style tells Hackedbox how to move windows when you drag them with your mouse. There are two options for it: Opaque or Wire. The root command is the command run every time the style is loaded (either at startup or after a reconfigure/style-change). It is used to run a program like xv, Esetroot, wmsetbg, etc. to set an image/color/pattern on the root window. Just supply a command and it will be run. Also, as a note, an X resource file can have comments. Precede the line with and exclamation mark `!' and the rest of the line will be ignored. Let's finish off the details and take a look at our finished style: ... ! Results - theme for Hackedbox ! menu textures menu.title: Raised Diagonal Interlaced Gradient Bevel1 menu.frame: Raised Diagonal Gradient Bevel1 ! menu colors menu.title.color: grey20 menu.title.colorTo: rgb:8/8/7 menu.title.textColor: grey85 menu.frame.color: rgb:8/8/7 menu.frame.colorTo: grey10 menu.frame.textColor: white menu.frame.highlightColor: grey85 menu.frame.hiTextColor: grey20 ! window textures window.focus: Raised Diagonal Interlaced Gradient Bevel1 window.focus.button: Raised Diagonal Gradient Bevel1 window.unfocus: Raised Diagonal Gradient Bevel1 window.unfocus.button: Sunken Diagonal Gradient Bevel1 window.button.pressed: Flat Diagonal Interlaced Gradient window.frame: Raised Solid Bevel1 ! window colors window.focus.color: grey window.focus.colorTo: grey20 window.focus.textColor: grey85 window.focus.button.color: grey window.focus.button.colorTo: grey20 window.unfocus.color: rgb:8/8/7 window.unfocus.colorTo: grey20 window.unfocus.textColor: grey window.unfocus.button.color: grey20 window.unfocus.button.colorTo: grey window.button.pressed.color: rgb:4/4/38 window.button.pressed.colorTo: rgb:f/f/d window.frame.color: grey85 ! misc... borderColor: rgb:2/2/1c moveStyle: Opaque menuJustify: CenterJustify titleJustify: CenterJustify bevelWidth: 2 handleWidth: 4 menuFont: lucidasans-10 titleFont: lucidasans-bold-10 rootCommand: bsetroot -mod 4 4 -fg rgb:6/6/5c -bg grey20 ... Alright! Our style is finished. Let's see how the sucker looks. First we need to tell Hackedbox to use the new style. The way to do that is to edit your menu (refer to README.menu for this) and add: [style] (Results) {~/.hackedbox/styles/results} somewhere in our menu. Taking advantage of Hackedbox' automagic menu updates, all we have to do is close and reopen the root menu and our new style entry will be visible. Select it and Hackedbox will apply the new style we just created.