ObjectBar Skinning Guide
By Jeff Bargmann
Welcome to my crash course on ObjectBar Skinning! With this document you’ll be
able to learn all you need to know about how to create an ObjectBar theme. The
first page or so begins by introducing the ObjectBar mentality and prepares you
for how to think about creating and designing your theme. Next, the basic
thought-process behind the skinning of a bar is then introduced. From a learning
aspect, the first page or so is the important part. What follows for the next
several pages is a simple walkthrough of the entire skin format, describing all
the tags you’ll need to use and giving extra bits of information along the way.
At the end, I’ll wrap up by explaining how to put the magic together in the form
of an ObjectBar bar itself, by use of the program.
Couple things to get out of the way right away. One: ObjectBar skins cannot do
per-pixel transparency with the desktop. Skins can have transparency within
them, by use of tga files within the skin itself (but not as the background)
such as for an individual item's background or group’s background. Any
non-rectangular end-product is the result of use of transparent-pink. And two:
when making an ObjectBar skin it’s important that you plan and design out your
entire bar’s contents, and its look, together before you start anything as far
as actual bar/skin creating. You’ll realize the importance of this shortly.
(As far as
ObjectBar is concerned, the systray and clock are originally created as two
separate groups then merged together as one, so they can share a common
group-background.) Whenever you add something in ObjectBar, it creates a group
for it. Now a grouping - known in the skinning format as "sections" - is nothing
but a holder for items. You arrange groups on your bar, and arrange items inside
you groups. You can then merge groups together. Some types of things that you
add consist of multiple items, such as a taskbar, system tray, or
folder-listing; all of which fill themselves automatically with multiple items.
Other types of things that you can add consist of just one item, such as a
shortcut, popup launcher, a clock, etc. Now as far as skinning is concerned,
groupings are significant as each grouping can have its own unique style for its
background and for its items. This is what makes the start button area have no
gripper, the Quick Launch have a gripper and items that have a "flat" look when
not mouseovered, a taskbar that has its items look like buttons all the time,
etc.
The trouble most people have with ObjectBar skinning, beyond the lack of good
learning samples, is the dissociation between the skin building in the bar
building. Its tricky because you can't just start ObjectBar, add something and
set its look...its not possible to just in the program create a grouping and
then say "ok, for this grouping use this background bitmap and these margins"
without doing that work up front. You first have to create a skin that lists the
images and margins etc, and then apply it to the bar. This all requires a degree
of planning most aren’t willing to do, as you have to have to figure out on
paper really what you want your bar to be, design a skin around it with the
necessary group-styles, then build the bar and apply the skin to it.
Now...how to build a skin. Within the skin, you first set up a single image for
the background. Whenever your skin is in use, that background is applied first
to the entire bar. You can also set up content-margins so that the bar can have
borders for resizing, etc...groups will then be arranged within the bar within
those margins so the groups will not overlap that specified border area. From
there everything else is drawn on top of the bar-background you have just
defined. Next, you define different looks for each kind of "group" you want to
have available. For each kind of group, you'll define a background to cover the
entire area of that group, as well as content-margins that can offset items for
areas for grippers, borders around the group, etc. Next up you'll define
background images and fonts/colors to use for default-state items, mouseovered
items, and selected items...and you'll do this for each type of group-style you
plan to have.
Hopefully this has made sense so far. Here's where it gets fun. The .obskin
format! It's an ini-style format, so content for each area is put under a [NAME]
heading.
Of what I just talked about above, [TaskbarBackgroundSkin] is where you'll put
your overall-bar background image. Within [SectionSkin] you can put your
group-background for your first group-style. [NormalItemSkin] is where you put
the background image for each individual item, in its default state, for use
with the first group-style. [MouseoverItemSkin] and [SelectedItemSkin] are where
you'll put the background images for individual items for the mouseover and
selected states, respectively. To define additional group-styles, we do the same
thing, but add an index on to the end of the header’s title. So...
[SectionSkin_2], [NormalItemSkin_2], [MouseoverItemSkin_2] and
[SelectedItemSkin_2] would be where you define your second group-style, and
[SectionSkin_3], [NormalItemSkin_3], [MouseoverItemSkin_3] and
[SelectedItemSkin_3] would be where you define your third group-style, etc etc
however many you need. The only “gotcha” is that you have to tell ObjectBar in
the [General] area how many group-styles is should expect to load from your
skin. That process looks like this:
Telling ObjectBar how many different group-styles your skin has:
[General]
Where ever there is an ini section like all the ones I mentioned above that are
looking for an image, there is a standard format for it. Since an ObjectBar
theme is basically one big bar-background image, with smaller group-background
images on top of it, with even smaller item-backgrounds layered on top of
that...each have the same format for defining them. Its your standard "define
stretching margins" kind of deal. An example:
hBitmap=background.bmp ;The relative path of the image file (bmp or tga)
; relative from the location of the ini
LeftWidth=4 ;The number of pixels of the left edge of the image
; to be drawn as-is before stretching/tiling begins.
RightWidth=4 ;The number of pixels of the right edge of the image
; to be drawn as-is before stretching/tiling begins.
TopHeight=4 ;The number of pixels of the top edge of the image
; to be drawn as-is before stretching/tiling begins.
BottomHeight=4 ;The number of pixels of the bottom ight edge of the image
; to be drawn as-is before stretching/tiling begins.
TileVCenter=1 ;Tile the center portion vertically. Use 0 to stretch.
TileCenter=1 ;Tile the center portion horizontally. Use 0 to stretch.
OmitCenter=0 ;An optional - but highly recommended if you can ever use it -
; Speed/performance optimization tag.
;
; If you include this and set it to 1, then ObjectBar will skip ; drawing the
center part of the image, which would have
; otherwise been drawn to fill the entire often-large center
; (tiled/stretched) area. Clearly an expensive operation if
; you’re just filling the center with transparent-pink or the
; same color as the background.
;
; An example of where you’d use this is for if you have a
; group-background that is just a gripper. In that case you
; could set a LeftWidth to whatever you needed for the gripper,
; then “1” for omit center, and as result
; instead of ObjectBar tiling/stretching hundreds of pixels of
; nothing, it can save having to do that altogether.
Again, those above tags are to be used in all of the groups where you'd want to
define an image, e.g.:
[TaskbarBackgroundSkin] [SectionSkin] [NormalItemSkin] [MouseoverItemSkin] [SelectedItemSkin]
Now, custom tags for use on only some of the ini sections.
The following shows us giving a name to each of the group-styles. This name
appears when you’re configuring a group in ObjectBar, in the list of available
group-styles to choose from.
[SectionSkin]
SectionType = Quick Launch Area ;defines the name of the first group-style.
[SectionSkin_2]
SectionType = System Tray/Clock ;defines the name of the second group-style.
Etc.
The following tags are used to define custom per-state fonts/fontcolors for
items on a per-groupstyle basis, and should be placed in each and every area of
the INI that represents an item state. E.g. [NormalItemSkin], [MouseoverItemSkin],
[SelectedItemSkin], [NormalItemSkin_2], [MouseoverItemSkin_2],
[SelectedItemSkin_3], etc. These tags can also be used in [General] to set the
default font for the whole bar, but I would not recommend doing so as you’re
likely to have unexpected results. Unfortunately no WindowBlindsSkin-like way to
set colors/fonts here so a lot of replication :(
Font = MS Sans Serif ; Defines the font-face
FontSize = 8 ; Defines the font size
FontItalics = 0 ; 1 to use italics, 0 to not
FontBold = 0 ; 1 to use bold, 0 to not
FontUnderline = 0 ; 1 to use underline, 0 to not
FontStrikeout = 0 ; 1 to use strikeout, 0 to not
FontAntialias = 1 ; 1 to use antialiasing (on by default), 0 to not.
; (this option is available in case you have problems
; With text antialiasing over magic-pink, which
; can cause problems with getting proper transparency)
TextColor = 255 255 255 ; Set the font’s color. R G B format, 0-255.
FontDefColor = 255 255 255 ; Same as above. You should include BOTH TextColor
and
; FontDefColor with identical values to ensure proper
; results.
;
; Reason: ObjectBar’s format is victim of being
; changed one too many times in its early years. As such,
; back-compatibility got the best of it, and the best
; fool-proof way to ensure that you get proper results is
; to fill in both “TextColor” and “FontDefColor”
; identically each time you want to give a color to use.
Next up, margins:
Defining a content-margin around the bar itself. The purpose of this is so that
groups themselves don’t have to worry about interrupting the border of the bar
itself. So if you have a border going around your bar 6 pixels wide, you could
set all to 6, and then all the groups will be laid out inside the bar 6 pixels
in, in each direction. These tags go in the [General] section.
[General]
EdgeBuffer_Left=6 ;Offsets the inner-contents of the bar from the left side by 6
; pixels. The only drawing that will be done in this space will
; be the bar’s background.
EdgeBuffer_Right=6 ;Offsets the inner-contents of the bar from the right side by
6
; pixels. The only drawing that will be done in this space will
; be the bar’s background.
EdgeBuffer_Top=6 ;Offsets the inner-contents of the bar from the top side by 6
; pixels. The only drawing that will be done in this space will
; be the bar’s background.
EdgeBuffer_Bottom=6 ;Offsets the inner-contents of the bar from the bottom side
by
; 6 pixels. The only drawing that will be done in this space
; will be the bar’s background.
Defining a content-margin around each grouping. The purpose of this is for if
for example you want to have the contents of your group not start for ‘x’ number
of pixels because you want to have a gripper there, or if you have a border
going around the grouping that you don’t want the background images of the
individual items to disrupt, etc.
[SectionSkin] ; (or [SectionSkin_2], or [SectionSkin_3], etc)
SectionBuffer_Left=8 ;Offsets the inner-contents of the grouping by 8 pixels,
; to give room for some border image, and for a gripper. ; The only drawing that
will be done in this space will
; be a portion of the bar’s background image, overlaid by
; the group’s background image.
EdgeBuffer_Right=6 ;Offsets the inner-contents of the bar from the right
; side by 6 pixels The only drawing that will be done in
; this space will be the bar’s background.
EdgeBuffer_Top=6 ;Offsets the inner-contents of the bar from the top
; side by 6 pixels The only drawing that will be done in
; this space will be the bar’s background.
EdgeBuffer_Bottom=6 ;Offsets the inner-contents of the bar from the bottom
; side by 6 pixels The only drawing that will be done in
; this space will be the bar’s background.
Resize border. This *has no effect visually*... its just there for if you to
specify to ObjectBar how big of an area, on each edge, you want the user to be
able to click and grab the bar to resize it. Again, this does not offset
content, that’s the EdgeBuffer_*’s job. These tags go in the [General] section.
These default to ‘4’ all the way around, so if you don’t care to its not
important to include them.
[General]
ResizeBorderSize_Top=0 ; Tells ObjectBar that the user cannot resize the bar by
; grabbing the top of it, since I set this one to ‘0’.
ResizeBorderSize_Left=4 ; Tells ObjectBar that the user can resize the bar by
; grabbing the left-6-pixels of it.
ResizeBorderSize_Bottom=4 ; Tells ObjectBar that the user can resize the bar by
; grabbing the left-6-pixels of it.
ResizeBorderSize_Right=4 ; Tells ObjectBar that the user can resize the bar by
; grabbing the left-6-pixels of it.
Arrows. These are used for when a grouping has overflow, like a taskbar or menu
with too many items to possibly show, and there needs to be arrows to scroll the
content.
It is important that you include these, or else there may not be any way to
scroll to see overflowed content.
[LeftArrow]
hBitmap = ..\ArrowL.bmp ; Relative path from the ini of the
; left-arrow image to be used. Should
; consist of the glyph only
; (e.g. a 6x6 kindof icon)
hBitmapGrayed = ..\ArrowL_Grayed.bmp ; Relative path of the arrow image to be
used
; when the left-arrow is visible,
; but when not in use (e.g. scrolled all the ; way to the left)
Repeat with [RightArrow], [DownArrow], and [UpArrow].
Repeat also with [PopupArrow]... this arrow is used for when an item on that bar
has a popup menu associated with it.
ObjectBar determines when or when not to use this arrow... it is used all the
time for when a menu-style bar has a popup associated with it, but only
sometimes on a horizontal/taskbar-style bar, such as if “automatic grouping” is
enabled on a taskbar on the bar.
Arrow Background (optional, not really important). You can optionally have an
image to draw itself as the background of an arrow-area. You will use the
standard image tags that you used for [NormalItemSkin], etc.
[ArrowNormalItemSkin] ; (or [ArrowMouseoverItemSkin], or [ArrowSelectedItemSkin])
hBitmap = arrow_background.bmp
LeftWidth=4
RightWidth=4
TopHeight=4
BottomHeight=4
;etc etc etc
Simiarly, separator items. You can add a separator to a bar, and here’s your
chance to skin how it looks. Same deal as above, a separator is basically an
empty item with a different item-background. Here is where you say what that
background is.
[SeparatorItemSkin]
hBitmap=separator.bmp
LeftWidth=5
RightWidth=5
TileCenter=1
;etc etc etc
Skin Name. Getting to this a little late, but you put the name of your skin in
the [General] section. Filenames don’t matter at all so it’s not like the
filename has to match. The only thing that counts as far as filenames go is that
the extension is “obskin”.
[General]
SkinName=My Super Cool New Skin!
Companion Skins. You can reference another skin that ObjectBar should
automatically use on popup-menu for the bar. Popup menus are bars just like any
other bar in ObjectBar, but vertical in orientation and usually designed to look
like menus. You can create one by adding a “popup menu” item to a bar in
ObjectBar’s editor, or by adding a “Folder Menu” item which creates one on the
fly. Whenever you create a popup menu on your bar, it will use the skin whose
relative path is given in the “CompanionSkin.Popup” tag.
[General]
CompanionSkin.Popup = "Popup\PopupMenu.obskin" ;Skin to use on popup-menus,
filename
; relative to this skin’s ini location
**SPECIAL NOTE!!! If you specify the following relative path for the companion
skin, ObjectBar will ALWAYS use a converted version of the current WindowBlinds
skin’s menu skin as its companion popup-menu skin. So, if you want your popup to
always match Windows’s look? Use this value for your companion skin:
CompanionSkin.Popup = "..\WindowBlindsSkins\CurrentSkin\Popup\Popup.obskin"
Finally... general skin-metrics. This is the trickiest and least-well-defined
part of the format. I’d usually just pop the following in to my skin definition
and go from there tweaking as necessary...read the comments for each for
important information.
[General]
ItemHeight=23 ;IMPORTANT! Represents the height of your items on your bar.
; For best results set this as the actual height of the bitmap
; you’re using as your item background
; ALSO IMPORTANT. You can define this tag both in the [General]
; section, and also in your [SectionSkin], etc sections in case
; you need per-style control on the setting.
ItemWidthBuffer = 3 ; You very well may want to customize this if you’re
tweaking.
; This is used when calculating how wide to made items,
; by taking the actual width of the content and adding this
; value on to each side. Useful for if your item-background
; has a thick border. Unfortunately, you cannot set this to
; a unique value for each different group-style you have.
TightItemWidthBuffer=2 ; Same as the previous tag, but a smaller value of that.
; This is used when items are being packed together more
; tightly, for example when a group is showing its items as
; icons-only instead of icons-and-text
ItemIconBuffer_LeftOfIcon = 10 ; see below note
ItemIconBuffer_BetweenTextAndIcon = 4 ; see below note
ItemIconBuffer_RightTextClip = 8 ; see below note
; For the prior 3 tags, think about items that contain both icons and text. When
; an item contains both icon and text, the item’s contents are not centered, but
; rather are aligned left. You should use these tags should specify how far away
; from the item’s left edge you want the icon to start (the 1st tag), how much
; space you want between the text and icon (the 2nd tag) and finally how far
; away from the right edge of the item ObjectBar should clip the text. (The
; first and last tags there could be considered similar to the ContentLeft &
; ContentRight tags in WB)
; NOTE: Similar to ItemHeight, these tags can be specified both in [General] for
; the defaults, and in any [SectionSkin], [SectionSkin_2], etc sections in case
; you need per-style control on the setting.
ItemSpacing.cx=1 ; Spaces systray icons. Not particularly important.
ItemSpacing.cy=1 ; Spaces systray icons. Not particularly important.
You’ve made your skin, now: Building your Bar
This is the easy part. Start by opening the ObjectBar 2 theme editor.
Starting your theme
Start a new theme by going to the “File” menu and choosing “New”->”Start New
Theme...”. Choose a name for your theme and create it. You’ll be prompted to
create your first bar for the theme. (You can create more later from the File
menu.) Give a title, and choose its orientation. Just choose to use a
WindowBlinds skin for now, as we’ve yet to add our skin to the skin folder for
this theme.
Put our skin in the theme’s skin directory
Once we create our theme, as a skin designer we must navigate to the theme’s
directory. The theme’s directory is located in the same directory as the
ObjectBar.exe program file, so navigate to its install directory (Often
“c:\Program Files\Stardock\Object Desktop\ObjectBar”). Your theme will then have
a directory named after the name you gave your new theme. Open your theme’s
folder. You will see a “Skins” subdirectory. This is where your skin will go.
Create a directory for your skin inside the skins directory and put it all in
there. For example, a full-pathname for my skin file after I’m all done might be
something like: “c:\Program Files\Stardock\Object Desktop\ObjectBar\MyNewTheme!\Skins\MySkin!\mycustomskin.obskin”.
Apply our skin
Now that our skin is in place, head back to the theme editor. Head to the
“Skins” tab, and choose “Change Skin...”. In the Change Skin dialog choose the
radio button to “Use a skin from this theme”, and then choose your skin from the
listing.
Add Content to our bar
In the theme editor, head to the “Content” tab. Add whatever you want to be in
your bar... if you want a variety of things to share a common
container/background, click on it and choose to “Merge up”, which will create a
group with what you selected and the group that’s directly above it. (If you
want to split an existing group apart, click “Split Group” and it will perform
the reverse action, splitting whatever is currently selected from the group
above it.)
Use the arrows to the right to move groups around, or to move elements within a
group around. Double click any entry listed in the Active Elements to configure
their look, feel, and functionality. (EXCEPTION! With Popup-Menu Items, double
clicking / clicking “Edit Submenu” results in it editing the submenu instead of
configuring that item’s properties. To give popup-menu items a custom icon or a
bitmap, etc, hold CONTROL while double clicking their entry in Active Elements)
IMPORTANT! Something you may notice if you choose to dock your bar to the edge
or turn off the sizing-restrictions from the Skins tab... there’ll be an item in
the active elements called “-----Extra Space-----“. You cannot group this item
with any others or configure it, its sole purpose is to mark where any extra
space should go if the bar is larger than the content that’s in it. So if you
wanted to have some items always on the top of the bar, and a taskbar in the
middle filling up the middle, and then a clock always at the bottom of the bar,
then you would click “move entire group” on the extra space item to position it
directly below your taskbar.
Customizing and element’s behavior and appearance
Open the properties dialog for the active element you wish to modify. In the
General tab, any behavior customizations will be available in the center area of
the dialog. You can change the text-label for an item by editing the Label
property at top.
If you wish to change it to display an icon as well as text, click “Change
Image...”, where you’ll be given the opportunity to choose and image to use for
the item. Choose “Icon” and then browse for your icon. Same can be done for a
different “mouseover icon” image. You can then choose to have your item show its
text or not, and customize the icon size.
Similarly, you can choose to have your item be represented by only a bitmap.
This bitmap can be of .bmp, or of .tga (transparency-capable) format. (This is
true even though by default it only lists *.bmp to search for.)
Configuring different group-styles, and other common group attributes
Open the properties dialog for the active element you wish to modify. Switch to
the “Element Grouping” tab. From here you can have a quick view of what the
other members of the grouping are for reference, and ability to modify the
group’s properties. If you wish, you can hide the group. The ability is there
for you to change what items in this group show as by default... whether that be
text and icons, text only, or icons only. If your selection involves icons, you
can choose what size the icons should be by default for members of this group.
Finally and most importantly however, is the ability to choose the current
appearance. In the “Current Appearance” dropdown will be a list of all the
different group-styles that you had set up within the skin file you created. (If
unnamed, they will show only by their number… #1, #2, etc.) You can choose a
different group-style for your group, and it will apply immediately.
Resizability of your bar
Check the Skin tab of the Theme Editor. Here you can choose for your bar to what
degree you can resize your bar larger than the maximum. For maximum
manual-control, do not have it restrict the size at all. If you want to have it
take up an entire edge, head back to the Properties tab, and check the “Dock to
Edge” checkbox. If you choose to have the size of the bar be restricted (the
default) you will only be given the opportunity to resize it manually when
ObjectBar determines you may want to, such as if you have something with
variable width/height existing in your bar, etc.
As for individual group resizability, ObjectBar forces most all kinds of
elements to show all of their contents at all times. Folder and taskbar
groupings on the other hand, due to their nature that they can have a wide
varying amount of contents, do not show all their contents unless they can. If
the bar’s contents become too big for its available space, it will allow you to
grab the space directly before the taskbar or folder begins in order to change
the amount of space used by it in case there are multiple things on the bar that
don’t fit or have variable size (such as a virtual desktops element).
That’s it!
That’s all of the important tags you’ll need to know, and all the skills you’ll
need to have to build both a skin and bar for your ObjectBar theme. There are
some others skin tags floating around, but most have become obsolete / not
useful at this point. Have fun making your skin ; remember that its very
important to think of the design for your bar first, so that you can figure out
what kind of styles you’re going to need for it with that in mind.
Lead developer
Introduction to ObjectBar
Skinning Basics
The ObjectBar Skin Format
NumberOfSectionStyles = 3 ;The number of group-styles we have. So, if
; [SectionSkin], [SectionSkin_2], and [SectionSkin_3]
; are defined, this would be = 3