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.

Gui

The ID of the GUI is shown before the title of the GUI

Items

Item id and classes are shown before the name of the item

Lore line

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".

Selecting and applying styling

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.

ID selection

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.

Class selection

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.