Getting Started - Theme Creation, Applying the Wallpaper and Decorative tiles

Enter the details for your theme

Name: the theme name (for the purposes of this tutorial please name it Pixel Perfect)
Author: you!!
Email: the email address other users would use to contact you from this theme
Date: inserted automatically by hvd on the day you started creating the theme
Web: your website address
Description: details about the theme, inspiration/ported/ personal use etc.

Now click create.

You will now be presented with a desktop similar to the one pictured below.



The Wallpaper

OK lets get started with a basic framework we can work with. Remember the zip file you downloaded earlier?, well now it's time to unzip it. Extract all the textures into the theme folder you've just created. My path is c:/program files/Hoverdesk/themes/Pixel Perfect

Right click the main tile (the one with the HVD icon) and select theme manager again.

On the bottom right is a box to select your wallpaper, click the browse button. Now browse to the theme folder called Pixel Perfect , look for the texture walltile.jpg and click it. You will be shown a preview of the texture, assume it is the correct one and press the open button.
This texture is only 100x100 pixels so we need to tile it.
In the style box click the arrow and select tiled now click apply changes then close.

The Top Bar

First things first, let's move those light gray tiles away from the area we're going to be working in.
Use shift+drag to move them down to the bottom right of the screen.

Now we want to get a top bar and side bar to place our tiles into. There are many ways to make your tiles; I'm going to describe the way I always do it.

Open windows explorer (use the windows key to open the windows start menu) and browse to your Pixel Perfect theme folder so you can view all the files inside it.
Find the .bmp image called topbar.bmp now drag it to the tile labeled Email. When you see the little + symbol you can drop the file on the tile.
Now the tile needs configured so that the bmp shows the way it's supposed to and does what we want it to do, so right click the tile and select properties from the menu.



We'll start at the top left (Caption / Font Settings) and work our way down then top right (Tile Position) and down.

Caption/Font Settings

Caption: If the label is set to show, this is the text that will appear on the tile
If the label is not set to show this text will become the tooltip (when you hover over the tile)
For this tile we don't want any text to show so delete the Email label.

Just under where the font name is you'll see a box ticked that says Show Label next to it. We don't want to show the label so untick it.

Since there is no text showing we don't have to configure font style/colors or special effects, so we can skip this part just now (we'll deal with it later in another tile)

Texture/Icon

Normal: this is the texture that will show with no mouseover. We've already set this when we dropped the file onto the tile so we can skip that too.
Hover: this will obviously be the texture we want to use for a mouse over image. But this tile is for decoration purposes only so we can skip this part too.
Icon Path: We don't want an icon to show on this tile so delete the full path from this box. (We'll go into setting icons later)

Now click apply changes and see how the tile is looking so far. It should look like a plain dark gray square, with no text on it and no icon. If not, go back to THE TOP BAR and make sure you've not missed a step.

We're up the top right of the Tile Properties window now.

Tile Position

This is where the top left corner of the .bmp image will start.
This tile is going to become our top bar and it's going to stretch all the way across the screen so set left position to 0 and top position to 0.

Misc Options

The top transparent check box is for use with tiles that contain pink sections in theme, we don't have any pink in this tile so leave it unticked.
TIP: disabling transparency, if not needed, increases display performance.

The border checkbox is to apply a 3d effect to the bmp/tile we don't want this either so make sure it's unticked.

The adjust to texture size radio button tells hvd to display the tile as the same size that the .bmp file is. We do want this feature so make sure it's checked. You'll notice that the adjust to icon size becomes unchecked; you can only have one or the other, not both.

There is no icon on this tile and we've already designed the color of the tile so move down to the Feature Options box.

Feature Options

Recipient tile: we'll cover this later, leave it unchecked for now
Decorative tile: we do want this feature, but we need to do something else first. Leave it unchecked just now, but we'll be coming back to it to check it soon.

Click apply changes again and see how the tile looks now.
Aha!! Now we're getting somewhere!

Above apply changes is Application Settings please click it now.
This is where we determine the purpose of the tile. What app/internal command we're going to apply for this tile.

