3DS - Home Menu UI Layout Customization Guide

A guide for customizing the Home Menu UI layout (BCLYT files) on the Nintendo 3DS.

Custom Home Menu UI mod by me.
Download this mod here

If this is your first time modding the 3DS Home Menu, follow derberg's 3DS Home Menu Customization Guide for setup and extraction before proceeding.

We have a Discord server dedicated to 3DS system UI customizations: Custom 3DS Assets
Ask us or me (AromaKitsune) for help with UI customizations.
Note: I don't run this Discord server.

BCLYT files info

BCLYT files are the layout files used on the 3DS, they control how UI elements and HUD's are shown in games. It is similar to BRLYT files used on the Wii.

BCLAN (Layout Animation) and BCLIM (Layout Image) editing are not covered in this guide. For BCLAN, check out lividhen's animations guide, it covers only the spinning animation.

We will be editing the BCLYT files with Switch-Toolbox, a tool that edits many game assets for the 3DS, Wii U, and Switch.

This is not simple, Switch-Toolbox's layout editor has a bug that it corrupts the BCLYT files of Home Menu when editing them, resulting in broken UI elements or Home Menu crash. This is not the case with the other BCLYT files in some games such as Mario Kart 7.

Let's fix the BCLYT file.

Table of Contents

• Getting Started

• Preparing for UI Layout Customization

• Editing the UI Layout

• Fixing the UI Layout File

• UI Element Colors

Getting Started

Luma3DS custom firmware is required to use the mod. Install CFW if you haven't already.

Create a NAND backup before modifying any system files! Modifying the Home Menu applet is safe since Boot9Strap provides brick protection, allowing recovery with GodMode9. If you messed up and the Home Menu fails to launch, use GodMode9 to restore the Home Menu applet.

Never uninstall CFW while any modded system files are installed, doing so will remove Boot9Strap and fully brick the console! If you fully bricked your console, you'll need a DS flashcart with ntrboot to re-install Boot9Strap to unbrick your console.

What You Need:

• Kuriimu2

• .NET Desktop Runtime 3.1 for Kuriimu2 to launch

• HxD - Hex Editor

• Switch-Toolbox

• DARC files, can be either compressed (*_LZ.bin) or decompressed (*.LZ)

Preparing for UI Layout Customization

Here’s a list of known layout files for customization.

File	Description
launcher.LZ/blyt/LncBase_U_00.bclyt	Top screen layout - "L+R" caption, notification caption, suspended game info. For HUD's, those are stored in the hud.LZ file.
launcher.LZ/blyt/LncBase_D_01.bclyt	Bottom screen layout - The UI elements whose colors are not customizable by Themes are the applets
hud.LZ/blyt/HudMenu_00.bclyt	Top screen HUD's - date, time, battery, connection status, Play Coins & steps counter
sleep.LZ/blyt/Slp_U_00.bclyt	Sleep/Shutdown screen (top)
sleep.LZ/blyt/Slp_D_00.bclyt	Sleep/Shutdown screen (bottom)

To find other layouts:

1. Launch Switch-Toolbox.

2. Drag & drop the *.LZ file in the Switch-Toolbox window.

3. Search for the bclyt files and open any of those to see what it looks like. You might know what those layouts are, based on their file names.

Once you found what you're looking for, you can close Switch-Toolbox.

If you're looking into editing the UI colors for sleep.LZ and applet icons (launcher.LZ), I suggest checking out derberg's Home Menu customization guide for those, as hex-editing the *.LZ files directly is easier.
Note: Once you import/replace any files into the *.LZ files, the color values are moved to different addresses. See this section here.

Editing the UI Layout

1. Launch Kuriimu2.

2. Drag & drop the *.LZ file in the Kuriimu2 window.

   • If it asks for a plugin, Kuriimu2 doesn’t support some archive files. Try this version of Kuriimu2.

3. On the left pane, click the blyt folder and the list of items should appear on the right pane.

4. Extract the BCLYT file you want to edit.

   

5. Make 3 copies of the extracted BCLYT file, prepend A-, B- and C- to each file name, for example:

   • A-LncBase_D_01.bclyt or A.bclyt

   • B-LncBase_D_01.bclyt or B.bclyt

   • C-LncBase_D_01.bclyt or C.bclyt

   • To make the setup easier, create a batch file that automatically does that:

     md bclyt
     copy %1 bclyt\A.bclyt
     copy %1 bclyt\B.bclyt
     copy %1 bclyt\C.bclyt
     

     Save it as .bat/.cmd, drag & drop the BCLYT file in the batch file, enter the created bclyt folder and move on to the next step.

6. Launch Switch-Toolbox.

7. Drag & drop the B.bclyt file in the Switch-Toolbox window.

8. Do not edit anything, just save. Ctrl+S isn’t coded to save in Layout Editor, so click the 💾 save button and the “saved” dialog should appear.

   • You should have the corrupted BCLYT file as its file size has been decreased. This is normal.

9. Close the layout editor window.

10. Drag & drop the C.bclyt file in the Switch-Toolbox window.

