> For the complete documentation index, see [llms.txt](https://docs.amltd.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.amltd.com/dc-works/applets/styles-and-appearance.md).

# Styles and Appearance

A consistent visual design makes an Applet easier to understand and use. DC Works provides three levels of appearance configuration:

1. **Preset styles** establish the overall appearance of the Applet.
2. **Page properties** control the layout and background of an individual page.
3. **Field properties** control the position, size, color, font, border, and alignment of individual fields.

Page and field properties can override the appearance established by the Applet’s preset style.

### Apply a preset style

The **Styles** menu contains predefined and custom styles that can be applied across the Applet.

Each preset displays four color circles that provide a visual summary of its color palette.

To apply a preset style:

1. Open **Styles** from the Applet Editor Menu.
2. Select the desired style.
3. Select **Apply**.
4. Review the Applet’s pages and fields.
5. Save the Applet.

<figure><img src="/files/53ngxFELevs7rWVwz6NR" alt=""><figcaption></figcaption></figure>

Select a preset and select Apply to establish the Applet’s overall appearance.

{% hint style="info" %}
Applying a preset style establishes the Applet’s overall appearance. Page and field properties can then be adjusted individually, overriding the preset where needed.
{% endhint %}

### Create a preset style

Create a custom preset when an Applet requires a color palette that is not provided by an existing style.

To create a preset style:

1. Open **Styles**.
2. Select **Create New Style**.
3. Enter a descriptive name for the style.
4. Select the colors used by the style.
5. Save the new style.
6. Select the style and select **Apply** to apply it to the Applet.

\[Insert screenshot: Create preset style panel showing its name and color settings]

A preset style defines the colors used by common page and field elements.

The following settings are available:

| Setting             | Controls                                                        |
| ------------------- | --------------------------------------------------------------- |
| **Headers**         | The color used by Header fields.                                |
| **Table Headers**   | The color used by Table View column headers.                    |
| **Buttons**         | The primary color used by Button fields.                        |
| **Borders**         | The color used by field borders.                                |
| **Page Background** | The main page background color.                                 |
| **Fields**          | The background color used by fields.                            |
| **Table Select**    | The color used to identify a selected Table View row.           |
| **Light Text**      | The light text color used where contrast requires lighter text. |
| **Dark Text**       | The dark text color used where contrast requires darker text.   |

Use a descriptive style name that identifies its purpose, customer, project, or color palette.

### Edit or delete a preset style

To edit an existing style:

1. Open **Styles**.
2. Select the style.
3. Select **Edit**.
4. Change its name or color settings.
5. Save the changes.
6. Apply the style to the Applet as needed.

To delete a style:

1. Select the style in the **Styles** menu.
2. Select **Delete**.
3. Confirm the deletion if prompted.

{% hint style="warning" %}
Before deleting a custom style, confirm that it is no longer needed. If the style is currently used by an Applet, review the Applet’s appearance after making the change.
{% endhint %}

### Configure a page’s layout

Page layout properties control how normally positioned fields are arranged within the page.

To open these settings:

1. Select the page from the **Pages** menu.
2. Open the page’s properties.
3. Select **Layout** in the Properties Panel.

<figure><img src="/files/WyZQBCPa3BHAd8BuXYAf" alt=""><figcaption></figcaption></figure>

Use the Layout section to control the general alignment and spacing of fields on the page.

The available page-layout settings include:

* **Item Horizontal Alignment**, which controls the horizontal alignment of fields.
* **Item Vertical Alignment**, which controls the vertical alignment of fields.
* **Apply space between elements**, which distributes available space between the page’s fields.

These settings provide a starting structure for the page. Individual field margins and positioning properties can then be used to refine the layout.

### Configure a page’s background

Use the **Background** section of the page properties to configure the page’s background colors or image.

The available settings include:

* **Main Background**
* **Background Image**
* **Top Background**
* **Bottom Background**

To configure the main background color:

1. Open the page’s properties.
2. Select **Background**.
3. Select the color control under **Main Background**.
4. Choose or enter the desired color.
5. Save the Applet.

<figure><img src="/files/U8cor5POTlYSRngpxXEJ" alt=""><figcaption></figcaption></figure>

Configure the main page background and, when needed, use separate colors for the top and bottom areas.

#### Add a background image

To use an image as the page background:

1. Open the page’s **Background** properties.
2. Select **Upload** beside **Background Image**.
3. Select the image.
4. Review its appearance in the Main Workspace.
5. Save the Applet.

Choose an image that maintains sufficient contrast with the page’s fields and text.

#### Configure top and bottom backgrounds

The **Top Background** and **Bottom Background** settings allow the top and bottom areas of the page to use colors that differ from the main background.

Leave **Same as main** selected when the area should use the **Main Background** color. Clear that selection when a separate color is required.

Separate background colors can help distinguish headers, navigation areas, or other sections of a page.

### Position fields

Each field includes a **Position** section in the Properties Panel. The available settings depend on the field’s selected **Position Type**.

| Position type   | Purpose                                                                      |
| --------------- | ---------------------------------------------------------------------------- |
| **Normal**      | Places the field in the page’s standard field sequence.                      |
| **Float**       | Positions the field independently using horizontal and vertical coordinates. |
| **Dock Top**    | Places the field in the area docked to the top of the page.                  |
| **Dock Bottom** | Places the field in the area docked to the bottom of the page.               |

Select a position type based on how the field should behave within the page layout.

#### Use normal positioning

**Normal** positioning places the field within the page’s standard sequence.

Normal-positioned fields use the page’s alignment settings and can be adjusted using:

* **Field Order**
* **Vertical Alignment**
* **Margin Top**
* **Margin Bottom**
* **Margin Left**
* **Margin Right**
* **Layer Index**

<figure><img src="/files/PFp3O9Y8JX3kTqDxGmBW" alt=""><figcaption></figcaption></figure>

Use Field Order and margins to arrange fields placed in the normal page layout.

**Field Order** determines where the field appears relative to other fields in the same positioning group. Margins add space around the field and help separate it from nearby content.

#### Dock a field

Use **Dock Top** or **Dock Bottom** when a field should remain in the page’s top or bottom layout area.

Docking is useful for elements such as:

* Page headers.
* Status information.
* Navigation controls.
* Buttons that should remain at the bottom of the layout.

After selecting a docking option, use the available order, alignment, and margin settings to arrange the field within that area.

<figure><img src="/files/HfX3D8eiUQn9RCkQuxLx" alt=""><figcaption></figcaption></figure>

Select Dock Top or Dock Bottom to place a field in the corresponding page area.

#### Float a field

Use **Float** when the field must be positioned independently of the page’s normal field sequence.

Floating-field settings include:

* **X-Position (%)**
* **Horizontal Alignment**
* **Y-Position (%)**
* **Vertical Alignment**
* **Layer Index**

To float a field:

1. Select the field.
2. Open **Position** in the Properties Panel.
3. Set **Position Type** to **Float**.
4. Enter the desired horizontal and vertical positions.
5. Select the appropriate alignment options.
6. Review the field’s location in the Main Workspace.

<figure><img src="/files/CFDZrHvimmPhiwwUgg6J" alt=""><figcaption></figcaption></figure>

Floating fields use percentage-based coordinates to establish their location on the page.

{% hint style="info" %}
Normal and docked positioning are generally easier to maintain when page dimensions change. Use floating fields when an element requires a specific location or must overlap other page content.
{% endhint %}

#### Use margins

Margins control the amount of space surrounding a field:

* **Margin Top** adds space above the field.
* **Margin Bottom** adds space below the field.
* **Margin Left** adds space to the field’s left.
* **Margin Right** adds space to the field’s right.

Margins can be entered directly or adjusted using the available controls.

Use consistent margins to create even spacing between related fields.

#### Set the layer order

**Layer Index** determines how fields are stacked when they overlap.

This setting is particularly useful for floating fields, background elements, images, and fields that appear above other content.

Review overlapping fields in the Main Workspace after changing their layer order.

### Size a field

Use the field’s **Size** properties to control its width and height.

The available settings include:

* **Fixed Width**
* **Width**
* **Fixed Height**
* **Height**

Dimensions can be set in percentages of pixels.

Use fixed dimensions for elements that require a specific size and percentage-based dimensions for layouts that must adapt to the available page space.

For example:

* A Button may use a fixed width and height.
* An Input field may use a percentage-based width.
* A Table View may expand to occupy most of the page’s available space.

{% hint style="info" %}
Preview percentage-based fields at the intended device dimensions. A field that fits at one width may appear differently on a device or Web App with another screen size.
{% endhint %}

### Configure field fonts

Select **Font** in the field properties to configure the field’s text appearance.

The available options depend on the selected field type. Use these settings to establish readable text and a clear visual hierarchy.

For example:

* Use larger or more prominent text for page headings.
* Use consistent text settings for labels and input fields.
* Ensure Button text is clearly legible.
* Avoid using too many different text styles on the same page.

Use consistent font settings to distinguish headings, labels, values, and controls.

### Configure field colors

Select **Color** in the field properties to configure the field’s text and background colors.

Available settings may include:

* **Text Color**
* **Transparent Background**
* **Background Color**

Enable **Transparent Background** when the page background should remain visible behind the field. Otherwise, select a background color that provides sufficient contrast with its text.

Field-level color settings override the corresponding appearance established by the applied preset style.

### Configure field borders

Select **Border** in the field properties to configure the field’s border.

Available settings include:

* **Border Color**
* **Border Thickness**
* **Border Style**
* **Border Radius**

**Border Radius** controls the rounding of the field’s corners. A small radius produces slightly rounded corners, while a larger value produces a more rounded appearance.

Use consistent borders to visually group related controls and distinguish interactive fields from surrounding page content.

### Configure text alignment

Select **Text Alignment** to control how text is positioned within the field.

Alignment settings may vary by field type. Review the result in the Main Workspace to ensure that labels, values, and Button text are positioned consistently.

### Override a preset style

After applying a preset, page and field properties can be changed independently.

For example, you can:

* Apply a preset to establish the Applet’s overall palette.
* Assign a different background to one page.
* Change one Button to emphasize an important action.
* Give a selected Input field a different border.
* Adjust the size or position of individual fields without changing other pages.

The field-level change overrides the preset appearance for that field.

A practical styling workflow is:

1. Apply an Applet-wide preset style.
2. Configure each page’s layout and background.
3. Arrange and size the fields.
4. Apply individual field overrides where needed.
5. Preview the Applet at its intended screen dimensions.
6. Save and test the Applet.

### Design an effective Applet interface

When styling an Applet:

* Use a consistent color palette.
* Maintain sufficient contrast between text and backgrounds.
* Use prominent styling for primary actions.
* Keep field spacing consistent.
* Align related fields.
* Avoid unnecessary overlapping elements.
* Use fixed dimensions selectively.
* Preview the design at the dimensions of its intended device or Web App.
* Keep pages focused on a clear task.

The appearance of an Applet should help users understand what information is being displayed, what input is required, and which action they should take next.

### Save and test appearance changes

Save the Applet after applying a preset or changing its page and field properties.

Test the Applet on its intended device or as a Web App. Confirm that:

* Text is readable.
* Fields fit within the available screen.
* Interactive controls are easy to identify and select.
* Floating fields appear in the intended location.
* Docked fields appear in the correct page area.
* Background colors and images do not obscure content.
* The layout remains clear at the intended screen dimensions.

### Next

After configuring the Applet’s appearance, save your changes and test its pages, fields, actions, and data interactions.

Continue to **Saving, Testing, and Publishing** to learn how to verify that an Applet is ready for use and prepare it for inclusion in a Suite.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.amltd.com/dc-works/applets/styles-and-appearance.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.