---
title: "Style Administration"
slug: "style-administration"
updated: 2025-09-26T02:08:04Z
published: 2025-09-26T02:08:04Z
canonical: "docs.unqork.io/style-administration"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Style Administration

Administrators use the **Style Administration** page to create, edit, preview, download, delete, and specify the default CSS **style sheet** for an Unqork [application](/v1/docs/introduction-to-unqork-applications).

> [!TIP]
> Unqork's Style Team can style your environment with custom CSS. Please contact your Unqork representative for more information.

> This article is a brief description of the features you find in Style Administration. For more detail on creating styles, uploading stylesheets, managing assets, and promoting styles, view our [CSS Upload](/v1/docs/style-administration-css-upload) article.

## Access the Style Administration Page

1. At the top right of the Unqork Designer Platform homepage, click **Administration**.
2. Under Environment, click **Style Administration**. The Style Administration page displays.

[![A static image displaying the Styles Administration page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/stylesAdminPage_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/stylesAdminPage.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Modifying Styles

Click on the tabs below to learn more about modifying styles on the Style Administration page:

Default StyleCreateEditPreviewPromoteDownloadDelete

## Finding Your Default Style

Your application includes a few default styles and at least one custom style option. You can have as many styles as you want. Each time Unqork adds a new style to your environment, it displays in the Style Administration. You can select any style when viewing your application in Express View, but only one style can be the default.

From the grid, you can see the **DEFAULT** style for your environment:

[![A static image displaying the environment's default style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/defaultStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/defaultStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

> [!TIP]
> You can also view your active style in the [Environment Administration](/v1/docs/environment-administration) page. Once there, under **General**, you'll find your active **Environment Style**.

## Changing Your Default Style

With Style Administration, you can easily set another style as the default.

To change the default style:

1. In the styles list, navigate to the style you want to set as default.
2. From the style's **Manage** ▾ drop-down, select **Set as Default**. The **DEFAULT** icon displays next to the name of the style.

[![A static image displaying how to change the default style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/setDefaultStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/setDefaultStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Create a Style

While your environment comes with prebuilt Unqork styles, you can also create your own. Style Administration lets you select a base style from your environment and upload your own stylesheet.

To create a style:

1. At the top-right corner of the Styles Administration page, click **+ Create New**.
2. In the **Name** field, enter a name for your style. This is a required field.
3. In the **Description** field, enter an optional style description.
4. From the **Base Style** drop-down, select a style from your environment to base your new style on.
5. In the **Stylesheet** field, drag and drop a stylesheet from your computer. Or, browse your computer for a stylesheet. This is a required field.
6. Select **Set as Default Style** if you want to make this style the default.
7. Click **Create**.

> To learn more about creating styles, view our [CSS Upload](/v1/docs/style-administration-css-upload) article.

## Editing a Style

> [!WARNING]
> Style promotions and updates are not instantaneous. You might experience a delay before changes go into effect.

To edit a style:

1. In the styles list, navigate to a style.
2. From the **Manage** ▾ drop-down, select **Edit**. The **Styles Details** page displays.

[![A static image displaying how to edit a style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/editStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/editStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Style Details Page

The **Style Details** page lets you add a description, select a new base style, and add or remove stylesheets. Once you're finished, click **Save**.

[![A static image displaying the Style Details page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/styleDetails_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/styleDetails.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

The **Manage** ▾ drop-down in the top-right corner also lets you promote this style, view its promotion history, download the style's stylesheet, set it as the default style, or delete it.

> [!NOTE]
> You cannot edit the Style Name after the style has been created.

### Style Assets Page

The Style Assets page lets you upload assets from your computer by clicking Upload or the ![A static image displaying the upload asset icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin_PlusIcon.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(plus)** icon. You can also click the ![A static image displaying the create folder icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin_FolderIcon.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(folder)** icon to create folders to better organize your assets.

> [!WARNING]
> By default, you cannot add or edit assets to predefined Unqork style. Unqork styles are designated by an `Unqork` tag on the Style Administration page.

[![A static image displaying the Style Assets page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/styleAssets_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/styleAssets.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

One of the best use cases for using Style Assets is adding a company favicon that displays on your browser tabs.

1. Click the ![A static image displaying the create folder icon.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin_FolderIcon.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(folder)** icon and name it **images**.

> [!WARNING]
> Ensure the folder name is lowercase or the icon will not work correctly.
2. Click **Create**.
3. In the **Images** folder, upload your `favicon.ico` asset.

> To learn more about managing assets, view our [CSS Upload](/v1/docs/style-administration-css-upload) article.

## Previewing Your Application Style

Once you create an application style, you can preview it from your workspace or application page. These instructions assume you've already created an application in your workspace.

> For more information on navigating an application, view our [Navigating an Application](/v1/docs/navigating-an-application) article.

### Preview an Application From the Workspace Page

To preview your application from the workspace page:

1. In the applications list, navigate to the application you want to preview.
2. Under the **Actions** column, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(33).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**ellipsis**) button.
3. Select **Preview**.

[![Image showing the Application Settings menu open on the workspaces page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/worksapcePreviewApp_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/worksapcePreviewApp.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Preview an Application From The Application Page

To preview your application from the application page:

1. Click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(33).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**ellipsis**) button.
2. Select **Preview**.

[![Image showing the Application Settings menu open on the application page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/applicationPreview_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/applicationPreview.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Promoting a Style

When promoting your applications from one environment to another, you must also promote your styles. Be mindful when promoting an application and its styles. Unqork shares styles across applications. Consider how promoting your style might affect other applications in your target environment.

> [!WARNING]
> Style promotions and updates are not instantaneous. You might experience a delay before changes go into effect.

Below is a list of Unqork's available environment levels, their order in the environment sequence, and descriptions of each:

| # | Environment Level | Description | Codebase |
| --- | --- | --- | --- |
| 1 | Staging | Where Unqork Creators configure applications. This non-production environment level is meant for test data only. This level is where you create and update configurations before promoting to QA for testing. Staging is an internal environment level and part of Unqork's cloud infrastructure. Staging offers both a Designer and Express View interface. > [!WARNING] > This non-production environment level hosts test data only. | Staging |
| 2 | Quality Assurance (QA) | Where Unqork Creators test and verify processes, artifacts, and ensure applications are built using best practices. QA is an internal environment level and part of Unqork's cloud infrastructure. QA offers both a Designer and Express View interface. > [!WARNING] > This non-production environment level hosts test data only. | QA |
| 3 | User Acceptance Testing (UAT) | Where the Creators and end-users can view the latest build. Use this environment level to test your application's end-user experience. This non-production environment hosts test data only. UAT is an internal environment level and part of Unqork's cloud infrastructure. UAT offers both a Designer and Express View interface. > [!WARNING] > This non-production environment level hosts test data only | UAT |
| 4 | Production | This is the live application and the only environment level where end-users can access it. This level is also the only environment level to store live client data. > [!WARNING] > Following SDLC best practices, development should never take place in Production. | Production |

> [!NOTE]
> Additional environments can also include Pre-Production (Pre-Prod) environment levels. Pre-Prod environments use the Production codebase. The progression order is Staging, QA**,** UAT, Pre-prod, and Production. Client leads decide the number of environments to use when developing a customer application.

To promote a style:

1. In the styles list, navigate to the style you want to promote.
2. From the **Manage** ▾ drop-down, select **Promote**. The Promote Style modal displays.

[![A static image displaying how to promote a style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/promoteStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/promoteStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
3. From the **Environment** drop-down, enter or select the environment where you want to promote your style.

[![A static image displaying how to select an environment to promote to.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin_PromoteEnv_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin%20PromoteEnv.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
4. Click **Promote**.

### Promotion History

After promoting a style to another environment, you can view the promotion history. Promotion History provides information like the user who promoted the style, the date and time of promotion, and the environment level where it was promoted.

To view the Promotion History for a style:

1. In the styles list, navigate to the style where you want to view the Promotion History.
2. From the Manage ▾ drop-down, select **Promotion History**.

[![A static image displaying how to view the promotion history.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/promotionHistory_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/promotionHistory.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
3. A **modal** displays the user's email address, the timestamp of the promotion, and where the style was promoted.

[![A static image displaying the style's promotion history.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin_PromotionHistory_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleAdmin%20PromotionHistory%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
4. After viewing the Promotion History, click **x**.

## Downloading a Stylesheet

Style Administration lets you download the stylesheet of a specific style to your computer. The stylesheet automatically downloads to your computer's Downloads folder.

To download a stylesheet:

1. In the styles list, navigate to the style you want to download.
2. From the **Manage** ▾ drop-down, select **Download**.

[![A static image displaying how to download a stylesheet.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/downloadStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/downloadStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Deleting a Style

As you create and modify styles, you might need to delete obsolete ones from your environment.

To delete a style:

1. In the styles list, navigate to the style you want to delete.
2. From the **Manage** ▾ drop-down, select **Delete**.

[![A static image displaying how to delete a style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/deleteStyle_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/deleteStyle.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
3. A modal displays to confirm deletion. Enter the exact name of the style.

[![A static image displaying how to confirm deletion of the style.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/deleteModal_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/deleteModal.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
4. Click **Delete**.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The Production environment is the final stage of the development process. Use this environment to promote tested and functioning application so your end-user can interact with it.

Use your QA (quality assurance) environment to test applications to ensure reliability, security, and functionality before releasing them to the end-user.

Use the UAT (user acceptance testing) environment to realistically test and navigate your applications as end-users would use them.

A modal is a window that appears on top of the content you are currently viewing.