Putting Your Menus on a Diet

From TrillWiki

by Eh?one 03:53, 22 March 2006 (CST)

1 Introduction
2 Fixing the BackColor Glitch
3 Item Placement
4 Borders? we don't need no borders
5 Complete Engine Overhaul
6 Results

[edit] Introduction

In Whistler the lush gradients help detract from the fact that the menus are much bigger than they need to be. In this article I will explore the varying ways in which the menu can be trimmed down. For clarity, the simpler changes will appear earlier in the document than more difficult changes.

[edit] Fixing the BackColor Glitch

Before we get started, lets solve the case of the annoying white box. The glitch occurs when the normal-back color of the iniMenuItemColor setting is set to transparent. The fix? Lets make it inherit the Back color that's already been set via iniMenuFrame-BackColor; this is done by replacing the <color name="normal-back" /> line with this one:

<color name="normal-back" red="%iniMenuFrame-BackColor-red;" green="%iniMenuFrame-BackColor-green;" blue="%iniMenuFrame-BackColor-blue;"/>

[edit] Item Placement

Menu item placement is a simple setting to change that has a small but very noticable effect on edges around the menu. The default of a 2pixel border on all sides is pretty small, but some skins look good with a single-pixel border or even no border at all. You can change this with the iniMenuItemPlacement settings:

<!ENTITY % iniMenuItemPlacement-top    '1'>
<!ENTITY % iniMenuItemPlacement-bottom '1'>
<!ENTITY % iniMenuItemPlacement-left   '1'>
<!ENTITY % iniMenuItemPlacement-right  '1'>

[edit] Borders? we don't need no borders

The borders that appear when the mouse is over a menu item add to its size even when the mouse isn't over it. Weigh the benefits of having a border over having your menu 16 pixels smaller. If you decide you don't need the border, or your menus have borders that are the same as your hover color, remove this line:

<color name="hover-border" red="82" green="150" blue="247"/>

You should be able to find this in the iniMenuItemColor setting. If you only want to temporarily disable it so you can add it back in later if you change your mind, add comment tags around it like so:

<!--<color name="hover-border" red="82" green="150" blue="247"/>-->

The border trick becomes obsolete if you perform the...

[edit] Complete Engine Overhaul

This is a summary only. If someone wishes to go into more detail feel free :)

Make each menu entry 4px shorter
- Set defaultTextHeight to 20.
- Set inibmpMenuExtra-??Slice as follows:
  <!ENTITY inibmpMenuExtra-V1Slice '0'> <!ENTITY inibmpMenuExtra-V2Slice '16'> <!ENTITY inibmpMenuExtra-V3Slice '32'> <!ENTITY inibmpMenuExtra-H1Slice '0'> <!ENTITY inibmpMenuExtra-H2Slice '16'> <!ENTITY inibmpMenuExtra-H3Slice '32'>
- Adjust MenuExtra.png to account for the changes by making the image 32x32 instead of 40x40.
  - The grid tool may help, if your graphics software has it
- For extra space make V2Slice 11, V3Slice 22 and the width of MenuExtra.png 22 pixels as is done in the "After" shot.
Reduce the horizonal spacing
- Set defaultLeftMargin to 20.
- Set defaultRightMargin to 2.
- Set defaultLeftMarginSeparator to 24.