At the moment it's set to a predefined application of Outlook Express, but remember this tile is just for decoration so click the Program/ Folder/ File/ Web link/ Extension radio button, and delete .EML from the path box.
Now we know that when we click this tile nothing is going to happen, no programs will launch.

Go back to Tile Appearance (above apply changes ) remember how I said we want this tile to be decorative. In the bottom right box - Feature Options - put a tick in the Decorative Tile checkbox.

That's us finished with this window now so click OK

Now we've just a few more things to apply before we're completely finished with this tile.
This topbar tile is just for decoration; we're going to be putting more tiles on top of this one so we need set the position of the tile, so that other tiles don't start disappearing.

Right click the topbar tile and go to position , order , then make sure bottom is ticked.
And that's it! The first tile done!!




The Side Bar

With the side bar we want it to have the exact same properties as the top bar. In other words. It's going to be decorative tile with no program applied to it, no text/label showing and no icon showing. There are two ways to make it let's do it one way, then the other.

My way:
Right click the topbar tile and select duplicate tile. Shift+drag the new tile down a bit to an area we can work in.

*Note* if the top bar appears to have moved after shift+dragging the other one simply right click it and set the position to 0,0 again.

R ight click the new tile and select properties .

Like I said this tile is going to have the exact same properties as the first one, the only thing we want to change is the bmp used for displaying this tile, so go into the Texture/ Icon part of the window and in the normal box click the browse button and look for the file called sidebar.bmp
Click the open button then apply changes , Now we need to move it into position so set the Left and Top positions to 0, click OK. Right click the tile and ensure the position is still set to bottom

Happy? Want to try it the other way?
If not skip down to the next step, if you want to try both ways read on.

The Other Way:
Right click the sidebar tile and select delete tile.
Right click the topbar tile and select duplicate tile. Shift+drag the new tile down a bit to an area we can work in.

*Note* if the top bar appears to have moved after shift+dragging the other one simply right click it and set the position to 0,0 again.

Open windows explorer (use the window keys to open the windows start menu) and browse to your Pixel Perfect theme folder so you can view all the files inside it.
Find the .bmp image called sidebar.bmp and drag it to the new (topbar) tile you just created, when you see the little + symbol you can drop the file on the tile. Notice the change is immediate.
Hold down shift and drag the tile (notice the little white box in the center of your desktop? when this says x=0 y=0 you can let go)

The Pixel Perfect Tile

One more kind of decorative tile and then we can move onto the juicy bits.
Our wallpaper is a bit boring just now, then again the theme is a port of my Pixel Perfect site so let's add a little something to make the wallpaper a little bit more interesting.

Open windows explorer (use the window keys to open the windows start menu) and browse to your Pixel Perfect theme folder so you can view all the files inside it.
Right click the side bar and select duplicate tile.
Shift+drag it to area we can work in.
Look inside the windows explorer window for a file called pixelperfect.bmp.
Drag this file onto the newly created sidebar tile.
Shift+drag the Pixel Perfect tile to place which you think looks good in the light gray area of the wall.

OK, as mentioned above, this tile is merely to spruce up the wallpaper a bit, but it's such an obvious tile we could apply an application to it.

How to apply the application.

Right click the Pixel Perfect tile and click properties.
We've already got it looking how we want it to look and it's positioned where we want it so we can skip most of the stuff in here. However there is one little box which is stopping us proceeding. Remember how the topbar and side bar were decorative tiles? Well this one isn't purely decorative so look in the Features Options box and untick the Decorative Tile checkbox. Now we can set an application to this tile so click Application Settings.

For my theme, I want this tile, when clicked, to open up Internet Explorer at my website.
So I click the Program / Folder / File / Web link / Extension radio button. Now all I do is type http://honz12.hoverdesk.net into the Path box . Then click OK.

Maybe you want this tile to open your default web browser at your default home page?
Click the Predefined Application and look through this list until you find Web Browser . Click it then click OK .
You can assign any of the Predefined Applications or any of the Shell / Folder Commands or any Program / Folder / File to this tile so pick what you want and then click OK.

Now your dt should be looking something similar to this.