HoverDesk Tutorial - Drop Down Menus and using the Theme Debug
Back to Contents Page

Making a Drop Down Menu.

Phew!! How many times have I been asked how this is done?? A few I can tell you.
OK first things first. We're going to learn how to make a drop down menu, you know the type of thing I mean right?
You click a header tile 'websites' for example and a little menu appears under the header. From this menu you can select whichever website you wish to visit. Once the tile is clicked the menu disappears.
Also we want to make it a little special, since there's only going to be one drop down menu that I'm going to show you how to make. So we're going to be using the theme debug achieve this.

Right click the recipients tile which is in the left side menu.
Select duplicate tile from the menu.
Shift+drag this new tile towards the center of the dt.
Right click the new tile and select properties.

A quick clarification: this tile should have no label showing, no icon showing and most importantly no program/application set to it already

Making the Header Tile

In the Texture/Icon box, click the normal browse button.
In the new window look for a file called websites.bmp and double click it.
Now click the Hover browse button and look for a file called websitesH.gif
*Note remember, you may have to click the down arrow in 'files of type' and select gif images

Click OK and hover over the image to ensure the gif file is applied.
Also try clicking the tile, nothing should happen. If it something does happen e.g.. a program opening, right click the tile select properties then application settings and delete the path of whatever application is in the path box.

This tile will become our header tile (the tile we click to view the menu)
Don't drag it anywhere just yet, we'll do that when the menu is complete.



Making the Drop Down Menu

Go back to the recipients tile which is in the left side menu, right click it and select duplicate again.
Shift+drag it so that it is close to, but not snapped onto the header tile.
Right click the new tile and select properties.
In the Texture/Icon box, click the normal browse button. In the new window look for a file called webmenu_top.bmp and double click it.
This tile is purely for decoration so click OK *Note don't tick the decorative tile box yet.

Notice the pink corners?? To get rid of them simply right click the webmenu_top tile and select quick change and make sure Transparent is ticked

Right click the webmenu_top tile and select duplicate.
Shift+drag the new tile so that it snaps onto the webmenu_top tile.
Right click the new tile and select properties.

In the Texture/Icon box:
Click the normal browse button. In the new window look for a file called webmenu_norm.bmp and double click it.
Click the hover browse button and look for a file called webmenu_selected.bmp and double click it.
Click the icon path browse button and look for a file called pixelperfect.ico and double click it.
Tip: On the right side of the configuration window you'll notice the Misc Options box. Make sure Transparent is unticked for greater theme efficiency
Now click apply changes.



WOW!! That icon's a bit big!!!
No problem, simply right click the tile and select quick change, icons and make sure 16X16 is ticked.
That's better, but it's not supposed to be in the center. But we'll fix that in a minute.

OK, it's starting to look like a menu now. But we need to apply a link/website to it.

In the Tile Properties configuration window:
In the top left box Caption/Font Settings you'll see a box for the caption, it should be blank, if not just delete whatever's in there.
Now type into the caption box Pixel Perfect.
The font should be Tahoma size 8 bold
The normal color should be set to red = 192, green = 192, blue = 192
The hover color should be set to red = 255, green = 183, blue = 11
Tick Show Label and Drop Shadow.
In the Label Offset X box make sure it is set at -1
Make sure the Outline Label box is ticked and set the color to red = 40, green = 40, blue = 40

Click apply changes. Hmmm, better but we need to move that icon.
On the right side of the Tile Properties configuration window you should see the Misc Options.
Click the button which says icon centered and set it to icon to the left.
Apply changes again.
Much better, looks exactly like we want it to, but there's no path set to the tile yet, if we click the tile nothing will happen, so.....

In the Tile Properties configuration window, on the left side click Application settings.
Make sure the top radio button (Program/Folder/Web Link/Extension) is checked.
In the path box type http://honz12.hoverdesk.net
Now click OK.



DON'T TEST IT YET!!!! Otherwise the tile will disappear!!!

Duplicate the new pixel perfect tile.
Shift+drag it so it snaps onto the other pixel perfect tile.

Now simply repeat the process above

*Note the only things you have to change are:
Change the caption to whatever site you wish to include
Change the icon
Change the application path.

Once you're done adding your websites you should have a menu looking something like this

Now we need to finish off the menu.


Remember the webmenu_top tile (the one at the top with rounded corners) right click it and duplicate it.
Shift+drag the new tile so that it snaps onto the bottom of the last website you added.
Right click it and select properties.
In the Texture/Icon box click the normal browse button and look for a file called webmenu_bottom.bmp and double click it.
Now click OK.

OK, test time. Hold down shift and drag the menu around a little bit using the webmenu_top tile as the 'handle'
If you've done every right the whole menu should move as one unit. If not then you're going to have to drag each tile away and resnap them all together again.

Shift+drag the header tile (the one with the animated hover image) to anywhere you like in the top bar (my websites header tile is on the right hand side of the top bar)
Normally if you were making a normal drop down menu all you would have to do is drag the whole menu up to the header tile so that it snaps onto it and that would be you finished, but remember I said I wanted to make this menu a little special??? Well now it's time to do it.


Using Theme Debug to make menus appear where you want

Shift+drag the whole menu (not the header tile) to a place you would like it to pop up if you were to click the header tile.
My menu pops up just to left of where my winamp, control panel, outlook express tiles slide out to.

Positioned it???.....Great!! Now the cool part.


Right click the main tile and select Theme Debug
A new window appear asking you to confirm that you want to go into theme debug mode.
Click yes.
Now be careful what you click in theme bug mode as it can play havoc with what you've set up so far.
You'll notice a little white box in the center of your screen which won't go away, that's OK, it's like a little information box.
Also if there were any tiles hidden somewhere that you didn't know about or thought "where did that tile go to?" they will appear now


What we're going to do is set up some parent/child tiles.
The websites header tile will become a parent for all the webmenu tiles/children.

To do this:
Click the very bottom of the web menu (the tile with rounded corners)
In the little white info box you'll notice it says Click on parent tile.
So click the header tile (the animated websites one)
The little white info box will say Parent changed!
Now move up to the next webmenu (which will be the bottom one with text in it) click it then click the header tile.
Repeat this process until you've done all the web menu, including the webmenu_top (the top rounded corners)

When you've done each web menu tile right click the main tile and select theme debug again to come out of theme debug mode.
Test your drop down menu!!!
Tip: You can now right click the webmenu_top and webmenu_bottom tiles and set them to decorative in the properties box, if you wish.

*NOTE
WHILE IN THEME DEBUG MODE
1- HVD will display ALL the tiles (even the ones hidden) like that, you can see the tiles which may have been orphaned during the theme creation process, and not used (then you can delete them).
2- Moving the mouse over a tile will display its number, and parent number (group tile number)
3- If you click on a tile (tile is selected), then click on a second one, then the second one will become the parent of the first one. Like that, it's easier to set the parent / child relationship in groups. TIP: This allows tiles to be grouped and not limited to adjacent tiles.
4- If you CTRL + left click on a tile, then its parent will blink.
To exit the Debug Mode, just uncheck the option inside the popup menu