Introduce a new Style for a Control in Layout Designer

Step 1: Create your custom style

In CSS snippet you can see the simple implementation of such style:

  .my-custom-style .literal-value {
    background-color: red;
}

Save that CSS as file in your custom workspace. For example here: <installationFolder>/wm/workspaces/MyCustomWorkspace/css/mycustomstyle.css

To make the implemented control be known by UUX application, references to the Front-end assets (e.g. JS libraries or CSS) need to be properly registered in the UUX platform. For the integrating 3-d party modules, the UUX platform uses "UUX Front-end Workspaces". 

Step 2: Register style in the Layout Designer

UUX application can recognize the implemented style when it's registered in your workspace: create a new .js file or use an existing one. Make sure that the path to this file is present in the 'resources' section of the workspace.json file.

Add the following part with your custom style for Literal controls in the new or existing file:

        mx.workspacesConfig.registerStyles([
            {
                "class": "my-custom-style",
                "name":"My Custom Style",
                "tags": ["literal"]
            },
        ])

Tags, is an array of identifiers, which characterize a control, or the group of controls (family of controls). As far as all controls have complex composite HTML structure, it is important to display only appropriate Styles for each control. The Tag value, which corresponds to your control is set in the configuration of the Control Style Property (or in Style property of the inherited Control)

Step 3: Use custom style the Layout Designer

Open any Layout where style needs to be applied, select any literal control, and see the style property:

After saving Layout, custom style will be applied to selected Literal