Custom topmenu and submenu tutorial

[3cd0Widow]

OK here goes... My first tutorial on these boards, I hope its not too confusing lol :D

------------------------------------------------------------------------
Info

If you want to skip the hex editing tutorial, there is an easier way to add custom submenu icons at bottom of tutorial :)
No matter which way you choose, I'd like to see what all you people out there can come up with :)

-------

This does not work for 3.10 OE so DO NOT TRY to use this guide, or ask how this is done for 3.10 OE, the simple answer is... it cant be done. If you want custom icons install 3.03 OE-B or OE-C
------------------------------------------------------------------------
THE HEX EDITING TUTORIAL FOR CUSTOM XMB ICONS

First thing you need is the easy converter I put together using KGSWS's command converters, to quickly convert 6 images at once ( I will edit this later, so that it converts all images for all topmenu and submenu icons all at once)

You can get the converter HERE

Next you need a hex editor, I use THIS ONE

NOTE: You will need to add topmenu icons, aswell as submenu icons for this to work, this is not just for submenu icons.

Use the converter to convert your first 6 BMP icons to .DAT files and name them as follows, just so you dont get confused:


Name of bmp rename dat to
--------------- -----------------
1.bmp = Settings
2.bmp = Photo
3.bmp = Music
4.bmp = Video
5.bmp = Game
6.bmp = Network

You can leave the converted Icons in the Converted folder or make a new folder somewhere else for all the icons, its upto you :)

Now start converting the next six icons (remember they have to be named 1.bmp, 2.bmp, 3.bmp 4.bmp,5.bmp and 6.bmp) then name those as follows after converting to DAT files:

1.bmp = Camera
2.bmp = RSS Settings
3.bmp = RSS Channel
4.bmp = OnlineManual
5.bmp = Remote Play
6.bmp = Certificate Utility

Now for the next 6, named as follows:

1.bmp = USBconnection
2.bmp = Video Settings
3.bmp = Photo Settings
4.bmp = System Settings
5.bmp = Theme Settings
6.bmp = Time Settings


Now for next 6, named as follows:

1.bmp = Power Save Settings
2.bmp = Sound settings
3.bmp = Security Settings
4.bmp = Network Settings
5.bmp = Game Sharing
6.bmp = Location Free

for last bmp, name as follows:

1.bmp = Internet Browser
(note: when converting this single file you will get 5 error boxes, just close them)

OK thats all your icons and they should all have .dat file extention

Open my custom topmenu_plugin.rco found HERE with your hex editor.

Now open your first DAT file with your hex editor (Settings.dat) the first block of the code should be highlighted, click on "Edit" in the menu bar and click on "Block Mark" use the scroll bar on the side of the window to get to the bottom of the icon code and highlight the last block of the code if it isnt already highlighted, ( HERE is a pic of how to highlight the last block of the icon code) then go to "Edit" again and click on "Block Mark again, this should highlight all the code for your DAT image. Now click on "Edit" again and go to "Clipboard" then click on "copy as hex string".

Now that your first image is loaded into clipboard, minimise that window and go to your hex window with the topmenu file loaded in. Click on Search in the menu bar and click on "find"

Select "text string" and type "Widow" in the text box, view the pic below for settings then click "OK"


The text "Widow" will be found in the right hand window, scroll up a little and you will see the beginning of where the code needs to be overwritten, here is a pic:

Enlarge picture HERE

Every image starts with those 2 symbols that look like yy
as you can see in the pic above you need to click on the y which has an arrow pointing to it, then go to "Edit" in the menu and click on "Overwrite String..." make sure "Hex String" is selected, then right click in the box, and click on "Paste" to paste your first image into the box, then click on OK.

Now search for "Widow" again and your ready to overwrite your next image starting from the second "y" from < as shown above.

eg: ÿÿ<-----
↑
Overwrite this ÿ for every icon.

You can now close the hex window that has your dat image file loaded and load your next image, then repeat the steps above.


Enjoy!!!

3CD0Widow

BTW make sure you search for Widow not widow, the "W" is upper case :)

Dont forget to save your edited topmenu somewhere else, cos if you overwrite my custom topmenu, you will need to download it again and it might not always be available...

Here is a quickly put together top and submenu icon vid:



-------------------------------------------------------------------------
Max icon sizes

Some icons maybe too big to fit in the topmenu_plugin.rco file and could overwrite the next icon space in the topmenu file. make sure the icons listed below dont exceed the sizes given

Photo icon size = 2.20Kb
USB connection icon size = 2Kb

There could be other icons you may have problems with, please let me know which icon it is and its size so I can add it to this tutorial

THX!

------------------------------------------------------------------------
UPDATE

I have edited the converter to convert all 25 BMP icons to DAT files and they will all be renamed as follows:

