Styling the GUIs
Last updated
Last updated
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.
To begin styling in Staff++, follow these steps:
Grant yourself the staff.show-style-info permission. This permission enables you to use the /show-style-info command.
In your game, execute /show-style-info. In this example, we'll work with the report details screen.
You'll notice that the reports GUI now displays additional information in the inventory title and items.
To ensure that all lore (text descriptions) is displayed correctly, adjust the GUI scale in your video settings.
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.
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.
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.
To change the title color, reference the class associated with all titles in the report-detail.yml and reload the plugin using /staffplus reload:
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
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
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
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
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.
So now we can see our changes as well in all other GUIs containing report info items
