Author Archive: Philomena Dolla

Changing application fonts for the ICR solution interface

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

***

The applications shipped as part of the Integrated Content Review (ICR) Solution interface use certain default fonts to display text. You can customize your application and change the default font to suit your requirements. The CampaignPortal Flex application, for example, uses the MyriadPro font.

The default font files for the CampaignPortal project are located at campaign_portal\src\main\flex\assets\fonts. The fonts used by the application are defined in the style sheet file, icr.css.

 

To change the font, create new font files for the project and update the style sheet, icr.css, with the path to these new font files:

    1. In Flash Builder, open the CampaignPortal project in the Package Explorer view.
    2. Copy the font files that you want the application to use.
    3. Navigate to CampaignPortal > src > main > flex > assets > fonts.
    4. Right-click fonts and select Paste to paste the font files to the fonts directory.
    5. Navigate to CampaignPortal > src > main > flex > css > icr.css.
    6. Open the style sheet, icr.css, in the editor.
    7. Update the paths to the font files to point to the new font files.
    8. Rebuild and redeploy the package. See this blog post for more information on building and deploying.

 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)

Changing skins and styles of ICR UX components

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.

 

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