CSS

Apps use CSS for styling, and all controls have a default appearance. Alongside the toolbar’s font controls, etc., use the CSS Editor tab within Scripting to add or modify CSS. Click to open Scripting. CSS Editor supports all current CSS web standards.

Examples

This piece of CSS gives you a CSS class called keyField that applies a red border at runtime. It could be applied to Textbox controls using their CSS Class property.

#widget-designer .keyField {
  Border: 2px solid red; }

This next block of CSS affects all buttons on mouse over and all buttons and input fields on focus.

#widget-designer button:hover {
  border: 1px solid #CACACA; }
#widget-designer button:focus {
  outline: 0;
  border-color: #0099CC;
  box-shadow: 0 0 5px 0 #0099CC; }
#widget-designer input:focus {
  outline: 0;
  border-color:#0099CC;
  box-shadow: 0 0 5px 0 #0099CC; }

This piece of CSS sets the App's background color:

body {
  background: #f7f7f7; }

For a Label control called GoldUser, this piece of CSS makes its icon (.fa-user) gold:

#widget-designer #GoldUser .fa-user { color: #FFD700; }

The CSS Class property

All controls have a CSS Class property. By default, it is unset, meaning that the default styling is used. If it does include the name of a class, it means it has been explicitly set in the CSS.

#widget-designer

#widget-designer is a reference that precedes CSS for named controls, control styling or CSS class definitions for use with controls. Its use can be seen in the examples above. Most CSS in the available Apps, such as Warehouse App, is related to such items, so you will see #widget-designer used throughout.

Test CSS

As CSS often can't be shown on the Designer canvas (e.g., hover or focus); use to test.