Custom Style Sheets for (deprecated) Guides

Use custom style sheets (CSS) compiled as SWF files to control the appearance of Guide components at runtime.

In general, creating a custom style sheet for a Guide includes the following steps:

  1. Create a CSS that contains the Guides CSS styles. For a list of the CSS classes and properties for Guides, see CSS Reference for (deprecated) Guides.

  2. Add a style sheet to your Flex project or to a LiveCycle application:

    Create a style sheet for Guides with Flash Builder

    You can create a style sheet SWF file for use with a Guide. Use Flash Builder to compile a CSS file to a SWF file.

    Guides support both MX and Spark components. The CSS file must include the namespace information.

    Use the CSS files as a starting point for creating a custom style sheet. The CSS files are located in the Guides SDK, which is located where Workbench is installed. By default, the path is C:\Program Files\Adobe LiveCycle ES3\Workbench 10\sdk\misc\Guides.

    1. In Flash Builder, open your Flex project.

      For information about creating a Flex project, see Create Flex library projects for Guide extensions.

    2. Add a CSS containing Guide styles, as well as any assets referenced (such as images), to your Flex project. For a list of the CSS classes and properties for Guides, see CSS Reference for (deprecated) Guides. For information about adding namespace information, see Using Cascading Style Sheets.

    3. Right-click the CSS file and select the Compile CSS To SWF option. The SWF file is generated in the bin-debug folder.

    4. In Workbench, add the SWF file to a LiveCycle application. See Reference customizations in a Guide.

      Create a style sheet for Guides with the command-line compiler

      You can use the command-line MXML compiler to create a style sheet SWF file for a Guide. The MXML compiler is included with the Flex SDK that is available with Workbench.

      1. On the machine where Workbench is installed, ensure that the latest Java Runtime Environment (JRE) is installed.

      2. Click Start > Programs > Accessories > Command Prompt.

      3. Navigate to the Flex 4.5 SDK that is located in the Workbench install location. By default, the path is C:\Program Files\Adobe LiveCycle ES3\Workbench 10\Flex_SDK\flex45.

      4. Extract the Flex 4.5 SDK and locate the Flex_SDK\bin subfolder

      5. Type the following and then press Enter:

        mxmlc [sourcepath]/[filename].css -output=[destpath]/[filename].swf

        Where [sourcepath] is the folder location of the source CSS file, and [destpath] is the folder location for the compiled SWF file.

      6. In Workbench, add the generated SWF file to a LiveCycle application. For information about adding resources to a LiveCycle application, see Reference customizations in a Guide.

        // Ethnio survey code removed