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
First give yourself the following permission: staff.show-style-info. This permission allows you to use the /show-style-info command. Hop into your game and execute /show-style-info.  In our example we're going to use the report details screen. Open up a report detail.
You will see that the reports GUI now shows additional info in the inventory title and Items.
To see all lore correctly make sure to change the GUI scale inside your video settings
Certain classes are not shown in the GUI but they can be found on the important classes section of the 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
Inside the staff++ plugin folder create a new folder called styles.  This folder contains all style configuration files for Staff++. You can create as many files as you want and name them whatever you like. A good practice would be to at least create 1 style config file for each GUI you would like to change.
For our example we will be using 2 style files. Create a report-detail.yml file. This will be used for styling rules specific to the report details GUI.
Example
In the below example we will be changing the report-details view. Every part of the styling is displayed separately, the full report-details.yml is included at the bottom containing all styling rules.
Changing the title color
To change the title color we need to reference the class that is linked to all titles. Add the following to your 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
styles/reports-styling.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
# 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
Text parsing
Gui structure
Last modified 1yr ago