Overview

Stylesheets allow you to modify the appearance of your applications, such as the formatting, colors, and padding, using Cascading Style Sheets (CSS) selectors and properties.

You can choose from a range of pre-built style templates (courtesy of Bootswatch and slightly modified to adapt to the standard Designer style).

Alternatively, you can defined your whole CSS from scratch, or utilize one of the existing themes to get started but make your own modifications to match your desired aesthetic.

Style Templates

Selecting a style template from the Style Template input will pull the selected style into the Stylesheet editor, where it can be modified or augmented with your own CSS.

Upon pressing Update, your chosen stylesheet will be applied and visible from the Preview application action. Upon publishing your application, the stylesheet will go live into the production version of your application.

Stylesheet Name

The Name property of your stylesheet is purely information, in order to help you identify and distinguish between stylesheets in the future.

Creating Stylesheets

The Designer stylesheet CSS editor is comparable to generating CSS for utilization in any web application. All CSS properties and selectors are valid for utilization in your stylesheet. For more information and tutorials regarding the creation of stylesheets, please visit the w3schools website.

Selecting Designer Elements

In order to identify the elements of your application that you would like to modify, you will need to review the HTML source for the page. A couple of helpful selectors are identified below and a more extensive guide on Designer-oriented selectors will be available upon full release.

• .pagos-control-base will select the container around all controls within the application.
• div[data-control-type='Textbox'] will select the container around all textboxes within the application.
• div[data-control-id='1'] will select the specific container corresponding with control ID 1 within the application.
• input[type='text'] will select all textboxes within the application.
• .splash will select all splash screens within the application (i.e. both partial and full).
• .splash-mini or .splash-full will select just the specific splash screen within the application.
• .color-line will select the colorful line at the top of the application and the splash screens.
• #header will select the entire top navigation element.
• #navigation will select the entire left-hand navigation element.
• #wrapper will select the entire body of the page (e.g. for setting background color/image, or adding padding to the document).