1.bmp = Settings.dat
2.bmp = Photo.dat
3.bmp = Music.dat
4.bmp = Video.dat
5.bmp = Game.dat
6.bmp = Network.dat
7.bmp = Camera.dat
8.bmp = RSS_Settings.dat
9.bmp = RSS_Channel.dat
10.bmp = OnlineManual.dat
11.bmp = Remote_play.dat
12.bmp = Certificate_Utility.dat
13.bmp = USBconnection.dat
14.bmp = Video_settings.dat
15.bmp = Photo_settings.dat
16.bmp = System_settings.dat
17.bmp = Theme_settings.dat
18.bmp = Time_settings.dat
19.bmp = Power_save_settings.dat
20.bmp = Sound_settings.dat
21.bmp = Security_settings.dat
22.bmp = Network_Settings.dat
23bmp = Game_Sharing.dat
24bmp = Location_Free.dat
25bmp = Internet_Browser.dat

Get the BMP to DAT converter HERE (DAT to BMP not included in this pack) Read the readme file, make sure your BMP files are named 1~25. Anything which is put in the "YOUR_FILES" folder that has bmp extention gets deleted after converting is done, the dat files get renamed to the icon name and are copied to the "CONVERTED" folder and all temporary files are cleaned up.

NOTE: checks for missing icons isnt implemented in the converer, so if you miss any of the icons named 1~25 you will get an error box for each missing bmp file, just close the error boxes.


------------------------------------------------------------------------------------------------------------------------
Shadow Icons


To make the remaining Icons into shadow icons, you first need to know their location, below I have given the hex locations for each icon you can change to shadow icons:

ICON HEX Location
1. Network update 1c1b0
2. Memorystick 19674
3. UMD 18e70
4. Saved data utility 34228

To make the above icons into shadow icons, open your already created topmenu_plugin.rco with a hex editor, in the menu bar click on "ADDRESS" then click on "Go to..."
make sure "hexadecimal" is selected, then in the box underneath, put one of the hex codes above in the box and click "OK" the first blocks of code for that image should look like the following:

78 DA AD

highlight the 78 and change the 78 to FF just type ff no caps lock is needed, this will disable that main icon so that only shadow and hover icons display (black icon with glow)

To change the icons back to origial icons just type 78 over the FF to reverse things.

Enjoy making custom XMB icons for your PSP

----------------------------------------------------------------------------------------------------------------------------
How to disable shadow and hover icons for custom icons

OK here are the locations for the icons we will be disabling:

NOTE: do the following with a topmenu file that doesn't have the following main icons customised

Network Update
Shadow Icon = 2369c
Hover Icon = 2a390

Memory Stick
Shadow Icon = 1a69c
Hover Icon = 1b8d4

UMD
Shadow Icon = 19ce8
Hover Icon = 1b8d4

UMD Update
Shadow Icon = 36030
Hover Icon = 38248

Saved Data Utility
Shadow Icon = 359cc
Hover Icon = 378fc

All you have to do is load your topmenu into your hex editor (topmenu without edited main icons for above listed icons) and go to the hex addresses above and do the following:

78 DA ED (could be 78 9C ED or other hex that begins with 78)

change to:

FF FF FF

You have to do this with both shadow and hover icons so they dont show on your custom main icon (which looks messed up when they are enabled)

Now you can change the main icon's to your own custom icons.

Any problems please post :)

Keep a note of what you change, incase you decide you want to enable the icons again later.

----------------------------------------------------------------------------------------------------------------------------

>>>>>UPDATE<<<<<

Since writing this tutorial, easier ways to add custom icons to your topmenu_plugin.rco files have become available
here is a GUI you can try, this doesn't only edit the topmenu RCO file, it also edit's other RCO files too, make sure to read the readme file that comes with Zingaburgas RCO editor.


RCO Editor v1.11 (version may change without notice)

Have fun! and thanks again Zingaburga ;)


3CD0Widow

[[G]raham.;xo]

can anyone confirm this works?

[3cd0Widow]

Yes I can, I will upload a working gif of it in a min :)

[Jatt-Style]

jus one Q this is tested on 3.03 OE-C ?

[3cd0Widow]

Not tested on OE-C no, only on OE-B sorry

[[G]raham.;xo]

after I run the bmp to dat converter, it cleans up the 1~6.bmp files and doesn't convert them :(

[Smurff]

hey, any progress on the hover/shadow stuff for Memcard and UMD stuff or any of it for that matter?

[3cd0Widow]

Are they named 1.bmp 2.bmp...6.bmp? did you read the readme file, the dat files get copied to the Converted folder

[3cd0Widow]

@ Smurff

I'm not bothering with those, too much hassle :P

Edit: cant figure out what is wrong with memorystick and UMD images, must be different sizes or something :/ ...

[[G]raham.;xo]

Originally Posted by 3cd0Widow

Are they named 1.bmp 2.bmp...6.bmp? did you read the readme file, the dat files get copied to the Converted folder

yes sir, and I read the readme file... I made a folder named 'converted', shouldn't it get copied in there?