Themes

Our stock themes are designed to help developers instantly apply a consistent "look" to their applications. This topic discusses themes, how to apply them, and how to create them.

About Themes

Several standard themes are included with Logi Info for your use (and are also available on DevNet via the Samples page). These themes include a collection of graphic images, a style sheet, and a template modifier file, which impart a specific appearance to a Logi application.

You can view the currently available themes in action in the Themes Sample Application.

Themes do the work for you, setting appearance attributes for charts and data tables, and for complex super-elements such as the Analysis Grid, generally making it easy to produce great looking reports without an in-depth knowledge of Cascading Style Sheets. You can easily switch between themes in order to experiment with them.

As of this writing the standard themes include:
 

Theme Description
Arizona This theme, introduced as an independent download in May 2017, has earthy tones in the grand tradition of the American Southwest. See the Sample Themes library on DevNet to download it.
Black Pearl A black background and dramatic colors make this an unusual theme.
Clarity Offers a clean look that's "easy on the eyes".
Professional Blue Gradients and a polished look, with colors grouped in the blue spectrum.
This theme is no longer included, starting with v12.1.
Professional Green Gradients and a polished look, with colors grouped in the green spectrum.
This theme is no longer included, starting with v12.1.
Signal A modern, professional, and attractive look that works well with both desktop and mobile displays.
Silver A simple, understated look.
Simple Blue A stronger appearance with flat blue color scheme.
This theme is no longer included, starting with v12.1.
Transit A bold theme designed to look good on mobile devices.

   Note that standard themes may be updated when a new Logi Info version is released and this may produce changes in the appearance of applications that are upgraded to the new version. See the Theme Release Notes section below to determine when the standard themes have been updated.
 

Uses Other Than Appearance

Themes, however, are not "just a pretty face". Because themes are capable of altering your report definitions, they can be used for purposes unrelated to application appearance. For example, they can be used to set default attribute values. This can be very useful if you consistently use the same set of attribute values for, say, data tables, and you want to apply them as defaults every time you start a new definition or application. See the final section in this topic for more information.
 

Themes in the Debugger Trace Page

Themes use one or more Definition Modifier Files (DMFs) to alter the definition and, when debugging links are turned on, special entries will appear in the Debugger Trace report (see Debug Reports):
 

Click the entries shown above to view the DMF log and the source code of the modified definition. This information can help you understand how a theme works and may be helpful if you want to create your own custom theme.

Back to top

 

Selecting a Theme in Studio's Wizard

When you use the New Application and Select Theme wizards in Studio, one of the steps is the selection of a theme:
 

Just select a theme from the list and it will be applied automatically to your new application.

Back to top

 

Applying Themes Manually

You can also apply a theme manually. A theme can be applied at the application level (which is what the wizard does):
 


As shown above, to apply a theme to the application as a whole, add a Global Style element to the _Settings definition. Then set its Theme attribute to the name of one of the available themes. All reports in the application will have the theme applied to them. To apply a theme to an individual report definition:
 

As shown above, add a Style element to the report definition. Then set its Theme attribute to the name of one of the available themes. The report will have the theme applied to it.

Back to top

 

Themes and Style Sheets

When a theme is selected for a definition or application, it automatically applies a specific appearance to super-elements, like the Analysis Grid. In addition, the theme makes available a standard set of styleclasses that developers can apply to regular elements. This can save a lot of time and helps to create a consistent appearance.  


In the example shown above, we see a definition that has had a theme applied to it. A Division element has been selected and one of the theme-supplied style classes is being assigned to it. As you can see, all of the theme-supplied classes begin with the letters "Theme" and they address alignment, font sizes, borders, and other useful styles.

Themes do not set the style class for every element; for example, Label and Rows, Row, and Column Cells (HTML tables) are not affected. You can set the Class attribute for these elements independently of the theme.

You can specify both a style sheet and a theme in a Global Style or Style element. If you have a style sheet and a theme assigned, the available classes from both will appear in the drop-down class list.
 

Interaction with Other Style Sheets

You may already have a style sheet that you like to work with when developing reports. How will that interact with a theme when it's applied to your report?

If you have assigned a style class to an element and the theme also applies a style class to that same element, the theme's style will be applied first, then yours. This means both styles will be applied but your style will "win" when there's a direct conflict. When there's no conflict, the effect will be additive.
 

Themes and Exports

Theme effects will also be applied to exports, which may or may not be desirable, and there is no way to block or undo the effects of a theme that has been assigned using the Global Style element. So if you plan to export reports to a format where appearance is important, such as PDF, you may want to assign themes using individual Style elements in each report, instead of the Global Style element.

Back to top

 

Creating Your Own Themes

Beginning with v12.1, Logi Studio includes the Theme Editor wizard, a tool that allows you to quickly and easily create your own custom themes. This tool is also available as an element, if you'd like to build an application that lets administrative users modify the application's appearance at runtime. For more information, see Theme Editor. Developers working with earlier Logi Info versions can create custom themes manually. You're encouraged to examine the standard themes and use them as the basis for creating your own themes. The remainder of this section discusses this process.
 

