Difference between revisions of "CLIO Designer Guide"
m (1 revision imported) |
|||
| Line 1: | Line 1: | ||
==Overview== | ==Overview== | ||
Designers alter the look and feel of the CLIO application to better integrate it into your institutions design aesthetic and corporate branding. | |||
==Interface== | ==Interface== | ||
=== | ===Editing Interactive Theme === | ||
{{Main|Adding Custom CSS to a CLIO Interactive}} | {{Main|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|Adding Custom CSS to a CLIO Program}} | {{Main|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=== | ===Creating Activity Themes=== | ||
{{Main|Creating CLIO Activity Themes}} | {{Main|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=== | ===Adding a Custom Web Font=== | ||
{{Main|Adding a Custom Web Font to CLIO}} | {{Main|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=== | ===Important IDs and Classes=== | ||
{{Main|Important IDs and Classes}} | {{Main|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=== | ===Using Design Assets=== | ||
{{Main|Using CLIO Design Assets}} | {{Main|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. | |||
Revision as of 18:10, 6 May 2022
Overview
Designers alter the look and feel of the CLIO application to better integrate it into your institutions design aesthetic and corporate branding.
Interface
Editing Interactive Theme
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
Each Program can have custom CSS that allows the interface to be branded more specifically to the aesthetics of your exhibit.
Creating 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
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
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
CLIO uses Google's Material.io Sharp icon set and several custom web fonts that can be utilized in your development.
