HoverDesk Tutorial - The Left Side Menu

The Left Side Menu

If you look in the left frame of my site you'll notice all the links to the various skin/suite pages.
For the HoverDesk theme I want to simulate this, with applications separated into groups of a similar nature with a header for each group.

*NOTE - we're not creating groups here, just making a bunch of tiles look like groups.

Let's start with the Graphics header tile.
This is will be a decorative tile. We already have 3 decorative tiles on our desktop, so let's go to the Pixel Perfect tile, right click it and select duplicate tile.
Shift+drag the new tile to an area we can work with it.

Open windows Explorer and browse to the Pixel Perfect theme folder so you can see all the files inside it.
Find the file called header_graphics.bmp and drag it onto the new pixel perfect tile. This tile is going to be sitting on top of the sidebar tile, so we want to make sure it doesn't disappear underneath it. Right click the sidebar tile and select position, order, and make bottom is ticked.
Right click the Graphics tile and select position, order and make sure normal is ticked.

Shift+drag the Graphics tile onto the sidebar tile, near the top just under the main tile. As you are dragging the tile notice the small white Hoverdesk status window in the middle of your screen. Before you let stop moving the Graphics tile make sure the X position = 0
*note my y position = 65

In the bmps folder I have pre-made 8 header tiles:

header_graphics.bmp - we have just done and is the header for all graphic apps
header_interact.bmp - is for chat programs such as Trillian, ICQ, MSN Messenger, mIRC, email programs etc.
header_internet.bmp - is for programs for use on the net such as Morpheus, pow! (a pop up blocker)
header_office.bmp - is for programs such as word, excel, calculator, etc.
header_recipients.bmp - is for our recipient tiles to sit under (more about these later)
header_sitetools.bmp - is for programs I use when working on my site such as Dreamweaver, Arachnophilia, Terrapin FTP, etc.
header_skintools.bmp - is for programs I use when making skins such as ColorPad, SkinStudio, WinZip, notepad
header_system.bmp - is for system commands such as run, find, shutdown, etc.

Of course you can add any programs you like under these headers, I'll just be explaining how to configure the tile and add the programs. But we'll go into that later, first it might be a good idea to get all the header tiles on the dt. We can shift+drag them around later.

Right click the Graphics tile and select duplicate tile.
Shift+drag it to an area we can work with it.
In windows explorer find the file called header_skintools.bmp and drag it onto the new Graphics tile. And there you have it! Another header tile done!!

Repeat the process until you have the 8 header tiles listed above on your desktop.

Adding Menu Items under the Headers

Right click the Graphics tile and select duplicate tile.
Shift+drag it out of the side bar and into the light gray area (you'll see why in a minute)

From Windows Explorer find the file called experiment.bmp (don't ask!! ;)
Drag it onto the new Graphics tile.

You should just have a plain gray rectangular tile now which is the same color as the side bar tile.
Right click the small gray tile and select properties.

Applying Labels to the Menu Items

Almost all the configuring will be done in the Caption/Font Settings box.

I'm going to use Microsoft Paint, since almost everyone has this program.

In the Caption box type MS Paint.
The font we will use will be Tahoma, size 8, bold
The Normal color will be 192,192,192
The Hover color will be 255,181,8
Tick the Show Label box
Tick the Drop Shadow box
In the Label Offset X box, type in 5.
Click Apply Changes and the text should appear on the tile, but can you see the drop shadow effect???

Configuring the Drop Shadow Effect

Right click the main tile and select Configuration.
From the left side links select Theme Settings.
Right in the very center of the window you should see a little checkbox with Drop Shadow next to it. Do not check the box, but do click the Shadow Color box under it.
Click Define Custom Colors and set it to red = 40, green = 40, blue = 40
Click OK
Now to the left of the Shadow Color box is the Shadow Depth setting box, set this to 2. then click OK

Now the tile should be looking like this. (Including hover image)

If it's not please go back to the top and make sure you've not missed a step.

Applying Programs to the Menu Items

Well the tile looks exactly like we want it to now, but if we click it, it won't open MS Paint, so we must apply this to the tile.
There is 2 ways we can do this:

First method:
Click the windows key to bring up the start menu.
Go to programs, accessories, move down to paint and drag it onto the MS Paint tile.
That's it!!! The MSPaint program has been assigned to this tile.

Note: When you move your mouse away you'll notice that the paint icon has appeared on the tile, to get rid of it right click the tile, select quick change, tile then click clear icon.

What??!!! You like the icon??
OK, right click the tile select quick change, label, icon to the right.
Right click the tile again, select quick change, icons then make sure 16x16 is checked.

Second method:
Right Click the tile, select Properties.
Click Application Settings. In the Program/Folder/File/Web Link/Extension box click the browse button and browse for the file.
(My path is C:\Windows\Start Menu\Programs\Accessories\Paint.lnk)
*note you may have to click the arrow next to files of type and select all files.
Click OK
Note the icon does not appear on the tile.

Tips and Tricks to use when Making the Left Side Menu

Here's the trick to placing the tiles where we want them.
Once you're happy with your first menu item shift+drag it towards the Graphics tile. When it gets to a certain distance it will 'snap' onto the Graphics tile. And so the Graphics tile becomes the parent and the menu item becomes a child (Click a parent tile to open the child tiles) More about this later.
BUT we don't want to create a group with these tiles (we only want it to look like a group) so we must detach the first menu item from the Graphics tile.
To do this either right click the menu item and select position then click detach OR hold shift and left click the menu item.

Another Tip:
Once you have completed your first group shift+drag the second header towards the last menu item.
When it 'snaps' to it detach the second header (see above) from the tile above it.
Right click the second header and select Properties.
Note the top position, add 10 onto it then type this new figure in and click OK, then start adding more menu items for the second group using the process described above.

When you've completed all of the eight groups your desktop should be looking something like the one below (click to zoom)
This is a ss of what my left side looks like (just to give you an idea of what you can achieve. Also note how the desktop as a whole is shaping up)