Adding Custom USS Styles

Customization is a key feature of ZoboUI, and adding your own USS (Unity Style Sheets) styles is a straightforward process. This flexibility allows you to tailor the appearance and behavior of your UI elements beyond the pre-generated utility classes.

Starting with the Theme Config Asset

To add your custom styles:

1. Find Your Theme Config Asset: Open your Unity project and navigate to the ZoboUI Theme Config asset.
2. Add Your Custom Styles: Look for the 'Custom USS' field within the Theme Config. This is where you can input your own styles, just like you would in a regular USS file.

Default Behavior

By default, any styles you add in the 'Custom USS' field are included at the top of the generated USS file. This placement ensures that your custom styles have precedence over the generated utility classes.

Managing Style Precedence

If you need to manage the precedence of your custom styles relative to the generated styles, you can use the {{generated_uss_styles}} template string.

Example: Custom Styles Around the Template String

/* Custom styles before generated styles */
.my-custom-style {
    /* Your custom properties */
}

{{generated_uss_styles}}

/* Custom styles after generated styles */
.another-custom-style {
    /* Additional custom properties */
}

In this example, .my-custom-style will be placed before the generated ZoboUI classes, and .another-custom-style will be placed after them. This allows for precise control over the order of your styles in the final USS file.

By leveraging the ability to add custom USS styles, you can ensure that your project's UI is tailored to your specific requirements.