Skip to content

Submitting a Layout

Migush edited this page Dec 9, 2021 · 6 revisions

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)

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

  • global: items in here are available for all menus

📂 layout name

The name of this folder does not determine the name displayed on the website.

📃 common.json

Not required. 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:

{
    "name": "",
    "description": "",
    "creatorId": "",
    "color": ""
}
name

The name of the layout

description

A short description of your layout

creatorId

Your discord user id. You can find this by visiting this page on Themezer. The id will be displayed in the url. You must login at least once before submitting.

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.

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:
{
    "name": "<The name of your layout>",
    "description": "<A description of what your layout looks like or whatever>",
    "creatorId": "<your creator ID (the ID in the url when you go to your profile on Themezer)>",
    "color": "#<a hex color code. this is not required>"
}
  1. 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, dm me (Migush#4096) on Discord.