Styling the GUIs

In Staff++ it's possible to add configuration files to change the look of the in-game GUIs.

Styling can only be used to change the appearance of the GUI. Color, Material, location of items, ...

It cannot change the content of the GUI. It cannot change the title of the inventory to something else. It cannot change the action that is taking when clicking on an item. It cannot add random items to the GUI.

Getting started

To begin styling in Staff++, follow these steps:

1. Grant yourself the staff.show-style-info permission. This permission enables you to use the /show-style-info command.

2. In your game, execute /show-style-info. In this example, we'll work with the report details screen.

3. You'll notice that the reports GUI now displays additional information in the inventory title and items.

4. To ensure that all lore (text descriptions) is displayed correctly, adjust the GUI scale in your video settings.

5. Keep in mind that some classes may not appear in the GUI, but you can find them in the important classes section of the Staff++ wiki.

Id's are shown in RED and classes are shown in GREEN. Note that all labels and values in this item lore have all the same classes. While the ids are always different.

Styles folder

Create a styles folder inside the Staff++ plugin folder. This folder will contain all style configuration files for Staff++. You can create as many files as needed and name them as you prefer. A good practice is to create at least one style config file for each GUI you want to modify.

For our example, we'll use two style files. Create a report-detail.yml file for styling rules specific to the report details GUI.

Example

In the example below, we'll customize the view of the report details. Each part of the styling is explained separately, and the complete report-details.yml is provided at the end with all styling rules.

Changing the title color

To change the title color, reference the class associated with all titles in the report-detail.yml and reload the plugin using /staffplus reload:

# Id of the GUI
report-detail:
    # This is a class that is always placed on the title of GUIs 
    $gui-title:
        # Change the color of title component
        color: "&1"

Changing an item.

If you have enabled show-style-info you'll see that the item's id is report-info. But the item also has a class report-info. In our case we are going to use the class. We can use this class in our report-detail.yml to change the item.

In this example I will change the material to be a book. I'll change the color of the item name to &f. I'll change the color of all labels to &7 and change the colors of all values to &6. I'll remove the ID and location lines and I'll remove the status label but not the actual status.

Reload the plugin using /staffplus reload

report-detail: 
    # Class of the info item
    $report-info:
        material: BOOK
        # All item names in the GUIs have a class called item-name
        # We can use this to change the color of the item.
        $item-name:
            color: "&f"

        # Change all text part color inside the lore of this item
        # We use the class name so that we can match all text parts with one rule.
        $detail-label:
            color: "&7"
        $detail-value:
            color: "&6"

        # Hide the entire id line
        id-label:
            hidden: true
        id-value:
            hidden: true

        # Hide the entire culprit line
        culprit-label:
            hidden: true
        culprit-value:
            hidden: true


        # Hide the entire location line
        location-label:
            hidden: true
        location-world-value:
            hidden: true
        location-separator:
            hidden: true
        location-block-value:
            hidden: true

        # Hide only the status label
        status-label:
            hidden: true

BEFORE

before

AFTER

Hiding Items

We can also hide items from the GUI.

Just because an item is hidden doesn't mean the player can't access the functionality in some other way. If you want to disallow the player from using a functionality you need to setup the correct permissions.

Let's remove some of those large unassign/reject and resolve action items. Add the following to your report-detail.yml and reload the plugin using /staffplus reload

# Class of the GUI
$report-detail:
    # Id of the item   
    unassign-1:
        hidden: true
    unassign-2:
        hidden: true
    unassign-3:
        hidden: true

    reject-1:
        hidden: true
    reject-2:
        hidden: true
    reject-3:
        hidden: true
    reject-4:
        hidden: true
    reject-5:
        hidden: true

    resolve-1:
        hidden: true
    resolve-2:
        hidden: true
    resolve-3:
        hidden: true

Moving items

The above seems a bit weird. But we can move the items to make the GUI more compact. Also let's move the back button to another location. Add the following to your report-detail.yml and reload the plugin using /staffplus reload

report-detail:
    back-button:
        slot: 17
    unassign-0:
        slot: 1
    reject-0:
        slot: 2
    resolve-0:
        slot: 3

Changing the size

Now that everything is more compact we can change the actual size of the inventory

Careful when changing the size. If you change the size but some items are located in slote that are not valid for the inventory's size that GUI will break. So make sure to first locate all items in the correct position before resizing.

Add the following to your report-detail.yml and reload the plugin using /staffplus reload

report-detail:
    size: 18

Generalizing style rules

It's important to note that because all the styling rules are defined underneath the report-detail section, the rules are only applied to that specific GUI. If you would open the reports overview for example the report info item would have none of the below changes

If you would like that your report info item has the above rules applied to every GUI in which it is used we need to move the rules to be less specific to this gui. We can simply do this by creating another file called reports-styling.yml (this file will serve as common style rules for reports) and place that file inside the styles folder.

Remove the entire report-info section from the report-details.yml file and add to the reports-styling.yml

Conveniently in staff++ all report information items in the GUI all have the report-info class. So this rule will match all those components regardless of which GUI they are in.

# All rules for any component with the class report-info
$report-info:
    material: BOOK
    # All item names in the GUIs have a class called item-name
    # We can use this to change the color of the item.
    $item-name:
        color: "&f"

    # Change all text part color inside the lore of this item
    # We use the class name so that we can match all lorelines with one rule.
    $detail-label:
        color: "&7"
    $detail-value:
        color: "&6"

    # Hide the entire id line
    id-label:
        hidden: true
    id-value:
        hidden: true

    # Hide the entire culprit line
    culprit-label:
        hidden: true
    culprit-value:
        hidden: true


    # Hide the entire location line
    location-label:
        hidden: true
    location-world-value:
        hidden: true
    location-separator:
        hidden: true
    location-block-value:
        hidden: true

    # Hide only the status label
    status-label:
        hidden: true

So now we can see our changes as well in all other GUIs containing report info items

Full example

styles/report-details.yml

# The id of the GUI
report-detail:
    # Change the size of the GUI
    size: 18
    # Change the gui title color
    # All gui titles in staff++ have the $gui-title class
    $gui-title:
        color: "&1"

    # Move the back button to the correct location
    back-button:
        slot: 17

    # Move the action buttons to the correct location    
    unassign-0:
        slot: 1
    reject-0:
        slot: 2
    resolve-0:
        slot: 3


    # Hide all action items we do not want
    # ====================================
    unassign-1:
        hidden: true
    unassign-2:
        hidden: true
    unassign-3:
        hidden: true


    reject-1:
        hidden: true
    reject-2:
        hidden: true
    reject-3:
        hidden: true
    reject-4:
        hidden: true
    reject-5:
        hidden: true

    resolve-1:
        hidden: true
    resolve-2:
        hidden: true
    resolve-3:
        hidden: true

styles/reports-styling.yml

# All rules for any component with the class "report-info"
$report-info:
    material: BOOK
    # All item names in the GUIs have a class called item-name
    # We can use this to change the color of the item.
    $item-name:
        color: "&f"

    # Change all text part color inside the lore of this item
    # We use the class name so that we can match all lorelines with one rule.
    $detail-label:
        color: "&7"
    $detail-value:
        color: "&6"

    # Hide the entire id line
    id-label:
        hidden: true
    id-value:
        hidden: true

    # Hide the entire culprit line
    culprit-label:
        hidden: true
    culprit-value:
        hidden: true


    # Hide the entire location line
    location-label:
        hidden: true
    location-world-value:
        hidden: true
    location-separator:
        hidden: true
    location-block-value:
        hidden: true

    # Hide only the status label
    status-label:
        hidden: true