Style Administration: CSS Upload

Estimated Reading Time:  12 minutes

Overview

Your application design goes beyond pretty colors. The styles you choose are the key to a memorable, user-friendly journey. After creating your design in CSS (cascading style sheets), you'll upload the file using CSS Upload. CSS is a style sheet language used to customize the look and feel of a website. While HTML provides a website's structure, CSS applies all things style-related.

You might be familiar with the Content component if you worked with CSS in Unqork before. This is where you write the selectors and targets for each module in your application.

With CSS Upload, you have more control over your branding and custom designs. Here are a few reasons you might use CSS Upload:

  • Apply your design without boundaries: Your uploaded CSS is available to all the applications in your environment. This is easier than keeping track of multiple Content Components across your environment.

  • Control is in your hands: Does your brand’s primary color need to switch from blue to green? In a matter of minutes, you can change your CSS file and reupload it. Your changes automatically cascade throughout your application.

What You'll Learn

In this article, you'll learn how to:

Adding a New Style

A valid .CSS file and its assets (which you'll learn about later) make up a style. To create a new style, you'll first upload your CSS in the Create Style pop-up modal. Then, you'll complete additional details.

Setting

Description

Style Name

Enter a name for your new style. Choose something that helps you and your team quickly locate your style. It doesn't have to be the same name as your .CSS file.

Description

Enter notes about your stylesheet. Everyone with access to your environment can see these notes. You can edit the description in the future to add change notes or link to other documents. This field is optional.

Stylesheet

This is where you upload your stylesheet. The uploader only accepts files with the .CSS extension.

Set As Default style

Select this checkbox to make this your default style. The default style displays when you preview your application. By selecting this box, your new style is active throughout your environment. It overrides the current default if there is one.

By default, this checkbox is clear.

To add a new style to your environment:

1. Above the Styles Admin table, click Create New.

2. On the Create Style pop-up modal, upload your stylesheet and configure your settings.
3. Click Create.

NOTE  On the Styles Admin page, existing styles are denoted by the Unqork badge. New styles you create do not display the Unqork badge.

Editing a Style

On the Style Details page, you can revisit and make changes to your style. It has similar features to the Create New pop-up modal, and lets you:

  • Edit the Description

  • Download the style’s stylesheet

  • Upload a new stylesheet

NOTE  Uploading a new stylesheet overrides the existing stylesheet.

To edit a style:

1. Find the style that you want to edit.
2. Under the Actions column, open the Manage drop-down.
3. Select Edit.
4. Make changes to the style as needed.
5. Click Save.

Setting an Existing Style as a Base for Other Styles

You can use an existing style as a base to build new or existing styles around. Base styles take an existing style's CSS file and use it as a foundation. The other style's CSS file then applies itself on top of the base style. This allows you to create or prototype new styles without having to start from scratch. A style used as a base displays the BASE badge in the Styles Admin page.

NOTE  If there is a conflict between the base style CSS and the style it is being applied to, the other style overrides the base style's CSS.

To set a base style when you create a new style:

1. At the top right of the Unqork Designer Platform, click the Settings drop-down.
2. Click Administration.
3. Under Environment, select Style Administration.
4. Above the Styles Admin table, click Create New.
5. Fill out the information required for the new style.

NOTE  When creating a new style, you must upload a CSS stylesheet in addition to selecting a base style.

6. Under Base Style, click the drop-down and select an existing style you want to use as a base.

7. Click Create.

To set a base style for an existing style:

NOTE  Existing styles that are assigned a base style cannot be used as a base for other styles.

1. At the top right of the Unqork Designer Platform, click the Settings drop-down.
2. Click Administration.
3. Under Environment, select Style Administration.
4. Find and click the name of the style you want to add a base style to.
5. Under Base Style, click the drop-down and select an existing style you want to use as a base.

6. Click Save.

To temporarily set a base style in Express View:

1. At the top right corner of Express View, click the Preview Style drop-down.
2. Select a style you want to temporarily add a base style to.
3. In the URL bar of your browser, after the style={styleName} text, insert the & symbol followed by baseStyle={baseStyleName}. For example: unqork.io/?style=unqork-v2#/ becomes unqork.io/?style=unqork-v2&baseStyle=baseStyleName#/.
4. Press Enter to refresh the page.

NOTE  This method allows you to rapidly test a combination of styles. Base styles applied through the browser URL are not retained if you navigate away from the Express View page.

Disconnect a Base Style From an Existing Style

If your style no longer requires a base style, you can disconnect it. This removes the base style's CSS from the chosen style.

To disconnect a base style from an existing style:

1. At the top right of the Unqork Designer Platform, click the Settings drop-down.
2. Click Administration.
3. Under Environment, select Style Administration.
4. Find and click the name of the style you want to disconnect the base style from.
5. Under Base Style, to the right side of the drop-down, click the X.

6. Click Save.

NOTE  To delete a style currently in use as a base, you must first disconnect it from all other styles.

Managing Style Assets

Assets are what make up your style. They include documents, web fonts, forms, images, and more! Since your CSS references assets, you'll keep them in the Style Assets section.

The Style Assets page lets you:

  • Create new asset folders

  • Upload new style assets

  • Delete folders and style assets

  • Download an asset

  • Copy an asset file's path

Setting

Description

Title

The name you give your file or folder.

File Size

The size of your file or folder.

Last Modified

Shows the date and time that a file was uploaded, or a folder of files was changed.

Actions

The Manage button allows you to download, copy path, or delete the selected asset.

Upload icon

Opens a file uploader to select the assets you want to add.

Folder icon

Opens a pop-up modal for you to create and name a new folder.

To create a new asset folder:

1. On the Style Assets page, navigate to the right side of the page and click the Folder icon.
2. On the pop-up modal, enter a name for the folder.
3. Click Create.

To upload individual assets:

1. On the Style Assets page, navigate to the right side of the page and click the Upload icon.
2. On the navigation pane, find and select the file.
3. Click the Open button to upload the file.

NOTE  Uploading an asset with an existing file name displays a pop-up modal that asks you to replace the previous file.

To download individual assets:

1. On the Style Assets page, find the file you want to download.
2. To the right of the file, under the Actions column, open the Manage drop-down.
3. Click Download.

To delete a style asset:

1. On the Style Assets page, find the file or folder you want to remove.
2. To the right of the file or folder, under the Actions column, open the Manage drop-down.
3. Click Delete.

Copying and Inserting an Asset's Relative Path

Once you upload an asset to your style, you can copy the relative path of the asset to use in your .CSS file. You can also use asset relative paths in a Content component for your module.

To copy an asset's relative path:

1. On the Style Assets page, find the file you want to copy the relative path of.
2. To the right of the file, under the Actions column, open the Manage drop-down.
3. Click Copy Path.

To insert an asset's relative path into a Content component:

1. On the Module Editor View page, find the Content component you want to insert the path into.
2. In the Content component field, Paste in the asset relative path.
3. Delete the CSS selector "." from the asset path.

4. Append the asset path with the style location.

NOTE  Style locations in Unqork begin with 'styles/{styleName}/' where {styleName} is the name of the style the asset belongs to.

5. Insert the CSS rule-set that utilizes the style asset.

6. Click Save.

To learn more about how to use CSS in a Content component, click here: https://docs.unqork.io/Content/A04-ModEditor-Display_Layout/A04002B-Content_CSS.htm

Setting Up a Remote Root

Now, you can connect your CSS to your environment and test it in real-time. This happens in your root folder structure. It acts as a local server to host your customer.CSS file. Unqork's remoteRootCustomer query then finds your file and inserts it into the environment. Without a remote root, Unqork can't find and display your CSS.

Before you start, you need to name your compiled CSS file customer.CSS. This is the specific file name that remoteRootCustomer looks for.

1. Run a localhost server to serve up your compiled CSS file. Your local server is available at the following addresses:
  • http://0.0.0:8000/

  • http://127.0.0.1:8000/

  • http://localhost:8000/

NOTE  To change your port number, enter the number to the end of the command. For example, $python -m SimpleHTTPServer 3002. By default, this HTTP server runs on port 8000.

TIP  SimpleHTTPServer is a quick and easy way to serve your CSS file locally. All you need to do is install python2 and run this command: $ python -m SimpleHTTPServer

2. Place your customer.CSS file inside the directory structure styles/STYLE-NAME.
3. Complete this path with your own information: ?style=STYLE-NAME&remoteRootCustomer=http://localhost:8000/

Option Label

Value to Store in Submission Data

STYLE-NAME

The name you give your folder. The best practice is to use lowercase letters. Your name can't contain any spaces.

http://localhost:8000

The address of your port. Make sure the number here matches your port number if it isn't the default.

4. Add your new path to the remaining application path before the hashtag (#). So, your URL looks like this: https://YOUR-ENVIRONMENT-stagingx.unqork.io/?style=STYLE-NAME&remoteRootCustomer=http://localhost:8000/#/display/a0s9d8a0s9d8a70dssd.

Now, your locally-hosted CSS file is incorporated into your environment.

Promoting a Style

You promote applications between environments after you make changes. You'll do the same for styles.

Unqork can share styles across applications. Be mindful when promoting an application and its styles. Consider how promoting your style might affect other applications in your target environment.

TIP  To learn more about how promotion works, search Promoting Applications in our In-Product Help.

To promote a style:

1. On the Styles Admin page, find the style that you want to promote.
2. Under the Actions column, open the Manage drop-down.
3. Select Promote.

4. Make a selection from the Environment drop-down.
5. Click Promote.

NOTE  Promoting a style also promotes associated base styles and style assets with it.

Deleting a Style

From time to time, you might clean up styles you no longer need. A delete option makes this quick and easy.

NOTE  This also deletes all assets saved in the style.

To delete a style:

1. On the Styles Admin page, find the style to delete.
2. Under the Actions column, open the Manage drop-down.
3. Select Delete.

4. Enter the style's name to confirm you want to delete it.
5. Click Delete.

Resources