11. Edit any UI elements however you like.

    
    Click the screenshot for full view.

    • Refer to the Assets Documentation for some lists of known panes to edit.

    • Each pane has its properties you can edit: positions (translate), size, colors, rotations, transparency, etc. You can even change the Picture Panes’ size, allowing you to import the BCLIM (Layout Image) files with larger dimensions.

    • To hide the UI elements, untick the Pane visible checkbox and set the Alpha value to 0.

    • If the UI elements don’t actually move to your desired position, then the elements’ position values are likely hardcoded in the BCLAN (Layout Animation) files and you have to edit them instead.

      • One example of this case is the applets on the bottom screen - the applets’ horizontal position values are hardcoded in launcher.LZ/anim/LncBase_D_01_MvsToggle.bclan, this file is used for removing the Miiverse applet from the Korean 3DS systems. As a result, you can only move them vertically. To move them freely, edit the BCLAN file with Switch-Toolbox. Note: Hex editing isn’t needed as Switch-Toolbox doesn’t corrupt BCLAN files.

    • In order to keep the C.bclyt’s file size the same as B.bclyt file’s, you should edit only the values in the Pane and Colors tabs. Adding or removing some items may change the file size which makes it more difficult to manually fix it with hex editor. Avoid doing the following edits:

      • Adding new Panes

      • Deleting the existing Panes - It will crash Home Menu, so make them invisible instead.

      • Adding/removing links to textures in the Texture Maps tab

      • Editing the texts in the Text Pane - You should edit the MSBT files instead.

12. When done editing, click the 💾 save button and you can close Switch-Toolbox.

    • You should have another corrupted BCLYT file. Again, this is normal. The file size of the edited BCLYT file has been decreased by 432 bytes. Make sure both the B.bclyt’s and C.bclyt’s file sizes are the same. We will be restoring them on the next steps.

    
    Click the screenshot for full view.

Fixing the UI Layout File

1. Launch HxD hex editor.

2. Drag those 3 BCLYT files in the HxD window. Make sure those tabs are in the correct order: A.bclyt, B.bclyt, C.bclyt.

3. Click the C.bclyt tab, then the B.bclyt tab.

4. Press Ctrl+K to compare between the B.bclyt & C.bclyt files, click OK.

   

5. Click the Maximize button on one of the MDI windows.

   

6. Go to the B.bclyt tab.

7. Position the cursor before the selected byte (ex: 0x1567).

8. Select a few lines of bytes forward (ex: from 80 to 3F).

9. Copy.

   

10. Go to the A.bclyt tab.

11. Press Ctrl+F to find.

12. Go to the Hex-values tab.

13. Paste into the Search for box and click OK. Make sure that there is only 1 result by clicking All and Search all. If it yields multiple results, try selecting more bytes on the B.bclyt tab.

    

14. Position the cursor before the selected bytes (ex: 0x1717).

    

15. Click to deselect.

    

16. Select the bytes from here, all the way to 0x0 by pressing Ctrl+Shift+Home.

17. Copy.

    

18. Go to the C.bclyt tab.

19. Same as before: Position the cursor before the selected byte (ex: 0x1567).

20. Click to deselect.

    

21. Select the bytes from here, all the way to 0x0 by pressing Ctrl+Shift+Home.

    

22. Paste with Ctrl+V. Don’t paste-overwrite with Ctrl+B.

    • The bytes at the beginning of the edited BCLYT file are restored.

    

23. If done correctly, save it and close HxD.

    • Now we have fixed the BCLYT file!

    • The A.bclyt, B.bclyt and C.bclyt.bak files can be deleted as they’re not needed anymore.

    • To make another edit to the fixed BCLYT file, make 3 copies of the C.bclyt file and repeat step 5 of the Editing the UI Layout section.

    
    Click the screenshot for full view.

24. Go back to Kuriimu2.

25. Right-click the BCLYT file you extracted earlier.

26. Select Replace and pick the C.bclyt file (not C.bclyt.bak).

27. Save.

28. Compress the *.LZ file and that’s it! You can now apply your edited UI to the Home Menu on your 3DS using LayeredFS or build the CIA file.

UI Element Colors

After importing the BCLYT/BCLAN/BCLIM files into the *.LZ files with Kuriimu2, the offsets for the color values are no longer the same, as these values have been moved to different addresses. If you did that already, you have to hex-edit the BCLYT files instead.

Each value consists of 4 bytes for color & alpha (RR GG BB AA). I suggest changing only the RGB values.

Applets - launcher.LZ/blyt/LncBase_D_01.bclyt

Applet icon	Color 1	Color 2
Game Notes	0x878 #DBBD00	0x87C #FFC600
Friend List	0x79C #FB7A18	0x7A0 #F39900
Notifications	0x6C0 #00B294	0x6C4 #00DA9C
Internet Browser	0x5E4 #4575FA	0x5E8 #1290FF
Miiverse	0x508 #30B70E	0x50C #49E415

HUD - hud.LZ/blyt/HudMenu_00.bclyt

HUD element	Color
Battery - Normal?	0x248 #32FFFF
Battery - Normal	0x724 #23AAE6
Battery - Low	0x738 #F57D41
Battery - Charging	0x7F4 #F57D41
Battery - Charger icon	0x888 #323232
Battery - Charger BG	0x8F8 #FF732E
Battery - Fully charged	0x8E4 #23AFE6