Customising Style Sheets

In this tutorial you will work with a process-description that contains three plans – standardPlan, styledPlan1 and styledPlan2 – each containing one action: standardAction, styledAction1 and styledAction2, respectively.

You can either create this process-description yourself, or download the ready-made WEC_tutorial7 from the World > Tutorials > Customisation_samples folder in the ACL Web Repository.

1. Run the Process-Description Locally in a Web Browser

For more information on running a process-description locally see step 1 of tutorial 1.

One of the actions is displayed in the main panel; all three actions appear in the Active Tasks panel on the left. When you click on one of the labels, the corresponding action appears on the right. All actions have the same look & feel.

Click Confirm to complete the process.

2. Create a Customised Style Sheet

In Apache Software Foundation\Tomcat 5.0\webapps\CustomTallis\customisations\stylesheets you will find Tutorial7stylesheet.css. This style sheet is based on the standard style sheet, but some of its styles have been modified. You can view this file in a style sheet editor (or in a simple text editor).

3. Create a Mapping File

In Apache Software Foundation\Tomcat 5.0\webapps\CustomTallis\customisations\mappings you will find examples of mapping files. Open the file entitled tutorial7mapping.xml.

The mapping file identifies the styledPlan and points to the customised style sheet that replaces the standard style sheet for this plan using the stylesheet attribute. Note that tasks inherit the style sheet of their parent plan. This means that the styledAction will have a customised look & feel.

4. Point to the Mapping File

In the Context field of the top-level plan of the process-description, type the following lines:

#metadata
tallis.content=/customisations/mappings/Tutorial7mapping.xml

5. Run the Process-Description Locally in a Web Browser

Run the process-description.

Switch between actions to view the effect of the style sheet.

6. Create a Customised Style Sheet for styledPlan2

Create a copy of Tutorial7stylesheet.css and rename it Tutorial7stylesheet2.css.

Make some changes to the styles in the style sheet: to start with, try changing a few colours and fonts.

Modify the mapping file so that styledPlan2 is identified and bound to the new customised style sheet. To achieve this, add the following line:

Run the process-description to view the effect of your changes.