# Styles, Themes, and Templates

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

KitCloud Templates provide you with a complete application flow, allowing you to start from a pre-built app and make customizations as you see it fit.

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): Manage 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 App**.

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

2.  Select the **Digital Form for Terms and Conditions** template.

    ![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-d2ab154f3700e1c5e0caeea3cb79af52d03cd962%2Fstyles-themes-and-templates-v184-1.png?alt=media)
3. Click on **Use Template**.

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

The template will open up in Studio.

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

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

### Previewing the app

Clicking on the **Preview** button opens the **App Preview** App Preview Window. This allows you to go through an emulated application Session from a user's perspective. You can also choose the device you want to emulate a Session on, by selecting it on the dropdown list located on the top of the [Preview](../studio/studio/app-preview) page.

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

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-cc5bc1914fdcdfb97fc7a5193a73aa4c9a5ddaaf%2Fstyles-themes-and-templates-v184-4.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

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

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-43e4dc716812eaa9acf2690260e39632ebdcdfe7%2Fstyles-themes-and-templates-v184-5.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

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

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-890e5740141bda4924aee7f7eb9e60578b405082%2Fstyles-themes-and-templates-v184-6.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

You’ll be then directed to the _Terms and conditions page_, where you will have access to the Terms and Conditions.

4. Click on the link for the Modal to pop up. You'll see a paragraph of _Lorem Ipsum_ text. This is intended to serve as a placeholder for your own terms and conditions.
5. Close the Modal to go back to the Web Page.

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

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

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e2602d1549963fe15d5329cb3664d63d181e2670%2Fstyles-themes-and-templates-v184-8.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

7. You’ll get a personalized thank you message.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-9f58db87920a7af8e2dfec93012f029db56bc4af%2Fstyles-themes-and-templates-v184-9.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

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

8. Go to **AirData** Builder and find the information in the `terms_table` App Object:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-2a15f87a0d417e1103601ff159efdb0006443e77%2Fstyles-themes-and-templates-v184-10.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 [Session](../concepts/sessions). 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/data-operation-overview/http-request-data-operation). For more information on Data Operations and Data Flows, we recommend going through the contents of [Building A Contact 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.

We're going to change the terms and conditions from _Lorem Ipsum_ text to our own custom message.

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

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-110150f3778fb310f67878bd36e057e00e78d895%2Fstyles-themes-and-templates-v184-11.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.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-faa05eff15088a954f25a5b5767b2d2d67d111e7%2Fstyles-themes-and-templates-v184-12.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

<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>

4. We can also take advantage of the [Markdown](https://github.com/airkit/airkit-docs/blob/master/docs/v18-4/markdown-web-control.md) Web Control to replace the Text Web Control with something more enriched. Delete the **Text** Web Control called _T\&C copy_ by using the bin icon next to its name in the Tree.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-177fc03369ab26477ffd3087a764b2f231105c72%2Fstyles-themes-and-templates-v184-13.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

5. Create a new **Markdown** Control by clicking the **'+' Controls** button in the toolbar and then selecting the **Markdown** Web Control from the options that appear.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-265bae871001b35c7143b2e9ee4eccd835f09f10%2Fstyles-themes-and-templates-v184-14.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

6. Rename the Markdown Control " _T\&C copy_" by double clicking on it where it appears in the Tree:

\[block:image] { "images": \[ { "image": \[ "./assets/styles-themes-and-templates-v184-15.GIF", null, "" ], "align": "center", "sizing": "500px" } ] } \[/block]

7. In the **Properties** tab of the Inspector, enter the following Airscript into the text box under **General> Text**:

```html
"To read more about our terms and conditions, visit:

## [Terms & Conditions](https://www.airkit.com/legal/terms-and-conditions/)

### [Terms of Use](https://www.airkit.com/legal/terms-of-use/)
### [Privacy Policy](https://www.airkit.com/legal/privacy/)
### [Data Processing Agreement](https://www.airkit.com/legal/data-processing-agreement/)"
```

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-cf1088c3d6762fb4eb0be1ab38bf2499e5dddf11%2Fstyles-themes-and-templates-v184-16.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Notice how we formatted each title as **Header 2** and Header **Header 3** by using Markdown notation. We also assigned a [Hyperlink ](../web-controls/hyperlink-web-control)to each of them.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-99d0517dc4fd01c544770033f0f9950a058fe963%2Fstyles-themes-and-templates-v184-17.png?alt=media)

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

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