Style Administration CSS Upload

CSS Upload lets Creators upload custom CSS stylesheets to control the visual design of Unqork applications. CSS is a style sheet language that handles website styling. While HTML provides structure, CSS controls layout, colors, fonts, and branding. Use CSS Upload when the built-in style options do not meet branding requirements, or when consistent styling is needed across multiple applications in an environment.

CSS styles apply to all applications in the environment. When a CSS file is updated and reuploaded, the changes cascade throughout every application using that style.

Adding a New Style

A style consists of a valid CSS file and its assets. Click Add Style to open the Add Style page, upload the CSS file, and complete the settings.

Click Save Changes to save, or Cancel to discard.

Note: On the Style Administration page, existing Unqork-managed styles display the Unqork badge. Styles created by Creators do not display this badge.

Editing a Style

1. On the Style Administration page, open the actions menu on the style row.
2. Select Edit.
3. Make changes as needed. Name is read-only after creation. To replace the CSS file, click the remove icon next to the existing file to reveal the upload area, then upload a new file.
4. Click Save.

Important: Uploading a new stylesheet replaces the existing stylesheet.

Setting a Base Style

Base styles let Creators use an existing style's CSS file as a foundation. The new style's CSS layers on top of the base, allowing variations to be built without starting from scratch. A style used as a base displays the Base badge on the Style Administration page.

Note: When there is a CSS conflict between a base style and the style applied to it, the applied style overrides the base.

When creating a new style

1. Click Add Style.
2. Fill out the required fields including the CSS stylesheet.
3. From the Base Style drop-down, select an existing style to use as the base.
4. Click Save Changes.

Important: You must upload a CSS stylesheet when creating a style, even when selecting a base style.

For an existing style

Note: A style that has a base style assigned cannot itself be used as a base for other styles.

1. On the Style Administration page, open the actions menu on the style row.
2. Select Edit.
3. From the Base Style drop-down, select an existing style.
4. Click Save.

Setting a temporary base style in Express View

To test a base style combination without saving it:

1. In Express View, click the Preview Style drop-down at the top right.
2. Select the style to preview.
3. In the browser URL bar, after style={styleName}, add &baseStyle={baseStyleName}. For example: https://your-env.unqork.io/?style=myStyle&baseStyle=baseStyleName#/
4. Press Enter to reload.

Tip: This combination is not saved. Navigating away from Express View removes the temporary base style.

Removing a base style

1. On the Style Administration page, open the actions menu on the style row.
2. Select Edit.
3. Next to the Base Style drop-down, click the remove icon to disconnect the base style.
4. Click Save.

Important: To delete a style that is currently used as a base, disconnect it from all styles that reference it first.

Managing Style Assets

Style assets are the files referenced in a style's CSS: fonts, images, icons, and other resources. Manage assets from the Assets tab in the style's edit view.

To open the Assets tab:

1. On the Style Administration page, open the actions menu on the style row.
2. Select Edit.
3. Select the Assets tab.

Asset actions

Using an asset path in CSS

After uploading an asset, use Copy Path to get the relative path, then reference it in your CSS file. Asset paths follow the pattern styles/{styleName}/path/to/asset.

To reference an asset path in a Content component:

1. In Module Builder, open the Content component settings.
2. Paste the asset path into the content field.
3. Remove the leading . from the path.
4. Prepend the path with styles/{styleName}/ where {styleName} is the name of the style.
5. Insert the CSS rule that uses the asset.
6. Click Save.

Promoting a Style

Styles are promoted independently of applications. Promote a style to each target environment where it is needed.

1. On the Style Administration page, open the actions menu on the style row.
2. Select Promote.
3. Select a target environment from the drop-down.
4. Click Promote.

Note: Promoting a style also promotes its associated base styles and assets.

Deleting a Style

To remove a style that is no longer needed:

1. On the Style Administration page, open the actions menu on the style row.
2. Select Delete.
3. Confirm the deletion.

Warning: Deleting a style also deletes all assets saved to it.