CLIO Designer Guide

Overview

Designers alter the look and feel of the CLIO application to better integrate it into your institution's design aesthetic and corporate branding.

Creating a Local Development Environment

Main Article: Creating a Local Web Development Environment

CLIO is a web-based application, which means that it needs to be developed on your local machine using a Local Web Development Environment (LWDE).  There are many free and open-source Local Web Development Environments available, which quickly create a local web server with all of the required tools. These software packages can also be used to quickly create kiosks.

Interface

Editing Interactive Theme

Main Article: Adding Custom CSS to a CLIO Interactive

Custom CSS can be applied to an entire instance of CLIO Exhibit, which allows custom theming on a device-by-device, site-by-site or installation-by-installation basis.

Editing Program Theme

Main Article: Adding Custom CSS to a CLIO Program

Each Program can have custom CSS that allows the interface to be branded more specifically to the aesthetics of your exhibit.

Creating Activity Themes

Main Article: Creating CLIO Activity Themes

Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface.

Adding a Custom Web Font

Main Article: Adding a Custom Web Font to CLIO

CLIO can be configured to use custom web fonts to match your institutions branding. You can add fonts that are accessible to every Program in CLIO, or make certain fonts only available to certain Programs.

Important IDs and Classes

Main Article: Important IDs and Classes

These are the classes and IDs that CLIO uses to create the interface, which can be used to create themes that match your style guidelines.

Using Design Assets

Main Article: Using CLIO Design Assets

CLIO uses Google's Material.io Sharp icon set and several custom web fonts that can be utilized in your development.