A Theme contains the details for visual presentation and changing a Theme changes how your app looks. A module has a default theme, and all UI Flows an Screens inherit it.
Set the default module Theme, if you have several Themes in your module.
Create a blank Theme without any styles, so elements use only the CSS you create.
Create a new Theme based on the default Theme, if you want add styles to the existing Theme.
The default OutSystems Themes are part of the OutSystems UI framework. OutSystems optimized the built-in Themes for performance and to work well with scaffolding and Screen Templates.
Setting the default module Theme
If you have more than one Theme in your module, you can change the default module Theme. Follow these steps in Service Studio:
Go to the Interface tab and select the module name at the top of the pane. The module properties show.
In the module properties locate the Defaults section.
In the Default Theme list select your Theme.
Creating a Theme without styles
It's possible to create a Theme without any styles. Follow these steps in Service Studio:
Go to the Interface tab.
Right-click the Themes folder, then select Add Theme. New Theme appears in the Themes folder.
In the Base Theme property list of the new Theme select (None).
Optionally, go to Interface > UI Flows, select a UI Flow and in the properties select you blank Theme Theme list. This makes all elements under the UI Flow to use the blank Theme.
Creating a Theme from a Base Theme
When you create a new app it already contains a copy of the CSS which you can edit. You can create new, additional, themes manually.
- In the Interface tab right-click Themes and select Add Theme.
- Enter the name of your new theme.
- Optionally, change the Base Theme. If you do not see the Theme you want in the list, add a reference to it.
- With your Theme selected in the properties, click on Style Sheet.
- Enter your styles in the first tab of the CSS editor. You can't edit the original Theme, but you can create new styles with the same class names and override the original styles.
The structure of a OutSystems UI Theme
The Themes in the OutSystems UI framework follow a structure based on the Screen requirements of an OutSystems app. Each Theme includes several Blocks and each Block consists of one or more Placeholders.
The following diagram shows how a new Theme inherits the layout from the base Theme, and how the platform uses the Blocks and Placeholders to generate a page. The main layout has Placeholders whose content are Blocks (the Header placeholder is replaced by the content generated in the Header block). The CSS is also inherited from the base Theme, but can be overridden by the application CSS.
Different types of Screen require different Blocks. The following table specifies the required Blocks for the different type of Screens in web applications:
|Type of Screen||Web Block|
|Layout||Info Balloon||Pop-up Editor||Header||Menu||Footer|
The table can be interpreted like this:
- When creating or editing a blank screen in a web application, there should be web blocks for the layout, header, menu and footer, or
- When creating or editing an Email web application, there is only one block required.
The main content of the screens is placed in the block named Layout. Depending on the platform for which the Theme is developed, the layout can consist of different placeholders. For example, the layout in web application must have a placeholder that shows content (MainContent), but the breadcrumbs placeholder is optional.
This is the list of reserved names for the Layout placeholders in the web Themes.
A mobile Theme can have these placeholders in the layout block:
What placeholders to use depends on the type of screen. Here is an overview for the web applications:
|Type of Screen / Placeholder||Title||MainContent||Actions||Header||Menu||Footer|
- If, in the Theme properties, a web application has a web block assigned for Blank Screen, the only required placeholder for that web block is MainContent, or
- If, in the Theme properties, a web application has a web block assigned for Email, the only required placeholder for that web block is MainContent, while Title is optional.
Menu items in web can be created automatically by drag and drop. If you want to keep the same functionality in your Themes, create a menu web block with the required input parameters and the entities. Refer to the existing Themes for input parameters and entities.
Here is an example of blocks for a web Theme and their placeholders: