UPDATE: 10/28/2009 -- only editing background images works (nothing dealing with Styles.UIX works with 4.0) See Here:
http://www.zuneboards.com/forums/zun...theme-x64.html
Ok, this is going to be my first guide so bear with me. I may need to edit things a few times to get all the kinks worked out. My results are at the bottom
I would make a youtube video, but I think the process takes too long to do.
By the way, I am using 3.1 firmware/software, so this works with the newest software/firmware.
THINGS YOU NEED:
1. FOR XP: Resource Hacker:
http://angusj.com/resourcehacker/
FOR VISTA: http://www.bome.com/Restorator/download.html (30 day trial, but this wont' take that long)
I only have screenshots for Resource Hacker, but restorator works very similarly. The big difference, after you select the file (like Styles.UIX) you have to hit f6 to go into edit mode. Also, to extract images, right click the resource and select extract. to save the new resources, right click the resource and select assign... then file save when finished.
2. The Model of your zune
From what I was working on today I would say the 30gb is KEEL, the 80 and 120 is Draco, and the flash-based players are Scorpius. THIS IS IMPORTANT! YOU WILL NOT BE ABLE TO SEE THE CHANGES UNLESS YOU APPLY THEM TO YOUR SPECIFIC MODEL(s).
3. A number of images that you wish to use for the purposes of changing the background and other parts of the software. NOTE: the dimensions of the zune software background default to 1007 x 756. This isn't too important as the backgrounds are auto sized. THEY MUST BE IN PNG FORMAT!
That should be everything you need, so let's get started!
1. Close the zune software
2. Ok, after you've downloaded and extracted Resource Hacker, navigate to the folder you extracted it to, and open the reshacker.exe file.
3. First, why don't we add a background to the display menu?
within RCDATA, look for the folder STYLES.UIX. After locating that, click the 1033 nested within it.
Scroll down until you see text that looks like this:
<Color Name="DarkGray" Color="55,58,61"/>
<Color Name="WarmGray" Color="130,134,137"/>
The numbers shown on the right, such as 55,58,61, can be edited. The first number controls the amount of red, the second is green, and the third blue (RGB). The max value is 255, and the minimum is 0. You can play around with the numbers to get a desired color, or look for a RGB color table on google. DO NOT change the name of the Color (like DarkGray), only the RGB part on the left. Make sure that for the next part, the don't blend into the background.
Next, in the same area, find (by hitting ctrl+f on the keyboard) the part that starts with <zune:BackgroundOption Description...
this is where we will be creating the new option for the display.
underneath all of the other <zune:BackgroundOption Descritption... areas, add these lines:
<zune:BackgroundOption Description="NAME OF THE BACKGROUND" Value="res://ZuneShellResources!FrameBackground07.png" Color="{new iris:WindowColor(239,239,239)}"/>
NAME OF THE BACKGROUND should be changed to whatever you want the background to show up as. The area ZuneShellResources!FrameBackground07.png points to the png file. FrameBackground07.png does not yet exist. We'll create that in a moment.
Now, up near the top of the box, you should see a compile script button, make sure you press that. Also, now would be a good time to save. Hit file and then save. The program automatically creates a backup, just in case.
4. Now, click on the Action and find Add new Resource. Then click open file with new resource. Navigate to where the file you want as your background is and click it.
SEE THE SCREENSHOTS here.
At this point, hit file... save. If you want to, you can now open up the zune software and then go and select the new display that you created. If the zune software fails to load, there's a good chance you screwed something up. see the troubleshooting section for how to fix that.
OK, so you've now made a display theme, and even changed the font. I'm sure you're happy with yourself, right? I also bet you want to do more! That background when you plug in your zune's cruddy, isn't it? Well, let's fix that!
This is where you need to know the model and the color of your zune.
Under RCDATA, navigate to the area with that name. In my case, with a black zune 120, i would navigate to DRACO.BLACKBLACK.xxx
The first is the color of the zune, and if there's two colors, the second is the color of the metal (i'm pretty sure, i've only done this with 2 different zunes thus far, so i might need community help to make this accurate). As you can see, there are many different .png files you can edit. I'm only going to tell you how to change the background (all the other images are pictures of your zune, so you'll probably want to keep those anyways).
Now, you've gotten lots accomplished on your zune software. It's beginning to look and feel as it should, right? Well, how about we change the color of the dialog box that pops up (when you see errors, or search for album info, that box). Under RCDATA, navigate to DIALOGBACKGROUND.PNG. Do the same process mentioned above, but use the image for the dialog background, and the name should be DIALOGBACKGROUND.PNG for the middle box. Accept and save. Now that part's done.
Now, I'm sure you would love to change the colors of the visualizer-type thing at the bottom of the zune software when playing music. There are 6 files that need changed to do this. I recommend using the existing files, instead of new ones. To do this, under RCDATA, navigate to
NOWPLAYINGANIMATIONxxx.png
xxx = color.
Expand each of those, and individually select 1033, and then hit Action...save resource as binary file. name them orange1.png, orange2.png, orangeandpink.png, pink1.png, pink2.png, and pink3.png, using the proper names with them. What i did here was open the files up in photoshop, went to image...attributes...hue/saturation. I got all the colors to be what i wanted (-30 hue, 100 saturation, 0 lighting) and then saved them. When you replace the existing files, make sure you keep the same file name (ex. orange1 should replace and be named NOWPLAYINGANIMATIONORANGE1.png) After you've done that... save. Now, open up the zune software, and check everything out. You should have a pretty sweet, customized sofware now.
That's all i'm doing for now. Later, I will tell you how to change the font style and the various UI buttons.
TROUBLESHOOTING:
if at any time you cannot load the zune software, this is what you need to do.
1. Close out of the zune software
2. Navigate to the zune's install directory.
3. Delete ZuneShellResources.dll
4. Rename ZuneShellResouces_original.dll to ZuneShellResources.dll
5. Check that the software opens.
I'm just posting the results of the resource hacks that I did to my girlfriend's zune software today.
i changed the color of the visualizer to a bright red and pinkish purple color
I darkened the color of the background here, and you can see the back button that i made in the top right corner
I changed the color of the box that pops up whenever there is an error or any notifications.
this shows the background i used, as well as the changes in font. if you look closely at the search bar, you'll notice that I added a custom font for it (it's one that i made for my girlfriend). Also, I didn't just overwrite another style, I made another option in the display menu called Valentine's Day.
also, check out the youtube i made of my own software;
Tell me what you think
and i guess this could also go in the graphics corner...
Zune Software Hacking Tutorial [Partially Working with 4.0]
back on topic.
