What are CSS Style Files

The style file used by the plugin follows a similar structure and format than the CSS files used in the web to define styles.

Here is an example of how it looks:

@import "Includes\Palette";     // Loads all the styles in the Palette.style file
                               // path is relative to this file
Text: {
   font                : Arial;
   fontSize        : 16;
}
Text.Header1: {
   .base    : Text;                    // Text.Header1 first applies the Style 'Text'
   fontSize : 96;
}

Button.Primary: {
   .base : Text.Header1;
   color : blue;
}


These files are not exactly CSS files given that a Unity UI screen can have way more customization options than a normal web page, so the format used by the plugin expands o the classic CSS file to include Rules, Converters, Children filtering.

The parameters used by the styles are not constrained to the HTML settings (e.g. border, color, alignment, etc). Instead they are designed to allow modifying any property or field value in the components of the game objects, including your custom scripts.

More details on the structure, rules, converters and other references related to the CSS styles format, can be found in the CSS Reference section


Where to Store the Style Files

Style files can be stored in any folder in your project. Once they are linked to a Skin or in the Global Settings, the path to that object is stored and loaded from that there every time the skin is applied.

A best practice tip, is to never store this files inside the "Plugins/I2/I2 CSS Styles" folder, that way, when updating the plugin you can safely delete the entire folder before reinstalling it, without risking loosing any of your styles.


For more information about how to use the Style files, please see the Skin and the Global Settings sections.

Created with the Personal Edition of HelpNDoc: Produce electronic books easily