Example: Creating and Applying CSS Styles

In this example, you will first create a new CSS file, and then design a Viewsheet that uses the styles defined in the file. Follow the steps below.

1. Create a plain text file with the following contents.

.Header2 {

   font-size: 20pt;

   font-family: "Arial Narrow";

   font-weight: bold;

   background-color: #FFEEBB;

   color: rgb(100,50,50);

   text-align: center;

   vertical-align: middle;

   border-color: rgb(150,50,50);

   border-style: double dotted;

}

 

#SalesTable {

   background-color: #FFEEBB;

}

 

.HighlightColumn {

   background-color: yellow;

}

 

.AxisText {

   color: rgb(150,50,50);

   font-size: 14pt;

   font-weight: bold;

}

2. Save the text file in UTF-8 format (without BOM) with the name 'myStyle.css'.

3. Deploy the CSS file by following the instructions in the 'Viewsheet CSS' section of Look-and-Feel, in Administration Reference. (This may require an administrator.)

This CSS file is now ready for use. It contains three CSS Classes (Header2, HighlightColumn, and AxisText) and one CSS ID (SalesTable). In the next steps, you will create a new Viewsheet with components that draw their styles from these CSS classes.

4. Create a new Viewsheet based on the 'Tutorial' > 'ProductSales' Worksheet.

5. Add a Text element to the Viewsheet. Enter the text 'Total Sales'.

6. Right-click the Text component, and select 'Format' from the context menu. This opens the 'Format' dialog box.

7. Click the CSS tab. From the 'Class' menu, select 'Header2', and click 'OK'. This applies the Header2 style to the text element.

 

8. Resize the text element so that the text is fully visible.

 

9. Add a new Chart component. From the Data Source panel, drag the 'Date' field to the 'X' region, and drag the 'Total' field to the 'Y' region.

10. Click 'Select Chart Style' in the Data panel, and select the bar-chart option. This changes the display to a bar chart.

11. Right-click the X-axis title on the chart, and select 'Title Format' from the context menu. This opens the 'Title Format' dialog box.

 

Note that the 'Type' field indicates 'XTi­tle'. This means that the CSS only applies to the X-axis title.

12. In the 'CSS' region, select 'AxisText' from the 'Class' menu. Click 'OK'. This applies the AxisText style to the X-axis title.

 

13. Repeat the above steps to apply the AxisText style to the Y-axis title as well, and then close the Chart Editor.

14. From the Component tree, drag the entire 'SalesByDate' Data Block to the Viewsheet. This creates a new table called 'SalesByDate'.

15. Click to select the table. Click a second time on the table's “move” handle to ensure that the entire table is selected (rather than just the title bar). Finally, right-click the table's “move” handle, and select 'Format' from the context menu. This opens the 'Format' dialog box for the table as a whole.

 

Note that the 'Type' field indicates 'Table'. This means that the CSS applies to the table as a whole

16. Click the CSS tab. From the 'ID' menu, select 'SalesTable', and click 'OK'. This applies the SalesTable style to the table as a whole.

 

17. Click to select a cell in the 'Quantity Purchased' column of the table. Right-click the cell, and choose 'Format' from the context menu. This opens the 'Format' dialog box for the data cells in the column.

 

Note that the 'Type' field indicates 'Table Summary'. This means that the CSS only applies to the data cells

18. Click the CSS tab. From the 'Class' menu, select 'HighlightColumn', and click 'OK'. This applies the HighlightColumn style to the data cells in the 'Quantity Purchased' column.

 

You can manually make additional modifications to the chart, as desired. (For example, change the color of the chart bar elements to match the axis titles.) Format settings that you adjust manually will override format settings controlled by CSS.

 

 

See Also

Alignment Tab, Font Tab, Border Tab, Color Tab, to set styles without using CSS.

Dynamic Properties, for information on setting color via variable or expression.

<< Applying CSS Styles © 1996-2013 InetSoft Technology Corporation (v11.5) CSS Properties and Syntax >>