# Styles, Themes, and Templates

This tutorial will walk you through an introduction to styling and themes by using an KitCloud template as a base.

Airkit Templates provide you with a complete Journey flow, which allows you to make the necessary changes to represent your brand.

Check out this tutorial if you want to learn more about:

* Working with and customizing KitCloud templates
* Creating custom UI components
* Styling
* Uploading and working with custom assets, such as pictures or fonts
* Adding headers

**Here are the parts of the Airkit platform that you will be working with:**

* [App Preview](../studio/studio/app-preview): Preview the application flow from the perspective of a user
* [AirData Builder](../studio/studio/builder-bar/airdata-builder): View data collected from users
* [Web Flows Builder](../studio/studio/builder-bar/web-flows-builder): Create and modify the UI
* [Media Library](../studio/studio/builder-bar/media-library): Upload assets, including pictures and custom fonts, for use within the application
* [Theme Builder](../studio/studio/builder-bar/theme-builder): Make stylistic changes that apply throughout your entire application.

## Working with a Template

1. From the **Console**, click on **Create new**.
2. Select the **Digital Form for Terms and Conditions** template and click on **Use Template**.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-281c4d004e5dc554468e33b8803ea868415b35ad%2Fstyles-themes-and-templates-v183-0.png?alt=media)

The template will open up in Studio.

3. Click on **Preview** at the top right corner in order to take a look at the preset Journey flow.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-65cfb4c8a3df95846704e9a374c5a6e71f5bdcbd%2Fstyles-themes-and-templates-v183-1.png?alt=media)

### Previewing the app

You’ll land on **App Preview** from where you can go through the app from a user perspective.

1. Since this is a web app, click on the web icon to start.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-f6bbeb1b8e8a83917c4790f97d73f1a37093d6d8%2Fstyles-themes-and-templates-v183-2.png?alt=media)

2. You’ll land on the first Web Page, so click on **Sign me up!** to move forward.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-ab49cc6018273193ca5d39f79781b4791bb337a9%2Fstyles-themes-and-templates-v183-3.png?alt=media)

3. Enter some dummy information and click on **Continue**.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-466348e0dbb8a4daa94c07dce9514decf603faea%2Fstyles-themes-and-templates-v183-4.png?alt=media)

You’ll be then directed to the second Web Page from where you have access to the Terms and Conditions.

4. Click on the link for the Modal to pop up. You’ll see a _Lorem Ipsum_ text that we will later on change from Studio.
5. Close the Modal to go back to the Web Page.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-7e520722025541d109767652dc5da3fb116e7d6d%2Fstyles-themes-and-templates-v183-5.png?alt=media)

6. Select the box to agree to the T\&C and click on Submit.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-a32dfe6d935ebea0d2120125115088c460bfc5b5%2Fstyles-themes-and-templates-v183-6.png?alt=media)

7. You’ll get a thank you message.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-2e0510a4db47b81a52f616ad7674e934d3119e1c%2Fstyles-themes-and-templates-v183-7.png?alt=media)

Now, let’s go back to Studio to check if the information entered in **App Preview** was saved.

1. Go to **AirData** Builder and find the information in the terms\_table App Object:

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-2a15f87a0d417e1103601ff159efdb0006443e77%2Fstyles-themes-and-templates-v183-8.png?alt=media)

<details>

<summary>What is an AirData App Object?</summary>

**AirData**

**AirData** is a database tied to an Airkit app's profile, allowing records to be stored for collection or retrieval, even after a user has closed the app or ended their [Journey](https://github.com/airkit/airkit-docs/blob/master/docs/v18-3/sessions.md). Information within **AirData** is structured according to AirData App Objects.

App Objects ensure sure there is a schema available to structure the information collected by the Web Page fields when building the UI. If you don’t want to keep the captured information in an [AirData](../working-with-data/working-with-data-overview/airdata) table, you can create a [Custom Data Type](../variable-data-types/custom-data-types) instead. Custom Data Types do not store information long-term, but still make it possible to structure data in accordance to the expectations of external system of record, which you can send information to via the [HTTP Request Data Operation](../data-operations/http-request-data-operation). For more information on Data Operations and Data Flows, we recommend going through the contents of [Your First App (A Simple Form)](your-first-app-a-simple-form).

</details>

### Editing the Modal

Once a KitCloud template has been used to create an application, it can be edited in the same way that any other application can.

Since the out-of-the-box Modal shows a _Lorem Ipsum_ text, let’s change it to our own custom message.

1. Go to **Web Flows** Builder and select the T\&C copy Label Control.
2. In the **General** tab of the Inspector, the text can be changed from **Control Properties > Text**.

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-8a9db39181c4f54031e834e3b0bb1233909db478%2Fstyles-themes-and-templates-v183-9.png?alt=media)

3. You can expand the **Expression Editor** and type a more appropriate text. Bear in mind that the **Expression Editor** expects an Airscript expression, therefore the introduced text must be between quotes to designate it a string.

<details>

<summary>What is Airscript?</summary>

**Airscript**

**Airscript** is a programing language specialized for data manipulation: it's by strategically combining **Airscript** with input from app users that you control the order, flow, and nature of the interactions between your Airkit apps and the outside world. To get started experimenting with Airscript, see [Airscript Quickstart](../working-with-data/working-with-data-overview/airscript-quick-start).

</details>

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-b350ec8c8bf2f8ba4984bf12282fb5295b00d44f%2Fstyles-themes-and-templates-v183-10.png?alt=media)

4. Save the app and go to **Preview** again to go through the flow one more time and see the changes in the Modal:

![](https://3333962744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbnBffrSN2FHLC5cM89AM%2Fuploads%2Fgit-blob-c73172e29c214f40c6ba48763a03038b2ebf1aff%2Fstyles-themes-and-templates-v183-11.png?alt=media)
