Style Administration: CSS Upload

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 (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users., 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 HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. provides a website's structure, CSS applies all things style-related.

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.

• 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:

• Add a new style.

• Modify an existing style.

• Set an existing style as a base for other styles.

• Manage the assets of a style.

• Copy and insert an asset relative path.

• Set up a remote root.

• Promote a style.

• Delete a style.

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.

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

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.

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.

6.

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

7.

Click Create.

Setting a Base Style for an Existing Style

To set a base style for an existing style:

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.

Setting a Temporary Base Style in Express View

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.

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 (Remove) button.

6.

Click Save.

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.

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.

5.

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

6.

Click Save.

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:

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/

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.

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.

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

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

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.

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.

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

• CSS Upload Troubleshooting