Managing table styles

The table styles used in the Composition Center text editor are defined in a compositioncenter.css style sheet file. You can edit the style sheet file to add new customized styles or to modify the existing styles.

When upgrading and installing hotfixes, the compositioncenter.css file is overwritten. To save customized styles, you must store a copy of the file in a safe place before redeployment.

Adding new table styles

You add new styles by adding new classes to the style sheet file.

Each class must have a unique and descriptive name, since the class name is exposed in the Composition Center text editor.

You add formatting to the style by defining CSS (Cascading Style Sheet) properties for the class. The properties should be within brackets, as described in Example 5.

You must not set style formatting directly on table elements since that affects all tables in the application.

Prerequisites

•	Before updating the compositioncenter.css file, we recommend that you back up the file.

Post requisites

•	You must synchronize the Composition Center compositioncenter.css file with the corresponding style sheet file for Ad Hoc Correspondence. See Managing table styles in the Ad Hoc Correspondence and Correspondence Reviewer documentation.

To add a new table style

1	Open the compositioncenter.css file in a text editor. The file is located in:

<Portal root>\<Portal name>\css

2	Add your classes and define the CSS properties.

3	Save and close the file.

4	To verify the new style in Composition Center, you must restart the web browser, log in to StreamStudio, and open the text editor in Composition Center. Then create a table with the customized table style and finally preview the document definition.

Note:

The text editor does not always display the correct formatting. You must always preview the document definition to verify the table layout.

Example 5

Adding new table styles

In this example, you add the following customized table style:

Figure 6

Table generated in Composition Center

Since the heading row differs from the other table rows, you must define two new classes in the style sheet file.

•	Adding a class for the table rows

In compositioncenter.css, you add a class named .CorpGreenTable for the table. The .CorpGreenTable class contains the formatting for font color, table width, thickness, and color for top and bottom borders.

.CorpGreenTable{
color:#228b22;
width:300pt;
border-top:2px solid #228b22;
border-bottom:2px solid #228b22;
}

•	Adding a class for the table heading row

In compositioncenter.css, you add a class named .CorpGreenHeading for the heading. The .CorpGreenHeading class contains the formatting for background and font colors.

.CorpGreenHeading{
background-color:#98fb98;
color:#000000;
}

•	Using the styles in Composition Center

In Composition Center, insert a new table and select the CorpGreenTable style. The inserted table have the following layout:

Figure 7

The same style applied on all rows

To give the heading the CorpGreenHeading style, click in the heading row, and select the CorpGreenHeading style. Now the table has the following layout:

Figure 8

Different styles applied on heading and body rows