Table of Contents
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.
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.
The Name property of your stylesheet is purely information, in order to help you identify and distinguish between stylesheets in the future.
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-basewill 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.
.splashwill select all splash screens within the application (i.e. both partial and full).
.splash-fullwill select just the specific splash screen within the application.
.color-linewill select the colorful line at the top of the application and the splash screens.
#headerwill select the entire top navigation element.
#navigationwill select the entire left-hand navigation element.
#wrapperwill select the entire body of the page (e.g. for setting background color/image, or adding padding to the document).