DesktopX: Modifying a Theme: Downsize Resolutions
From WinCustomize Wiki
| Modifying a Theme: Downsize Resolution | ||||||||
| ||||||||
Contents |
[edit] Introduction
You’ve probably come across a really cool theme before and had to pass because it was a different resolution than the one you’re running. You may have downloaded a theme and found most of the shortcuts and icons are to programs you don’t have. If you were brave enough you opened it up to Builder Mode and tried to tweak it only to find yourself lost and confused in a maze of dozens of objects and moving parts. . In this tutorial, I’ll be modifying a 1360 theme to fit my 1024 screen resolution. I hope the process will clarify some simple steps towards making that theme truly your own.
Do note that all themes are different and thus require different alterations. Some themes are completely unsalvageable in another resolution; objects and images become totally borked.
[edit] Getting Started
We’ll be modifying a wonderful theme called Harmony DX 2 by PuterDudeJim. So be sure to download it first.
Open up DesktopX in builder mode and load the Harmony theme. If your screen resolution is like mine you’ll see that half of the menu is cut off. The first thing to do is to observe the entire theme. Make sure you are aware of all its hidden popup objects. Try it out for a while and really get acquainted with its layout. R-click on the DesktopX builder icon and open the object list to see just how many objects there are in the theme.
[edit] Downsize the Resolution
For themes like this, where it is comprised of a menu bar at the top of the screen the easiest and most obvious step is to set the menu background to your screen width. Before we do that, we’ll need to move over all the contents of the menu so we can see them when we downsize.
[edit] Unlock Movement
Usually, many of the objects in a theme are locked in position and the only way to move them is to hold CTRL. We’ve got a lot of objects to move around so let’s unlock the movement of the objects we’ll be shifting. Select the half of the menu that’s on you’re screen. Without deselecting, drag the menu over so the other half is visible. Now, hold CTRL and select the remaining half. R-click, and open properties. Set movement to default. (Note: When you need to move the entire menu, be sure to click on the menu background so everything moves with it.)
[edit] Bring the Contents In View
Let’s start with the icons. Click and drag each one to the left until they are all in view.
If we take a look at the menu buttons, it’s pretty clear we’ll have to make them smaller to fit on the screen, but right now we just want to move them over. To do this we’ll need to make two rows of menu buttons.
Make the menu background height 180. You might need to go to States > appearance and click on advanced to set the vertical and horizontal margins to 15.
Now we can move the media player down to make room for the menu buttons.
Next we’ll take the last five menu buttons and make a second row. The buttons are comprised of spacers, the button background, and text. Make sure you select them all (CTRL + click on each of them if you want precise selection).
[edit] Set Theme Width and Arrange Contents
Now that we have everything in view let’s set the menu background to the screen width.
Okay, now we can arrange the menu buttons back on one row. The process is simple; start with the left most spacer and align it to the left side of the menu. Take the text of the button next to it and drag it so it is on the left-most side of the button background.
Then reset the width of the button background. The quickest way is to select it and then locate the object in the object list (should be highlighted if it’s selected). You can set the width directly in the object list by clicking on the width field entry.
Move the next spacer over and repeat this process for each of the buttons until they all fit on the menu. Leaving about 7 or so pixels on each side of the text should be enough to fit on a 1024 screen.
After you’ve finished arrange the icons above them.
Now arrange the media player and move it up. Be sure there’s enough room for longer song titles.
Finally, reset the menu to the original height (120).
Now we only need to move all the pop up menus into position. Click on each of the menu buttons to show the pop up menu. Move the pop up menu under the corresponding menu button.
Click on the weather to move its menu into view. Do the same for the system pop up menu (the icon with a gear) and you’re done.
Now, that we’re finished with setting object positions and sizes we can select the entire menu and set movement to locked. (Note: If you want the menu to be movable, you’ll need to r-click on the menu background and set its movement back to default.)
