- Philomena Dolla

This blog post is part of the series on customizing the Adobe Integrated Content Review solution.

***

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.

 

——-
Original article at http://blogs.adobe.com/ADEPhelp/2011/09/changing-skins-and-styles-of-icr-ux-components.html.