Creating a Custom Theme Manually

At a minimum, themes consist of a Theme Modifier file, which does the work. Themes that impart an appearance generally also include a collection of images and a theme style sheet. Each theme is contained in its own folder, which bears the name of the theme. You can view the currently available themes in action in the Sample Themes Library.

When you create a Logi application, the standard themes distributed with Logi products are stored in separate folders in the <yourApp>\rdTemplate\rdTheme folder; these should never be edited.
 

However, you can copy standard theme folders and then customize the files within them to create your own custom theme. Copy the standard theme folder to the _Themes folder beneath your application folder, i.e. <yourApp>\_Themes, (which you may have to create) and rename it to the name of your new custom theme, as shown above.

Apply your customizations to the files in this folder. Your custom theme will then be available for your application, by name, along with the standard themes, in the Style and Global Style elements' Theme attribute selection list, and will also be available for deployment with Studio's Deployment Tool.

One of the key mechanisms in a theme is the "template modifier file" or TMF. In your copied Theme folder, you'll find such a file, named ThemeModifier.xml. A TMF is an XML file that includes instructions for modifying the elements and attributes in a report definition. The TMFs in the standard themes are quite complex, as they attempt to cover all of the elements available for use in a report. Your custom TMF doesn't necessarily have to be so all-encompassing; it could, for example, only address the charts or other elements that are specifically used in your reports.

If you examine the TMF and style sheet in one of the standard themes, you'll see that the class and ID names are all carefully constructed to be unique, which is very important and which you are also encouraged to do.

 Note that the standard ThemeModifier.xml file may contain references to the standard style sheet and standard images in the rdTemplate/rdTheme/<Theme> folder. In your custom TMF, you may need to change these to reference the style sheet and images in your custom Theme folder.

Template Modifier Files provides detailed information about creating and using TMFs.

DevNet's Element Reference page has information about all of the elements and their attributes and may be useful when creating your own themes.
 

Your Themes in the New Application Wizard

If you want your custom theme to be available in Studio's New Applicationwizard, copy its folder to (you may have to create the _Themes folder):

    (.NET) C:\Program Files\LogiXML IES Dev\LogiStudio\BaseApp\<version>\_Themes
    (Java) C:\Program Files\LogiXML IES Dev\LogiStudio\BaseApp\<version>\_Themes

The New Application wizard displays a thumbnail image of each theme and, if you want to include images for your custom theme, place it, as a 225x160px .JPG image with the same name as your theme, in this folder:

    C:\Program Files\LogiXML IES Dev\LogiStudio\bin

Finally, If you create a custom appearance-specific theme that you think looks cool, it would be great if you shared it here on DevNet.
 

Element-Specific Theme Classes

Theme definitions also include an element-specific class filtering mechanism. This mechanism ensures that theme-related style classes meant for a specific element will appear in the Class attribute drop-down list for that element and only for that element. If you're creating your own theme, use the following text in its Theme.css file to indicate the start of those class definitions:

    /*User classes*/ /*rdElement: elementName */

where elementName is the name of the element (the XML source name, which appears at the top of the Attributes panel, not the name that appears in the Element Tree, which may have embedded spaces)

Classes that apply to multipleelements can be specified by using the | character to combine the element names, like this:

    /*rdElement: element1Name | rdElement: element2Name */

Classes defined like this will appear in the class list for the named elements, along with all the other appropriate theme classes and style sheet classes.

Here's a more complete example (don't enter the directions, within square brackets):
 

[ add after all other standard classes, just before end of file ]

/*User classes*/     
/*rdElement: Label */
.font12pt {
     font-size: 12pt;
}
/*rdElement: Division */
.font16pt {
     font-size: 16pt;
}

/*rdElement: InputText |  rdElement: InputPassword*/
.alignMiddle {
     vertical-align: middle;
}
/*End Element*/     
[ this is already in the file ]

Once the custom theme is applied, the class "font12pt" will appear in the list of Class attribute choices for all Label elements, and "font16pt" will appear in the list of class choices for all Division elements. "alignMiddle" will appear in the list of choices for both the Input Text and Input Password elements.

Back to top

 

Theme Release Notes

This table shows the history of changes to the Logi Info themes:

VersionDateChanges
12.2 SP 6May 2017New Arizona theme introduced.
12.1.188 Feb 2016 Pro Blue, Pro Green, and Simple Blue themes are no longer distributed. They're still supported in an application but cannot be edited with the Theme Editor. The styling of the other standard themes has been updated, changing their appearance.
11.3.049 30 Jun 2014 New Signal theme introduced.
10.2.424 7 Sep 2012 Original set of standard themes updated; Clarity and Transit themes introduced.
10.0.31 4 Feb 2010 Original set of standard themes introduced.

Back to top