Theme Editor

The Theme Editor allows you to easily create custom themes based on the standard themes distributed with Logi Info. This topic discusses the Theme Editor:

 

About the Theme Editor

Themes allow you to apply a consistent appearance to your Logi applications. Several standard themes are included with Logi Info for your use. 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. For more information, see Themes. The Theme Editor, available in Log Info v12.1+, allows you to create your own custom themes by modifying and saving a standard theme. Colors, typography, and other theme styling can be configured to achieve the special "look" you desire. The Theme Editor is available for use in two ways:
 

As a Logi Studio Wizard

Logi Studio offers the Theme Editor as a wizard for developer use. Once you open an application in Logi Studio, the main menu's Design tab includes a Theme Editor icon:
 

Selecting this icon launches the wizard and prompts you to select one of the standard themes, or one of your existing custom themes, if any, for editing. You're not allowed to directly edit the standard themes so, if you select one of them, the wizard will make a copy of it for you to edit and prompt you for a name for your new custom theme. Your custom theme will be saved in your application's _Themes folder and you'll be prompted to apply this theme, in the form of a Global Style element in the application's _Settings definition.
 

As a Logi Info Element

Logi Info also makes the Theme Editor available as an element that can be included in your Logi application. This allows you to create an application that allows administrative users to modify its appearance at runtime, by editing a custom theme you've created. However, users cannot use this element to create custom themes.
 

The Theme Editor element's runtime availability can be controlled using its Security Right ID attribute (when using Logi Security) or by placing it beneath a container element, such as a Division, that has a Condition or Show Modes attribute. In the example shown above, a Button and Action.Show Element are used to show/hide a Division containing the Theme Editor. The element's only required attribute, Theme, identifies the name of the custom theme to be edited. An optional attribute, Autosave Theme, controls whether a Save button is displayed (the default) or whether each configuration change is automatically saved as it's made (the Save button is not displayed).
 

Legacy Custom Theme Considerations

Custom themes created from standard themes distributed with versions of Logi Info prior to v12.1 will still work correctly with your Logi v12.1+ applications. However, v12.1+ standard themes use a different internal structure, which is the one recognized by the Theme Editor. Therefore, custom themes based on standard themes distributed with earlier Info versions cannot be edited with the Theme Editor. You will have to recreate them using v12.1+ standard themes in order to be able to edit them with the Theme Editor. The Theme Editor does not affect any custom code entered into a custom theme's Template Modifier File. If you choose to recreate a custom theme built on a pre-v12.1 standard theme, you will need to manually copy your TMF code into the new custom theme's TMF. This also applies to any new, non-standard style classes you may have added to the custom theme's CSS file.

 

Using the Theme Editor

The Theme Editor provides a series of controls that let you configure your custom theme:
 

The Theme Editor wizard interface in Logi Studio is shown above and it includes:

  • Styling Categories presented as expandable sections, on the left.
  • A Preview panel that immediately shows the effects of any changes, on the right.
     

When the Theme Editor element is used, the categories and preview appear on the report page rather than in a dialog box and there are no Cancel, Previous, or Next buttons. The element can be configured so that a Save button is displayed, or it can be configured to automatically save each change as it's made.  

In the image above, the Buttons and Tabs category has been expanded and the controls are visible. Color controls allow you to enter a color by name, as a decimal RGB value, or as a hex RGB value preceded by a pound sign, e.g. #112233. The currently-selected color is shown by the small square (circled above) next to the Color Picker icon.  

You can also click the Color Picker icon to open a pop-up panel with a palette of color selections, shown above. Once you've made all desired changes, click the Next button (or, when using the Theme Editor element, click Save - unless auto-save mode has been enabled, as mentioned earlier). You can click the Cancel button to abandon any unsaved changes.

 

Editor Items vs. Theme Classes

Most of the items in the Theme Editor are easily correlated to the elements and classes in your report definition. The following table helps you correlate other items you see in the editor to the actual Theme class names you'll see in Logi Studio when selecting values for an element's Class attribute.
 

Theme Editor ItemElement "Class" Attribute Option
CB Border Color ThemeContainerBordered
CS Background Color + CS Font Color ThemeContainerShaded
CSB Background Color + CSB Font Color ThemeContainerShadedAndBordered
Error Text Font Color + Error Text Background Color + Error Text Border Color ThemeErrorText
Heading 1 ThemeHeaderLargest
Heading 2 ThemeHeaderLarger
Heading 3 ThemeHeaderLarge
Heading 4 ThemeHeader
Heading 5 ThemeHeaderSmall
Heading 6 ThemeHeaderSmaller
Heading 7 ThemeHeaderSmallest
Text Negative Font Color ThemeTextNegative
Text Positive Font Color ThemeTextPositive


Also, note that, under the editor's Buttons and Tabs category, in the Tabs section, the Container Font Color and Container Background Color items refer to the tabs that can be seen in super-elements, such as the Analysis Grid and the Dashboard. They do not refer to the stand-alone Tabs and Tab Panel elements.

 

Share Your Custom Themes

Have you created a cool custom theme? Would you like to share it with other Logi Info developers? Zip your custom theme folder and email it as an attachment to DevNet@LogiAnalytics.com and we'll add it to the Samples section on DevNet and give you proper credit. When you submit a custom theme to DevNet, you agree that it is freely made available to other developers without any restrictions or attribution requirements. Submissions are covered by the DevNet Terms of Use.