Layout

Base Components

Found in config file under Base Ui Elements. Each element serves different purpose and has unique name. Changing names or deleting any of said elements will cause plugin to not work properly. Some of the fields might be set at null, it means that field is ignored by that specific element, check examples bellow.

 oxide/config/WelcomePanel.json

"background": {
    "Color": "0 0 0 0.8",
    "Material": "assets/content/ui/uibackgroundblur.mat",
    "Image": "",
    "Anchor Min": "0 0",
    "Anchor Max": "1 1",
    "Offset Min": "0 0",
    "Offset Max": "0 0",
    "Fade": 0.2,
    "Text (not for panels)": null,
    "Text Alignment (not for panels)": 4,
    "Text Font (not for panels)": null
},

 oxide/config/WelcomePanel.json

"close_button": {
    "Color": "0.56 0.20 0.15 0.9",
    "Material": "assets/content/ui/uibackgroundblur.mat",
    "Image": "",
    "Anchor Min": "0.72 0.115",
    "Anchor Max": "0.80 0.16",
    "Offset Min": "0 0",
    "Offset Max": "0 0",
    "Fade": 0.2,
    "Text (not for panels)": "✘ CLOSE",
    "Text Alignment (not for panels)": 4,
    "Text Font (not for panels)": "robotocondensed-bold.ttf"
},

Tab Buttons

Found in config file under Tab Buttons. Elements there have no names, can be deleted if needed. It's list of buttons and they are assigned to text tabs based on their index, therefore moving them is not recommended.

 oxide/config/WelcomePanel.json

{
    "Color": "0 0 0 0",
    "Text Alignment": 4,
    "Text Font": "robotocondensed-bold.ttf",
    "Anchor Min": "0.1845 0.700",
    "Anchor Max": "0.3095 0.748",
    "Material": "assets/icons/iconmaterial.mat"
},

Positions

When it comes to adjusting positions for already created template, Anchors will do the job just fine. Anchors can be calculated with this tool.

There are two types of positions - Anchor and Offset. Both have Min and Max. Min value is the bottom left corner position, and Max is the top right one. Both Min and Max have X and Y values and are such string: "X Y".

Anchors are numbers that represent width and height in percents (%) from 0.0 (0%) to 1.0 (100%).
Offsets are accurate values that are width and height in pixels relative to 1280x720. Example: You made a 100x100 box for 1280x720 and if you switch to 2560x1440, it will be 200x200 pixels.
Anchors are applied before offsets. If you want offsets to be relative to the screen center, make all anchors 0.5 0.5 so that both corners are in the center. Then to make a 100x100 box you should use offsets -50 -50 for bottom left corner and 50 50 for top right one.

umod.org - Basic concepts of GUI

Colors

Rust user interface is using RGBA color system in but values instead of going 0-255 they go 0-1 which basically represent percents.

Materials

Available materials for UI:

assets/icons/iconmaterial.mat
assets/content/ui/uibackgroundblur.mat
assets/content/ui/uibackgroundblur-notice.mat
assets/content/ui/uibackgroundblur-ingamemenu.mat