The Menubar & Menu Colors

There are a few more basic attributes in the Personality section. These have to do with how the Menubar and the Dropdown Menus appear. Here are the attributes:

  • Red level in Menu Text
  • Green level in Menu Text
  • Blue level in Menu Text
  • Red level in Menu Selection Outline
  • Green level in Menu Selection Outline
  • Blue level in Menu Selection Outline
  • Menubar image
  • Menubar draw method
I'll explain each in a little more detail.

The first three define the color for the text on the Menubar. If you try to set one, SkinStudio will adjust all of them simultaneously. For the Tutorial Skin, let's choose a light-gray color (192, 192, 192).

The next three define the color of the highlight box that will surround the menu you chose. For example, if you select File from the Menubar, (see the graphic on the left) the color that surrounds File is the "Menu Selection Outline".

Let's change this attribute using the Fine Tune color selector (shown on right). As you can see there are three slider and some color boxes. If the color you want is close to what you currently have, then it becomes a simple method of adjusting the sliders to the color you want. In this case change the color to a nice dark green. You don't HAVE to use the same color that I have set. In fact, play around until to find a color that you like. When you are done - hit OK.

Next is the Menubar image. This graphic contains two images (for active and inactive windows), with the active image in the TOP half and the inactive image on the BOTTOM half. It is just like the top edge or bottom edge graphic. There is a file named "menu.bmp" in the tutorial directory. Select it from the dropdown list, and hit REFRESH.

And although file size doesn't really matter, I have found that the image should be 10 pixels wide and 20 pixels high (10 for each image) to render correctly. (I had a 1 pixel wide image for my first skin, and it wouldn't be displayed on some systems. I'm not certain why.) The height will be stretched if it is too small for the Menubar text to fit.

The last basic attribute for menubar sets the "Stretch or Tile". This is ONLY in the horizontal direction (the width). The vertical direction (the height) will always be stretched to fit the Menubar text. For the tutorial the image looks the same either way, but in your skin it could make a difference.

There are some optional menubar attributes that you should be aware of as well. I have put the UIS name on the left, and the SkinStudio enhanced description on the right.

  • TileLeftMenu - Left Menubar margin
  • TileRightMenu - Right Menubar margin
  • MenuLeftTile - Menu text shift
  • MenuBorders - Menu border image

The first two define how much of the Menubar image SHOULD NOT be stretched / tiled. The third attribute defines the number of pixels to shift the Menubar text to the right. And the last defines an image to use for the BORDER of the dropdown menu. This last one needs a little more explaining.

There are some questions about WindowBlinds ability (or lack thereof) to skin the menus. WindowBlinds CAN skin the menu borders, but not the actual menu area. The graphic at the right is an enlarged version of menuborder.bmp in the tutorial directory. The only parts used are the 3 pixel border around the image. The center area is unused. Also the borders will always be STRETCHED to fit the menu. The only exception to this universal stretch is the 3x3 corners (all four of them) will never be stretched. So for the menubar graphic at the right only the green edges are used. You can use the dropdown list to select menuborder.bmp to apply it to the Tutorial Skin.