Difference between revisions of "CLIO Designer Guide"

From CLIO

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Overview==
==Overview==
Designers alter the look and feel of the CLIO application to better integrate it into your institution's design aesthetic and corporate branding.
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 ==
==Preparation==
{{Main|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.  
===Creating a Local 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.
{{Main|Creating a Local Web Development Environment}}
 
===Installation ===
CLIO needs to be installed on a web server.  There is no setup process for databases, meaning that the CLIO web application files can be dragged directly to the applicable web server folder and accessed without installation.
{{Main|CLIO Installation}}
 
===Accessing CLIO===
Once CLIO has been installed on your web server, you can access it through your web browser. For local web development, you can navigate to http://localhost/ or http://127.0.0.1/.
 
==Interface ==
==Interface ==
===Editing Interactive Theme===
===Editing Interactive Theme===
{{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.{{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 ===
===Editing Program Theme ===
{{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.{{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}}
Each Activity can have a configured theme that allows each activity's aesthetic to vary slightly from the primary interface.{{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}}
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.{{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}}
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.{{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===
CLIO uses Google's Material.io Sharp icon set and several custom web fonts that can be utilized in your development.
{{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.
 
==Contribute==
If you want to help contribute to CLIO, you've come to the right place. This is where we are trying to keep a living document based on CLIO and the way open-source technologies intersect with museums, libraries and cultural heritage centers. Sponsor us, add terms, update definitions, or provide language translations. Every little thing helps us to create a vibrant and open community geared towards one thing: equal access to technology, for everyone.{{Main|Contributing to CLIO}}

Latest revision as of 11:02, 15 March 2023

Overview

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

Preparation

Creating a Local 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.


Installation

CLIO needs to be installed on a web server.  There is no setup process for databases, meaning that the CLIO web application files can be dragged directly to the applicable web server folder and accessed without installation.

Label important.png


Accessing CLIO

Once CLIO has been installed on your web server, you can access it through your web browser. For local web development, you can navigate to http://localhost/ or http://127.0.0.1/.

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.

Label important.png


Contribute

If you want to help contribute to CLIO, you've come to the right place. This is where we are trying to keep a living document based on CLIO and the way open-source technologies intersect with museums, libraries and cultural heritage centers. Sponsor us, add terms, update definitions, or provide language translations. Every little thing helps us to create a vibrant and open community geared towards one thing: equal access to technology, for everyone.

Label important.png