Style Administration

Overview

Unqork's Style Team can style an environment with Custom CSS. CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. is a style sheet language used to customize the look and feel of a website's content. So, while HTML creates the structure of a website, CSS applies to the font, text color, alignment, and all things style-related.

Styling takes place during Staging, and each style theme has a name. At some point, you might want to change your active style or promote a style to another environment level. You'll do this using Style Administration.

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, see our CSS Upload article.

What You'll Learn

In this article, you'll learn how to locate and change your default styles, as well as create, edit, promote, and delete styles.

Finding Your Default Style

Your application starts with 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 there is always one style that is used as the default.

To find the default style in your environment:

1. At the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration. This page lists all the available styles in your environment.
4. From the grid, you can see the Default style for your environment.

A static image displaying the environment's default style.

You can also view your active style in Environment Administration. Once there, under General, you'll find your active Environment Style.

Changing Your Default Style

You might want to change the default style of your environment. With Style Administration, you can easily switch the default to another style option.

To change the default style:

1. At the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style you want to make the default.
5. From the Manage ▾ drop-down, select Set as Default.

A static image displaying how to change the default style.

Create a Style

While your environment comes with pre-built 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 of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. In the top-right corner, click + Create New.
5. In the Name field, enter a name for your style. This is a required field.
6. In the Description field, enter an optional style description.
7. From the Base Style drop-down, select a style from your environment to base your new style on.
8. In the Stylesheet field, drag and drop a stylesheet from your computer. Or, browse your computer for a stylesheet. This is a required field.
9. Select the Set as Default Style checkbox if you want to make this style the default.

A static image displaying how to create a style.

10. Click Create.

To learn more about creating styles, see our CSS Upload article.

Editing a Created Style

Style Administration also lets you edit descriptions, change base styles, and upload or remove stylesheets in your created styles.

Style promotions and updates are not instantaneous. You might experience a delay before changes go into effect.

To edit a style:

1. At the top right ofthe Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style where you want to add a description.
5. From the Manage ▾ drop-down, select Edit.

A static image displaying how to edit a style.

Style Details

By default, you arrive on the Style Details page. Here you can add a style description, select a new base style, and add or remove stylesheets. Once you're finished, click Save.

Along with the ability to edit styles on this page, the Manage ▾ drop-down in the top-right corner let's promote this style, view its promotion history, download the style's stylesheet, set it as the default style, or delete it.

You can't edit the Style Name after the style has been created.

A static image displaying the Style Details page.

Style Assets

You can also add assets to your style. To the left of the Style Details page, click Style Assets. Here you can upload assets from your computer by clicking Upload or the A static image displaying the upload asset icon. icon. You can also click the A static image displaying the create folder icon. icon to create folders to better organize your assets.

By default, you can not 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.

To learn more about managing assets, see our CSS Upload article.

Previewing Your Application Style

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

For more information on navigating an application, visit our Navigating an Application article.

To preview your application from the workspace page:

1. Open your workspace.
2. In the  Applications tab, click Inline image of an ellipsis icon. (ellipsis) on the application tile you want to preview. The application settings menu displays.

Image showing the Application Settings menu open on the workspaces page.

3. Select Preview to preview your application in Express View Express View is how your end-user views you 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..

To preview your application from the application page:

These instructions assume you have already created an application in your workspace.

1. Open the application you want to preview.
2. Click Manage ▾.
3. Select Preview to preview your application in Express View.

Image showing the Application Settings menu open on the application page.

You can also view an application preview in Express View using the following application URL path: https://www.{your-environment}unqork.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}.

For example, an application named application-settings was created in the training environment. The moduleId of the application is 6517325819f7fec671368ff4 and has no submissionId. So, the Express View preview of this application uses the following URL: https://trainingx.unqork.io/app/application-settings#/display/6517325819f7fec671368ff4.

Promoting a Style

When promoting your applications from one environment to another, you must also promote your styles. But, 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.

Style promotions and updates are not instantaneous. You might experience a delay before changes go into effect.

Environments in Unqork support each phase of building and rendering applications. Generally, there are three environments for each production customer:

Environment Stage

Description

Code-base

Client Staging

The Staging environment stage (sometimes called the Dev stage) is where Unqork creators do most of their critical work. This is where creators build applications, modules, API calls, and more. Client Staging is a non-production environment that hosts test content only. Features and bug fixes get released to Client Staging at the end of a sprint cycle (every two weeks).

We host Staging internally at Unqork. Staging offers both a Designer and Express View interface.

Staging

UAT (User Acceptance Testing)

The UAT environment stage is where both Unqork and the client can view the latest build. This non-production environment hosts test content only, including checking API responses and setting up unit tests.

As with Staging, we host UAT internally at Unqork. UAT offers both a Designer and Express View interface.

UAT

Production

This environment stage is the live application, the only environment that end-users can access. It is also the only environment stage to host live client data.

Production

Some applications move through up to five environment stages. The two additional stages include dedicated QA (Quality Assurance) and Pre-production environments. QA environment stages use the UAT code-base. Pre-production environment stages use the Production code-base.

To promote a style:

1. At the top right of the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style that you want to promote.
5. From the Manage ▾ drop-down, select Promote.

A static image displaying how to promote a style.

6. From the Environment drop-down, select the environment where you want to promote your style.

A static image displaying how to select an environment to promote to.

7. Click Promote.

Promotion History

After promoting a style to another environment, you can view the promotion history. Promotion History provides the information like the user that 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. At the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style that you want to promote.
5. From the Manage ▾ drop-down, select Promotion History.

A static image displaying how to view the promotion history.

6. A modal displays with the user's email address, timestamp of promotion, and where the style was promoted.

A static image displaying the style's promotion history.

7. After viewing Promotion History, click A static image displaying the close modal icon..

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. At the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style that you want to download.
5. From the Manage ▾ drop-down, select Download.

A static image displaying how to download a stylesheet.

Deleting a Style

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

To delete a style:

1. At the top right of the Unqork Designer Platform, click Settings.
2. Click Administration.
3. Under Environment, click Style Administration.
4. Find the style that you want to promote.
5. From the Manage ▾ drop-down, select Delete.

A static image displaying how to delete a style.

6. A modal displays to confirm deletion. Enter the exact name of the style to successfully delete it.

A static image displaying how to confirm deletion of the style.

7. Click Delete.