| Author |
Message |
db_
Zune Regular
Joined: 24 Dec 2007
Posts: 20
|
 Posted: Jan Mon 14, 2008 7:07 pm Post subject: Zune theming tutorial |
 |
|
from crap backgrounds to custom backgrounds to custom theme! - a tutorial by db
first off you'll need a resource editor be it reshacker, xn resource editor, or restrorator.
i chose restrorator because of its dumping abilities and drag 'n' drop, but for simplicity we'll be working with reshacker since its free. (http://angusj.com/resourcehacker/)
#backup#
by now you should have your zune program installed and set up, you will want to go to C:\program files\zune\ (or wherever you installed your program to) and make a copy of zuneshellresources.dll and rename it to zuneshellresources.bak just incase you make some edits that might have messed up the program, you'll have this one safe and sound.
#custom background#
open reshacker and open zuneshellresources.dll>
go into RCData and scroll down to "framebackground00.png" there are 5 of these images. these are the images of the zune program. for right now we're going to export framebackground00.png, in the "folder" there is a file named 1033, and then go to action, and save as binary file, name it "framebackground00.png".
now you can edit this picture to what ever you want. or make a 1007x756 based image or any other sized, just make sure its a good enough size of the window you'd be using in the zune program.
after you've made your changes, you'll want to go to action> add new resource, select your image,after that you'll see this window:
use the settings> Resource type: RCData , Resource name: Framebackground06.png (or any number or any name but im just going with the rest of the naming to make it more easy to find), and Resource language: 1033. after that it should add in your new image.
after your image is added, we now have make the option for the program to enable a new bg. so go to RCData, and scroll down to Styles.uix. this is where all the coding for colors and fonts and stuff is basically, to make things faster , press ctrl+f and what we're trying to find is "<List Name="FrameBackgrounds">" after you find it, you'll see this
| Code: | <List Name="FrameBackgrounds">
<Source>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_0)}" Value="res://ZuneShellResources!FrameBackground00.png" Color="{new iris:WindowColor(243,239,241)}"/>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_1)}" Value="res://ZuneShellResources!FrameBackground01.png" Color="{new iris:WindowColor(252,239,246)}"/>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_2)}" Value="res://ZuneShellResources!FrameBackground02.png" Color="{new iris:WindowColor(244,244,231)}"/>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_3)}" Value="res://ZuneShellResources!FrameBackground03.png" Color="{new iris:WindowColor(236,236,237)}"/>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_4)}" Value="res://ZuneShellResources!FrameBackground04.png" Color="{new iris:WindowColor(239,239,239)}"/>
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_5)}" Value="res://ZuneShellResources!FrameBackground05.png" Color="{new iris:WindowColor(239,239,239)}"/>
</Source> |
now were going to add in your new theme AFTER
| Code: |
<zune:BackgroundOption Description="{zune:Shell.LoadString(zune:StringId.IDS_BACKGROUND_NAME_5)}" Value="res://ZuneShellResources!FrameBackground05.png" Color="{new iris:WindowColor(239,239,239)}"/> |
were going to put > | Code: |
<zune:BackgroundOption Description="theme name" Value="res://ZuneShellResources!FrameBackground06.png" Color="{new iris:WindowColor(239,239,239)}"/> |
put in your own discription of the image, after that hit compile script on resource hacker, and then save the file.
now open up the zune program, migrate your happy self to settings>display and you should see your new theme. go ahead and select it and hit apply. then close the program and open it back up, to make sure you did everything right. and if you did, congrats you just made your own background for your zune program.
#extra#
now if you wanna change all the icons, and other images for the zune program, you'll have to export all of the images and replace them, its a long and time consuming task but well worth it if you want it to look great.
hopefully there shouldnt need to be any lengthly explanation here.
(just replace the resources like how we exported the framebackground00.png just do that for all the images, make your edits, then replace them )
Thumbnail Border [added feb 2nd, 2008]
Looking in ThumbnailButton.UIX there is this code:
| Code: |
<AnchorLayoutInput Name="BorderAnchor"
Left="Image,0" Right="Image,1"
Top="Image,0" Bottom="Image,1"/>
<Int32 Name="BorderWidth" Int32="4"/>
|
basically change the borderwidth's int32 to desired # and then go to :
| Code: |
<ColorFill Name="SelectionBorder" Content="White" Alpha="0.0">
|
and change the content to some color , this is the bordercolor, you might be able to do r,g,b code here i havent tried, but i just put mine to "black".
Disabled Columns Enabled [added feb. 9th 2008]
i came a cross this a few days ago thought id add it in. in list view, the columns have some disabled selections, well in Trackspanelcolumns.uix most of the disabled check boxes are labeled as "removable" and they have been set to false, ie:
| Code: |
<spreadsheet:ColumnInfo Header="{zune:Shell.LoadString(zune:StringId.IDS_RATING_COLUMN_HEADER)}"
HeaderIcon="{styles:Styles.RatingHeader}"
CellType="{typeof(me:RatingCell)}"
SortBy="{me:SortInfo.UserRating}"
SortAscendingDefault="false"
CellPadding="4,0,4,0"
Resizable="false" Removable="false">
|
switching removable to "true" will enable you to check them in the columns enabling you to remove them, i found this trying to remove the rating colum from the browse view, but so far i can only get it off on the list view. so if anyone finds out how to remove the other colums in browse view.. id love the pointer.
#font colors#
and the best for last, you can change all the color coding, just go to the styles.uix found in RCData and adjust the rgb scheme, as in (xxx,xxx,xxx) if you need help with colors just pop open mspaint or something and put in the r,g,b numbers and tada. its a bit of playing around most of the names are labeled rather well.
#fonts#
(after thinking a bit i thought id try n add some fonts, but for some reason reshacker would not allow me to add in fonts, but i was able to do so with Restorator, Though i have not tried with XN's reseditor, so if anyone is willing to try , thanks in advance.
[how to add fonts with Restorator]
Drag your "font.ttf" into RCData, you'll have to find your font and right click on it and rename it because when you drag files into the dir's they take off the file extention so just rename your font to have its extention on it, then go to your styles.uix now the first set of code will look like this:
| Code: |
<zune:FontLoader Name="FontLoader" Resource="ZuneShellResources.dll">
<Fonts>
<String String="EndurancePro-Bold.ttf"/>
<String String="EnduranceProCaps-Bold.ttf"/>
<String String="Zegoesb_U_AA.ttf"/>
<String String="Zegoeui_U_AA.ttf"/>
<String String="Zegoeuib_U_AA.ttf"/>
<String String="Cegoeuil_auto.ttf"/>
<String String="zegoecpb.ttf"/>
</Fonts>
</zune:FontLoader>
|
just add in your font by putting <String String="fontname.ttf"/> basically simple? well theres a bit more... Still in styles.uix you will see code like this :
| Code: |
<Font Name="ZegoeLight12" Font="Cegoe UI Light,12"/>
<Font Name="ZegoeLight14" Font="Cegoe UI Light,14"/>
<Font Name="ZegoeLight15" Font="Cegoe UI Light,15"/>
<Font Name="ZegoeLight16" Font="Cegoe UI Light,16"/>
<Font Name="ZegoeLight18" Font="Cegoe UI Light,18"/>
<Font Name="ZegoeLight20" Font="Cegoe UI Light,20"/>
<Font Name="ZegoeLight24" Font="Cegoe UI Light,24"/>
|
its rather basic, the first part is the font name in the styles.uix coding, fontname & size, then on the second part is the actual fonts name and size .. sometimes fonts will have different namings like say i have a font named blah.ttf but when i use the font there will be a name "The Blah Font" on the second half for the real name of the font you would put "The Blah Font" if you still dont understand , sorry best way i can describe it... just fool around i guess, usually the program will crash if you have the wrong name in the fonts or if you didnt include the font... so like always just play around with it.
now to change the fonts in the program , just change the font=" parts and leave the naming alone. you can make your own font names and font types but the program renders them with no smoothing, i have yet to find a way around this. if i do find a way ill edit this untill then. your stuck with using the default names and only changing the font=" parts
Further on down in Styles.UIX there is code like this:
| Code: |
<style:Style Name="PlaylistMetadataSecondary" Font="{me:Styles.Zegoe9}" Color="{me:Styles.WarmGray}"/>
|
you can change the me:Styles.Zegoe9 to any font by only changing the zogoe9 part to match any font name in the styles.uix listing. and same goes for the colors by renaming the WarmGray to any of the font names or take out the {me:Styles.WarmGray} and replace with a "xxx,xxx,xxx" r,g,b code.
and now you know about as much as i do... if you find anything else that can be useful, please post it. AND if you come up with some issues, just let me know, ill reply as soon as i can.
also if you wanna get my theme it can be found here >
http://db-ie.deviantart.com/art/db-zune-theme-74250676
Last edited by db_ on Feb Sat 09, 2008 5:29 pm; edited 6 times in total |
|
| Back to top |
|
|
|
zuneary bypass
News & Updates
Joined: 21 Jan 2007
Posts: 654
Location: Indianapolis, Indiana
GAMERTAG: CranberryYumYum
Rep: 
Gamerscore:
Zone:
|
| Posted: Jan Mon 14, 2008 8:08 pm Post subject: |
|
|
cool thanks
_________________
|
|
| Back to top |
|
|
|
Branhower
Forum Moderator
Joined: 28 Dec 2006
Posts: 1678
Location: Hollister, MO
Zune: Skullbusta2k7
GAMERTAG: Skullbusta2k7
Rep:
Gamerscore:
Zone:
|
| Posted: Jan Mon 14, 2008 10:08 pm Post subject: |
|
|
Man, I did this same stuff with ResHacker a LONG time ago. I should've made it a tutorial.
_________________
|
|
| Back to top |
|
|
|
db_
Zune Regular
Joined: 24 Dec 2007
Posts: 20
|
| Posted: Jan Mon 14, 2008 10:21 pm Post subject: |
|
|
| Branhower wrote: | | Man, I did this same stuff with ResHacker a LONG time ago. I should've made it a tutorial. |
hehe, i came across some custom zune bg exe that makes edits to the program but just wasnt enough for me... i wanted something that would change the other images, and font colors, so i did some trial and error. and this is what i came up with. |
|
| Back to top |
|
|
|
pezboy
Zune God
Joined: 02 Feb 2007
Posts: 1225
Location: Hawaii
Zune: Andrew Kemp
|
| Posted: Jan Tue 15, 2008 3:52 am Post subject: |
|
|
| db_ wrote: | | Branhower wrote: | | Man, I did this same stuff with ResHacker a LONG time ago. I should've made it a tutorial. |
hehe, i came across some custom zune bg exe that makes edits to the program but just wasnt enough for me... i wanted something that would change the other images, and font colors, so i did some trial and error. and this is what i came up with. |
He had that, too.
_________________
|
|
| Back to top |
|
|
|
brightdarkness
Zune Regular
Joined: 27 Jun 2007
Posts: 71
Zune: skurd0ne
GAMERTAG: skurd0ne
Rep:
Gamerscore:
Zone:
PSN: br1ghtdarkness
|
|
| Back to top |
|
|
|
Branhower
Forum Moderator
Joined: 28 Dec 2006
Posts: 1678
Location: Hollister, MO
Zune: Skullbusta2k7
GAMERTAG: Skullbusta2k7
Rep:
Gamerscore:
Zone:
|
| Posted: Jan Mon 21, 2008 4:32 am Post subject: |
|
|
| brightdarkness wrote: | did i miss a step during this process:
go into RCData and scroll down to "framebackground00.png" there are 5 of these images. these are the images of the zune program. for right now we're going to export framebackground00.png, in the "folder" there is a file named 1033, and then go to action, and save as binary file, name it "framebackground00.png".
now you can edit this picture to what ever you want. or make a 1007x756 based image or any other sized, just make sure its a good enough size of the window you'd be using in the zune program.
how do i getmy picture in there instead of the pink one which is framebackground00.png |
If you look at the part of coding (styles.uix) that controls where the file is pulled, you'll see: "res://framebackground000.png". Change the res to file and put the path of the file so that it looks like: "file://D (or the letter of your hard drive):\Program Files\Zune\framebackground.png" (or something similar).
I was beating my head over the counter on how simple of a fix that was.
_________________
|
|
| Back to top |
|
|
|
brightdarkness
Zune Regular
Joined: 27 Jun 2007
Posts: 71
Zune: skurd0ne
GAMERTAG: skurd0ne
Rep:
Gamerscore:
Zone:
PSN: br1ghtdarkness
|
|
| Back to top |
|
|
|
Branhower
Forum Moderator
Joined: 28 Dec 2006
Posts: 1678
Location: Hollister, MO
Zune: Skullbusta2k7
GAMERTAG: Skullbusta2k7
Rep:
Gamerscore:
Zone:
|
| Posted: Jan Mon 21, 2008 3:51 pm Post subject: |
|
|
Yeah, it only uses PNGs.
_________________
|
|
| Back to top |
|
|
|
brightdarkness
Zune Regular
Joined: 27 Jun 2007
Posts: 71
Zune: skurd0ne
GAMERTAG: skurd0ne
Rep:
Gamerscore:
Zone:
PSN: br1ghtdarkness
|
|
| Back to top |
|
|
|
Branhower
Forum Moderator
Joined: 28 Dec 2006
Posts: 1678
Location: Hollister, MO
Zune: Skullbusta2k7
GAMERTAG: Skullbusta2k7
Rep:
Gamerscore:
Zone:
|
| Posted: Jan Wed 23, 2008 4:20 pm Post subject: |
|
|
| brightdarkness wrote: | ok so lets make this usper easy for me cuz im a dumbass:
the filepath of the file i want to youse for my baclground is:
C:\Documents and Settings\darkness\My Documents\My Pictures\wallpapers\abs1.jpeg
how do i get that into the zune format and insert it into the coding? |
Step 1: Open up your hacking program (I use Reshacker)
Step 2: Open up the zuneresouceshell.dll
Step 3: Go down to the "folder" in RCData known as "Styles.uix".
Step 4: Do a search (control-F) for "framebackground.png". You'll find it only once within this part.
Step 5: It will probably read something along the line of: "res://framebackground.png". CHANGE IT TO EXACTLY TO: "file://C:\Documents and Settings\darkness\My Documents\My Pictures\wallpapers\abs1.jpeg". You may want to change it to a png, but jpegs may work.
BTW, the tutorial doesn't do it the same exact way that I do. I hard-code the background, font colors, types, and bottom bar color into the file. It's a good thing I taught myself XML, because that's pretty much what this is.
_________________
|
|
| Back to top |
|
|
|
brightdarkness
Zune Regular
Joined: 27 Jun 2007
Posts: 71
Zune: skurd0ne
GAMERTAG: skurd0ne
Rep:
Gamerscore:
Zone:
PSN: br1ghtdarkness
|
|
| Back to top |
|
|
|
bald_gye
Forum Moderator
Joined: 13 Mar 2007
Posts: 2248
Location: England
|
| Posted: Jan Thu 24, 2008 5:47 am Post subject: |
|
|
this would be something i would do if i thought that i could make it look better than the team of UI designers
_________________
|
|
| Back to top |
|
|
|
devsfan
Zune Newcomer
Joined: 24 Jan 2008
Posts: 1
|
| Posted: Jan Thu 24, 2008 7:06 am Post subject: |
|
|
| Im using xn resource editor because its the only that wil open the dll's for the 64-bit version. how would you do the adding of the new background with this tool? anyone please help. the file is dead on the same as the 32 bit ones, just reshack wont open them. |
|
| Back to top |
|
|
|
Branhower
Forum Moderator
Joined: 28 Dec 2006
Posts: 1678
Location: Hollister, MO
Zune: Skullbusta2k7
GAMERTAG: Skullbusta2k7
Rep:
Gamerscore:
Zone:
|
| Posted: Jan Thu 24, 2008 2:51 pm Post subject: |
|
|
| brightdarkness wrote: | | thanks much everybody |
In case you got it to work, you're welcome 
_________________
|
|
| Back to top |
|
|
|
|
Search 
Memberlist 
Usergroups
Register
Profile 
Log in to check your private messages 
Zune Wallpapers 
Chat ( 
