Submitting a Layout

Submitting a layout is actually quite simple.
Layout submissions work with the JSON format.

Below you can see a relevant part of the structure I showed you before:

Structure

.
└── 📂 [target filename *]
    └── 📂 [layout name *]
        ├── 📃 common.json
        ├── 📄 details.json *
        ├── 📄 layout.json *
        ├── 🖼️ overlay.png *
        └── 📁 options

📂 target filename

Note: all these folders already exist

These are all supported menus. The 'target filename' folder may be called any of the following:

• ResidentMenu (Home Menu)
• Entrance (Lockscreen)
• Flaunch (All Apps)
• Set (Settings)
• Notification (News)
• Psl (Player Select)
• MyPage (User Page)

📂 layout name

The name of this folder determines the name displayed on the website.

There also is a special folder name (only used for options):

• _GLOBAL: options in here are available for all menus

📃 common.json (optional)

Only applicable when your layout uses a custom common JSON. The common layout is used to modify the footer, including button text/icons, the line and the controller icon. Only the ResidentMenu can have a common.json.

Note that the support for common layouts is quite basic: they do not support options.

📄 details.json

The details.json contains information to display on the website. You're allowed to edit the following fields:

{
    "description": "",
    "creatorUuid": "",
    "color": "", // optional
    "uuid": "", // autogenerated
}

description

A short description of your layout

creatorId

Your themezer user uuid. You can find this by visiting your creator page on themezer.net with devtools open. The id will be displayed in the response of a request to /graphql with query me.

color (optional)

A hex color to display behind the overlay (example: 7ca982). You may leave this empty or remove the field altogether.

📄 layout.json

This is the actual layout JSON file you use in your themes. You should name it layout.json and add it to the folder.

🖼️ overlay.png

In addition to the layout, you should also add an overlay.png. This is used to preview your layout on the website. Read this for instructions on how to create such an overlay.

📁 options (optional) ➡

This folder will store the options a user can pick from on the website.

Submission Example

Note: I also recommend you to look at the files already in this repository.

1. Fork the repository
2. Go to the correct 'target filename' your layout is for.
3. Create a folder with the name of your layout, enter it.
4. Copy the layout JSON file to your layout folder as layout.json.
   Also copy the common JSON (if you have one) as common.json
5. Create a details.json, paste the following contents and fill in your own:

{
    "description": "<A description of what your layout looks like or whatever>",
    "creatorUuid": "<your creator uuid>",
    "color": "<a hex color code without the #. optional>"
}

8. Create a layout overlay by following the 'Creating Overlays' guide and save it as overlay.png in your layout folder.

If with the above instructions, you're still not sure what to do, contact one of our moderators on Discord.