Creating a Style Sheet

In this section we’ll create a style sheet to use throughout the application and then apply the style sheet to a report.


Step 1: Create a new style sheet and a new report definition

Select the Support Files tab at the bottom of the Application panel. Right-click the Style Sheet support files folder and select the Add New File … menu option.

Give your style sheet a name like “MyFirstStyleSheet.css”. Notice that, unlike report definitions, support files require you to supply a file extension when naming them.

Figure 4.1: Application Panel after adding new StyleSheet file

In the Application panel, switch back to the Definitions tab and make a copy of the "Chapter3Report2" report definition. Rename it as “Chapter4Report1”. 

Step 2: Apply the style sheet to the report

In the new Chapter4Report1 definition, select the default Style Sheet element.

Figure 4.2: Definition Editor Panel after adding Style Sheet element

Set its Style Sheet attribute to your new style sheet. Look in the Suggestions panel for a list of style sheets. 

Figure 4.3: Attributes Panel after setting Style Sheet element attribute 

The classes in the style sheet will now be available to elements in the report. 

In addition to applying a style sheet to an individual report, a global style sheet can be applied to all reports by adding a Global CSS element within the _settings definition. If desired, a style sheet can be applied to a report and will override the global style sheet. 

Step 3: Editing style sheets 

Editing a style sheet can be accomplished within Logi Studio in two ways. First, if you select a style sheet file in the Support Files list in the Application panel, its contents will open in a simple editor that takes the place of the Definition Editor. Any changes made there are saved when you navigate to another part of Studio. 

The second method of editing is to use the TopStyle Lite style sheet editor that’s installed with Logi Studio. This is a more robust editor with a number of nice features. To open your style sheet in it, first open the style sheet in the simple editor mentioned above and then click the “Edit with Style Sheet Editor” button in the upper right-hand corner of the editor’s frame. TopStyle Lite will launch and open your style sheet file independently. 

Figure 4.4: A style sheet in the Studio simple editor 

In order to see changes made and saved in TopStyle Lite reflected in the simple editor in Studio, you will need to right-click the style sheet file in the Support Files list and select the “Refresh from File” option. This is also required in order to be able to edit the file in the simple editor after editing it in TopStyle Lite.

You can, of course, open and edit style sheet files outside of Studio with any editing tool ranging from the highly complex down to Notepad.