Style Administration: CSS Upload

Your application design goes beyond pretty colors. The styles you choose are the key to a memorable, user-friendly journey. After you create your design in CSS, upload the file using CSS Upload. CSS is a style sheet language that customizes the look and feel of a website. While HTML provides a website's structure, CSS handles all styling.

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 change from blue to green? You can update your CSS file and reupload it in minutes. Your changes automatically cascade throughout your application.

Adding a New Style

A valid .CSS file and its assets (covered later in this article) make up a style. To create a new style, upload your CSS in the Create Style pop-up modal. Then, complete the additional details.

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. The Style Details page 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

  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 other styles. Base styles use an existing style's CSS file as a foundation. The other style's CSS file then layers on top of the base style. This lets you create or prototype new styles without starting from scratch. A style used as a base displays the BASE badge on 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.

   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.

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 lets you 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 make up your style. They include documents, web fonts, forms, images, and more. Since your CSS references assets, 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

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.

   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

After you upload an asset to your style, you can copy its relative path 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.

   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

Connect your CSS to your environment and test it in real time. This setup uses your root folder structure, which 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 begin, name your compiled CSS file customer.CSS. This is the file name that remoteRootCustomer looks for.

1. Run a localhost server to serve 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/

   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.

   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.

   Your locally-hosted CSS file is now part of your environment.

Promoting a Style

You promote applications between environments after you make changes. Do the same for styles.

Styles can be shared across applications in Unqork. 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.