Creating a new style (aka "theme"): ----------------------------------- After getting Openbox up and running, the next thing you want to do is change the colors/fonts/etc. on the screen. Openbox uses a "style" to read its configuration information. A style in Openbox 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, Openbox 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://bb.classic.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 .openbox/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. Openbox allows you to configure it's three main components: the toolbar, 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 Openbox 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 Openbox whether to draw a solid or gradiented texture Interlaced tells Openbox to interlace a gradient (and gradient ONLY) texture Bevel1 / Bevel2 tells Openbox 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. Now that we understand that, let's define the textures for the toolbar. The toolbar has a main frame, buttons, two labels and a clock label. The buttons have 2 states, so we provide textures for both the normal and the pressed state. ... toolbar: Raised Diagonal Gradient Bevel1 toolbar.button: Raised Diagonal Gradient Bevel1 toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1 toolbar.clock: Flat Interlaced Gradient toolbar.label: Flat Interlaced Gradient ... 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. Next 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.' Let's see how our file looks after adding colors: ... toolbar: Raised Diagonal Gradient Bevel1 toolbar.button: Raised Diagonal Gradient Bevel1 toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1 toolbar.clock: Flat Interlaced Gradient toolbar.label: Flat Interlaced Gradient toolbar.color: rgb:8/8/7 toolbar.colorTo: grey20 toolbar.button.color: grey toolbar.button.colorTo: grey20 toolbar.button.pressed.color: rgb:4/4/38 toolbar.button.pressed.colorTo: rgb:f/f/d toolbar.clock.color: grey20 toolbar.clock.colorTo: rgb:8/8/7 toolbar.label.color: grey20 toolbar.label.colorTo: rgb:8/8/7 toolbar.textColor: grey85 ... As you have noticed, all textures have a color and a colorTo key. These keys are required for gradient images. For solids, only color is needed. You will also notice that we have supplied the color for the text on the toolbar. Not all textures have a text color, just certain base textures. Next, let's move onto the menus. Since Openbox was written in C++, all of the menus used in it are subclasses of one generic base class. Openbox reads the style for the configuration for that base class, which applies to all the menus used in Openbox. 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: ... toolbar: Raised Diagonal Gradient Bevel1 toolbar.button: Raised Diagonal Gradient Bevel1 toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1 toolbar.clock: Flat Interlaced Gradient toolbar.label: Flat Interlaced Gradient toolbar.color: rgb:8/8/7 toolbar.colorTo: grey20 toolbar.button.color: grey toolbar.button.colorTo: grey20 toolbar.button.pressed.color: rgb:4/4/38 toolbar.button.pressed.colorTo: rgb:f/f/d toolbar.clock.color: grey20 toolbar.clock.colorTo: rgb:8/8/7 toolbar.label.color: grey20 toolbar.label.colorTo: rgb:8/8/7 toolbar.textColor: grey85 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: ... toolbar: Raised Diagonal Gradient Bevel1 toolbar.button: Raised Diagonal Gradient Bevel1 toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1 toolbar.clock: Flat Interlaced Gradient toolbar.label: Flat Interlaced Gradient toolbar.color: rgb:8/8/7 toolbar.colorTo: grey20 toolbar.button.color: grey toolbar.button.colorTo: grey20 toolbar.button.pressed.color: rgb:4/4/38 toolbar.button.pressed.colorTo: rgb:f/f/d toolbar.clock.color: grey20 toolbar.clock.colorTo: rgb:8/8/7 toolbar.label.color: grey20 toolbar.label.colorTo: rgb:8/8/7 toolbar.textColor: grey85 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 Openbox. The larger the number, the more space Openbox takes up. The window move style tells Openbox 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 Openbox ! by Brad Hughes bhughes@tcac.net toolbar: Raised Diagonal Gradient Bevel1 toolbar.button: Raised Diagonal Gradient Bevel1 toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1 toolbar.clock: Flat Interlaced Gradient toolbar.label: Flat Interlaced Gradient ! toolbar colors toolbar.color: rgb:8/8/7 toolbar.colorTo: grey20 toolbar.button.color: grey toolbar.button.colorTo: grey20 toolbar.button.pressed.color: rgb:4/4/38 toolbar.button.pressed.colorTo: rgb:f/f/d toolbar.clock.color: grey20 toolbar.clock.colorTo: rgb:8/8/7 toolbar.label.color: grey20 toolbar.label.colorTo: rgb:8/8/7 toolbar.textColor: grey85 ! 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 Openbox 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) {~/.openbox/styles/results} somewhere in our menu. Taking advantage of Openbox' 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 Openbox will apply the new style we just created.