Changing Skins and Styles of ICR UX Components

The look and feel of a UX component in the Integrated Content Review (ICR) solution can be customized to suit your business needs. You can choose to apply specific formatting and coloring styles, or even change the skin of the component.

The Asset Details pod of the solutions interface, for example, can be modified to change the way the asset attributes are displayed. In the existing layout, the Asset Details pod displays all the attributes in a single pane. You need to scroll through the pane when the attributes extend beyond the display area.

 

To minimize scrolling and for better accessibility, you can change the single pane format to use an accordion menu such that the system defined attributes and the custom attributes are displayed in two different panels. (This example assumes that a user is allowed to define any number of custom attributes for any asset at design time.)

To modify the Asset Details pod:

  1. Make a copy of the existing AssetDetailsPodSkin (CustomAssetDetailsPodSkin.mxml) skin and edit it.
  2. Modify the CSS (icr.css) to use the new skin.
  3. Specify the styling changes as part of the code for the skin itself, or update the CSS and apply it to the skin. For example, you can centre and underline the panel labels by associating a style with the accordion header.
    Defining your style in the CSS:

    Associating the custom style with the accordion header
    :
     
  4. Save and deploy the customized solution interface. See this blog post for more information on saving and deploying.
    System Attributes Panel:

    Custom Attributes Panel:

You can view the the CustomAssetDetailsPodSkin.mxml file here. See UX components for more information on UX components. For background information about setting up the ICR development environment, refer to this blog post.

 

VN:F [1.9.22_1171]
Was this helpful? Please rate the content.
Rating: 0.0/10 (0 votes cast)

About Philomena Dolla

Philomena is a Senior Content and Community Lead developing Adobe AIR documentation for mobile devices. Her experience in writing spans a broad range of technological domains. Fascinated by the rapidly-changing face of technical communication, she loves to keep up with the latest content deployment strategies. She likes spending time exploring and experimenting with various development methodologies to make information accessible and relevant to the user.
This entry was posted in Customer Experience Solutions and tagged , , , , , , , , , . Bookmark the permalink.

Comments are closed.