Selectors
Inside the style configuration files we need to use what we call "selectors" to try and select the correct component for which we want to change the styling.
We basically have 2 ways of selecting a component.
- By ID
- By Class
Make sure to enable style information by executing
/show-style-info
Ids are shown in red and classes are shown in green.
The ID of the GUI is shown before the title of the GUI
Item id and classes are shown before the name of the item
Ids and classes of the lore lines are shown below the line. Do note that one line inside the lore can consist of multiple parts. Each part is a component and thus can have its own ID and classes. If you see multiple ids next to each other it means there are multiple text parts.
In this example there are 2 text parts for this one loreline. One is the label "Reporter: " and the other one is the value "garagepoort".
We use the YAML file format for styling. Inside the
styles directory we can create whatever yml config file we want and the rules configured in it will be picked up.report-detail:
report-info:
reporter-label:
color: "&C"
The selector in the above case is: report-detail -> report-info -> report-label
Basically this means we are selecting a component with the id "report-label" which is part of another component with the id "report-info" which then again is part of a GUI with the ID "report-detail". We can see in the screenshot this will select part of the lore of the report information item.
Then we set the styling rules for this component by, in this example, setting the color of that specific part of the lore.
report-detail:
report-info:
$detail-label:
color: "&C"
The selector in the above case is: report-detail -> report-info -> $detail-label
Basically this means we are selecting any component that has the class "detail-label" which is part of another component with the id "report-info" which then again is part of a GUI with the ID "report-detail". We can see in the screenshot this will select multiple parts of the lore of the report information item.
The dollar prefix in
$detail-label means we are selecting a class and not an ID.Then we set the styling rules for this component by, in this example, setting the color of that those specific parts of the lore.
Last modified 1yr ago