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
- Using the Theme Editor
- Editor Items vs. Theme Classes
- Share Your Custom Themes
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.
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.
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 Item||Element "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|
|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.