Skip to main content

Developing an Application

 

OutSystems

Change the Look of Widgets with Styles Editor

Styles Editor is a panel for editing basic visual properties of widgets. Use it to change, for example, font color, margins or border thickness. In the Interface tab, open a screen or block, select a widget and click the Styles Editor toggle button in the Properties Pane. Styles Editor panel is also available in Style Sheet Editor, where you can use the editor to modify the saved styles.

To style the widget use the options in Font, Layout and Borders. Here is an overview of what you can change by using Styles Editor:

Font
Style (bold, italic, underline), size and color.
Layout
Width, height, alignment (left, center, right) and the background color. Margins and padding.
Borders
Thickness and color of the borders. Roundness of corners.

Margins and Borders have icons to indicate how edits are applied to the widget.

Icon Meaning
The value is applied to all other values
All related properties are editable individually
Style cannot be edited in Styles Editor within the current widget

All changes are applied to the current widget only.

If you want to use the same style on other widgets, save the style as a set of properties (a class). Then, add classes to widgets you want to style in their Style Classes section of the Styles Editor.

When the widget already has a style of a higher importance than the style you are creating, that style element is not editable. For example, you may not be able to change a color of the button in Styles Editor if the button uses the primary color, which is defined at the module level.

The expandable section Styles Properties Applied lists all styles applied to the widget, regardless of where the styles are defined. Click a style to open Style Sheet Editor at the style definition.

To use Styles Editor, you need a module with a theme and a widget that permits editing of style (a widget that is not a block or a placeholder, or locked for edits because it is part of a dependency). You can edit CSS directly in the module Theme for greater control of the visual elements.

Examples of use

Here are some examples of how you can use Styles Editor to change widgets look, save styles and apply them to other widgets in the application.

Change style of a widget

  1. Drag a widget to a (Web) Screen.
  2. In the Properties Pane click the toggle button.
  3. In Font section edit text properties, for elements that contain text.
  4. Use Color fields to open the color picker and set the color of a property.
  5. Change width, height, alignment in Layout.
  6. Adjust outer and inner spacing in Layout/Margin and Layout/Padding.
  7. Add borders in the Borders section and adjust the roundness.

Save a style

  1. Edit a widget in Styles Editor.
  2. In the section Style Classes (or Styles Properties Applied) click Save changes to reusable class.
  3. In the dialogue that opens, enter a name for the class (for example, myStyle). The class groups all the elements of style.
  4. In the Style Sheet Editor window that opens, press OK.

Apply a saved style

  1. Click the widget which you want to style.
  2. In the Style Classes section click the pencil icon.
  3. Add your style class to the style list, separating it by a space. For example: BaseStyle1 BaseStyle2 myStyle.

Edit a saved style

  1. Click a widget that has the style you want to edit.
  2. In the Style Classes section (or in Style Properties Applied) click the name of the style, for example myStyle.
  3. In the window that opens, edit the properties in the embedded Styles Editor.
  4. Click OK when you finish editing.
  • Was this article helpful?