# 14. Styling

### General

One of the core value propositions of JourneyApps is that it makes developing custom applications for industrial use cases a lot easier, faster and predictable, and this is due to the fact that the platform takes care of a lot of the heavy lifting for us as developers. It allows us as developers to focus on the data structure, workflows and business logic, whilst not having to care about hosting, cross-platform support and inconsistent UI. UX customization is then also one of the few and "most significant" limitations of applications developed on JourneyApps.

That said, there is still plenty that you can customize, and nothing is stopping you from developing beautiful, easy to use and, most importantly, intuitive applications. Next up we will explore some basic styling you can add to your apps to give them a more personal flair.

{% hint style="info" %}
**Further reading: Advanced Styling and Configuration**

See the [Component Styling and Configuration](https://docs.journeyapps.com/reference/build/app-styling-and-customizations) section for further information about advanced styling capabilities in JourneyApps.
{% endhint %}

### Color Themes and Dark Mode

Every app that you develop has its own default color themes, one for **Light Mode** and one for **Dark Mode**. The color theme manages the default appearance of several of the JourneyApps view components, however you can also override these defaults on the component itself in the view.

Let's go ahead and customize the color themes for our Punch List App. To update the color themes we will use a special *OXIDE Panel* called the `Theme` panel. So, access your command palette (`ctrl+shift+p` / `cmd+shift+p`) and type Theme and look for a *Panel* called `Theme`, like so:

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-46e86ed2d452df2c1f7d57488fe70ea500317bd6%2Foxide-pl-cmd-theme.png?alt=media)

Once selected, you should see the `Theme` panel on the left of your screen, like this.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-a12318e6ac830c4a537077f4020462eaa99ee730%2Foxide-pl-theme-panel.png?alt=media)

Now let's take a closer look at the theme panel. Right at the top of the panel is a Theme switcher which allows you to configure the color themes for both the `light` and `dark` themes. By default these will be very similar to begin. For each theme there are several standard *named* colors, e.g. `primary`, `secondary`, `positive`, `negative`, `info`, `warning` and `label`, and each of these named colors are used by default in several different places in your app. For example, the `primary` named color is used as the default color for your buttons. Let's go ahead and chance this color now, for both the `light` and `dark` theme. (Note, some of the standard named colors have 2 different color values associated with them, as is the case with `primary`. For those named colors the first color value represents the background-color and the second color value represents the text-color.)

So, let's update the our `light` theme with the following values:

* `primary`: `#722f37` (a nice wine red)
* `secondary`: `#2f5a72` (a complimentary blue)
* `positive`: `#37722f` (a desaturated lime green)

And our `dark` theme with the following values:

* `primary`: `#2f5a72` (a complimentary blue)
* `secondary`: `#72482f` (a complimentary brownish orange, which resembles severely burnt and unsalvageable salmon)
* `positive`: `#2f7269` (a very dark desaturated cyan)

Like this:

{% tabs %}
{% tab title="Light" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-3e753afbab21509505ac7b924d64e9d35f6994c2%2Foxide-pl-theme-light.png?alt=media)
{% endtab %}

{% tab title="Dark" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-3b67fd10de7b5b23bc10b0828e5d563abf59d2f2%2Foxide-pl-theme-dark.png?alt=media)
{% endtab %}
{% endtabs %}

### Test on Device

To toggle between **Light** and **Dark** mode, simply click on the hamburger menu in the top left corner of the Main view, this will open the [navigation drawer](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/navigation-navigation-drawer) from where you will be able to toggle between **Light** and **Dark** mode.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-1685f6b04bcfa1b4511c5554ab30cf68188d8282%2Fdesktop-pl-toggle-theme.png?alt=media)

Now, your app should look like this, with different colored buttons and a selected item indicator in **Light** and **Dark** mode.

{% tabs %}
{% tab title="Light" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-cf15f2f9df5978a27042ddd5356ab647195ee87c%2Fmobile-pl-colors-light.png?alt=media)
{% endtab %}

{% tab title="Dark" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-627b4a9ccb81d673ecb48488fea45fb1b327a95f%2Fmobile-pl-colors-dark.png?alt=media)
{% endtab %}
{% endtabs %}

### Assets: Icons, Static Images and HTML

Next up, let's take a look at the *assets* that your application can include. If you head over to the **Assets** workspace you will see a folder structure on the left with three subfolders, one for each type of asset that your application can include, namely: `icons`, `images` and `html`.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e1968c57f933d8e48ead4bb8c4fc512ab258f00d%2Foxide-pl-assets.png?alt=media)

To add assets to any of these simply locate the relevant file on your desktop and drag it into the correct subfolder on the left of the screen. You will see that I have added several files into my app's Assets folders (links to the example files below - Deep C Corp is our fictitious company whose branding we will be using)

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-191b799f184c6b8aa23bc47e6869653158a33778%2Foxide-pl-assets-examples.png?alt=media)

#### Example App Assets

![Icon: Clipboard Complete](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b1eeaba7dc55fb6a8612554f1cdf9668a262d808%2Fasset-icon-clipboard-list-complete.png?alt=media) ![Icon: Clipboard](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e1dedb5c5e0909419fd260d37608ecafc75e8192%2Fasset-icon-clipboard-list.png?alt=media) ![Icon: Home](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-dc1ef5d4512b5d10605de9822f78cf700e021319%2Fasset-icon-home.png?alt=media)

![Image: Nav Logo](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-a06a302cb952b848f49fff4b1aa98bc0af2c430d%2Fasset-image-deep-c-corp-nav-logo.png?alt=media) ![Image: Main Logo](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-28644edde2d0bf276c0799f309f00939470c7a51%2Fasset-image-deep-c-corp-main-logo.png?alt=media)

![Image: Welcome (light)](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b736058a1a0f511de1379360fca528a6ba211f51%2Fasset-image-img-welcome-light.png?alt=media) ![Image: Welcome (dark)](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-400164dd3bbe2e166814b26c50d3ea50467092fc%2Fasset-image-img-welcome-dark.png?alt=media)

### Add Icons and Images to the App

Now that we have uploaded some icons and images to our Assets folders, let's use them in the app. It is definitely great to be able to use custom icons for various parts of your app (we will use ours in the `<sidebar>` component we will be adding later), but often times a standard icon library will get you 80-90% of what you need. For that reason JourneyApps has two built-in [icon libraries](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/icons), Font-Awesome and Ionicons (note the specific versions).

So, let's add some of the static images we added to our **Main** view and also use some Font-Awesome icons on our buttons throughout the application. Let's start with the `main.view.xml` file and add a `<display-image>` component as the very first view component, after the variables of course. We wil use one of the *welcome* images we uploaded for this part. Like so

```xml
<!-- Components go here: -->

<display-image src="images/img-welcome-light.png" />
<heading>Welcome to the Punch List App</heading>

<info>A list of all the punches that have not yet been taken care of are shown below</info>
```

Next up, let's add some icons to the buttons on our `main.view.xml`. In every `<button>` component you need to first add an `icon=""` attribute and then we will specify the icons we want to use. For View, Delete and Add I am going to use the Font Awesome `clipboard`, `trash` and `plus` respectively. Like so.

```xml
<button label="View Selected Item" icon="fa-clipboard" on-press="viewItem" validate="true" style="solid" />
<button label="Delete Selected Item" icon="fa-trash" on-press="deleteItem" validate="true" style="solid" />
<button label="Add New Item" icon="fa-plus" on-press="goToNew" validate="false" style="solid" />
```

### Test on Device

Let's see what it looks like and your app should now look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-134141777b6e23a8b47d0eeb5e4b315a46f926ea%2Fdesktop-pl-main-icons.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-129192e75cd557639a9bfc4df3b10dd20e643ba4%2Fmobile-pl-main-icons.png?alt=media)
{% endtab %}
{% endtabs %}

It's already looking better, but we can improve it some more. Let's add the branding/logo for our fictitious company 'Deep C Corp', move some of the components around to better use the available columns with the branding image, and also introduce the `<button-group>` component. So, still in the `main.view.xml`, add another `<display-image>` component, binding this one to the `images/deep-c-corp-main-logo.png`. Then, above the our three `<button>` components, add a `<button-group>` component and move the existing three buttons into the `<button-group>`. Now, to use the column space nicely, we are going to have the main logo on the left, and everything else on the right of the screen. Like so.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<view title="Punch List">
    <!-- Parameters go here: -->

    <!-- Variables go here: -->
    <var name="selected_item" type="item" />
    <var name="open_punches" type="query:item" />

    <!-- Components go here: -->


    <columns>
        <column>
            <display-image src="images/deep-c-corp-main-logo.png" />
        </column>
        <column>
            <display-image src="images/img-welcome-light.png" />
            <heading>Welcome to the Punch List App</heading>

            <info>A list of all the punches that have not yet been taken care of are shown below</info>
            <object-list label="Open Punches" query="open_punches" bind="selected_item" empty-message="There are no open punches at the moment." required="true" />

            <button-group>
                <button label="View Selected Item" icon="fa-clipboard" on-press="viewItem" validate="true" style="solid" />
                <button label="Delete Selected Item" icon="fa-trash" on-press="deleteItem" validate="true" style="solid" />
                <button label="Add New Item" icon="fa-plus" on-press="goToNew" validate="false" style="solid" />
            </button-group>
        </column>
    </columns>

</view>
```

Test again and your app should now look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-65f65a1331530a675dbda0d5a7c30c2aa0de5d9e%2Fdesktop-pl-main-branding.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-f33fd85acafa5199e630a8de3b6e1c113c38b01a%2Fmobile-pl-main-branding.png?alt=media)

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-662575fc1d3f84538dfe6752eccc2952a8a871f0%2Fmobile-pl-main-branding-2.png?alt=media)
{% endtab %}
{% endtabs %}

It's looking a lot better now, so let's keep going.

### Button Styling

Buttons in JourneyApps can be styled in a variety of different ways, see the [Syntax Reference](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/button) for more details. You have already seen that you can change the color and specify an icon, but you can also do things like choose the position of the icon and choose whether the background color should be a `solid` color or an `outline`. Next we will incorporate some of this in our app, so let's head to our **View Item** view and update the buttons with some more styling.

So, on your `view_item.view.xml`, move the two buttons into a `<button-group>` and give each an `icon` attribute and an `icon-position` attribute, then update those attributes to the following (notice the order of my buttons inside the button-group):

```xml
<button-group>
    <button label="Go back" icon="fa-arrow-left" icon-position="left" on-press="dismiss" validate="false" style="solid" />
    <button label="Mark as Closed" icon="fa-check" icon-position="right" on-press="markClosed" validate="false" style="solid" />
</button-group>
```

Now let's change the style and color of these two buttons. I want the *Go back* button to be less prominent, so I will use an `outline` instead of a solid color, and I want to use a different color for my *Mark as Closed* button, the `secondary` color (to do this I need to specify a `color` attribute on the button). So update the buttons to the following:

```xml
<button-group>
    <button label="Go back" icon="fa-arrow-left" icon-position="left" on-press="dismiss" validate="false" style="outline" />
    <button label="Mark as Closed" color="secondary" icon="fa-check" icon-position="right" on-press="markClosed" validate="false" style="solid" />
</button-group>
```

### Test on Device

The *View Item* view should now look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-0aa49b34ce3b8a976dbfb2ea917434ec11bdb80c%2Fdesktop-pl-view-item-styling.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-43bb818d203971ed73eeb87ae80eb7633863eaa2%2Fmobile-pl-view-item-styling.png?alt=media)
{% endtab %}
{% endtabs %}

### Add a Sidebar with Icons

Now that we know how icons work, let's also add a sidebar to some of the views in our app. Our app doesn't have long linear processes like the field ticket screenshot that you saw in the Responsive Apps section of the tutorial, so adding a sidebar to the punch List app won't be a very good example, but it will give you an idea of how sidebars work. The closest we have to a linear process in our app is the two-step process of viewing a punch and then marking it as "Complete". We'll be using the below three icons for this purpose. You can save & upload them to your **Assets Workpsace**, should you wish:

{% file src="<https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-b1eeaba7dc55fb6a8612554f1cdf9668a262d808%2Fasset-icon-clipboard-list-complete.png?alt=media>" %}
Icon: Clipboard Complete
{% endfile %}

{% file src="<https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-e1dedb5c5e0909419fd260d37608ecafc75e8192%2Fasset-icon-clipboard-list.png?alt=media>" %}
Icon: Clipboard
{% endfile %}

{% file src="<https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-dc1ef5d4512b5d10605de9822f78cf700e021319%2Fasset-icon-home.png?alt=media>" %}
Icon: Home
{% endfile %}

In the XML for your `view_item` view, above the `<heading>` tag, type `sidebar` and insert the auto-complete suggestion for . This will give you:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<view title="View Punch Item">
    <!-- Parameters go here: -->
    <param name="item" type="item" />

    <!-- Variables go here: -->

    <!-- Components go here: -->
    <sidebar>
        <item state="active" icon=""></item>
        <item state="disabled" icon=""></item>
    </sidebar>
    <heading>{item.comments}</heading>
    <columns>
        <column>
            <info-table>
                <row label="Item Comments" bind="item.comments" />
                <row label="Item Status" bind="item.status" />
                <row label="Current Time" value="{$:showTime()}" />
            </info-table>
        </column>
        <column>
            <display-photo bind="item.photo" />
        </column>
    </columns>

    <button-group>
        <button label="Go back" icon="fa-arrow-left" icon-position="left" on-press="dismiss" validate="false" style="outline" />
        <button label="Mark as Closed" color="secondary" icon="fa-check" icon-position="right" on-press="markClosed" validate="false" style="solid" />
    </button-group>

</view>
```

You'll notice that sidebar `<item>` components have a `state=""` where the first item defaults to *active* and the second to *disabled*. Sidebar items can have one of three possible states:

* **active**: The sidebar item is highlighted
* **normal**: The sidebar item is shown normally
* **disabled**: The sidebar item is greyed out

Let's go ahead and populate our `<sidebar>` with some data. We want a sidebar with three items. The first will represent our **Main** view or starting point, the second will represent the **View Item** step and the third our **Item Completed** step. So, in your `view_item.view.xml` update the `<sidebar>` as follows:

```xml
<sidebar>
    <item state="normal" icon="icons/home.png">Home</item>
    <item state="active" icon="icons/clipboard-list.png">View Item</item>
    <item state="disabled" icon="icons/clipboard-list-complete.png">Item Closed</item>
</sidebar>
```

Next up, let's add some more styling by using our color themes to color the icons with the `primary` named colo. Like so:

```xml
<sidebar>
    <item state="normal" icon-color="primary" icon="icons/home.png">Home</item>
    <item state="active" icon-color="primary" icon="icons/clipboard-list.png">View Item</item>
    <item state="disabled" icon-color="primary" icon="icons/clipboard-list-complete.png">Item Closed</item>
</sidebar>
```

Next, let's allow the user to navigate all the way home by clicking on *Home* in the sidebar. To do this we need to specify an `on-press` action for the `sidebar` `item` in question. Like this.

```xml
<sidebar>
    <item state="normal" icon-color="primary" icon="icons/home.png" on-press="$:navigate.dismiss('main')">Home</item>
    <item state="active" icon-color="primary" icon="icons/clipboard-list.png">View Item</item>
    <item state="disabled" icon-color="primary" icon="icons/clipboard-list-complete.png">Item Closed</item>
</sidebar>
```

Finally, let's make the `sidebar` available on mobile phones by adding a `visible-on-mobile="true"` to the `sidebar` component. Like this.

```xml
<sidebar visible-on-mobile="true">
    <item state="normal" icon-color="primary" icon="icons/home.png" on-press="$:navigate.dismiss('main')">Home</item>
    <item state="active" icon-color="primary" icon="icons/clipboard-list.png">View Item</item>
    <item state="disabled" icon-color="primary" icon="icons/clipboard-list-complete.png">Item Closed</item>
</sidebar>
```

Now we can copy the code for the `sidebar` to the **Completed Item** and update the state values for the various sidebar items view to finish this part of the tutorial. So head over to the **Completed Item** view and update the `completed_item.view.xml` to the following:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<view title="Completed Punch Item">
    <!-- Parameters go here: -->
    <param name="item" type="item" />
    <!-- Variables go here: -->

    <!-- Components go here: -->
    <sidebar visible-on-mobile="true">
        <item state="normal" icon-color="primary" icon="icons/home.png" on-press="$:navigate.dismiss('main')">Home</item>
        <item state="normal" icon-color="primary" icon="icons/clipboard-list.png">View Item</item>
        <item state="active" icon-color="primary" icon="icons/clipboard-list-complete.png">Item Closed</item>
    </sidebar>
    <heading>Item Completed!</heading>
    <info>This item is now completed and will no longer show up in the list of Open Snags</info>

    <button label="Go Home" on-press="goHome" validate="false" style="solid" />
</view>
```

### Test on Device

Let's see the sidebar in action. Your app should now look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-8d58a487402473cab43934bab32ab6aaac33bdf3%2Fdesktop-pl-sidebar.png?alt=media)

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-df88cef3b599015709e00648dfdd99ad3c72bc81%2Fdesktop-pl-sidebar-2.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-c05c75709eb46ad02f29bda708e1f3bf746d623e%2Fmobile-pl-sidebar.png?alt=media)

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-d058ad6f8516d1c71e66d4e325e43a40d2a60839%2Fmobile-pl-sidebar-2.png?alt=media)
{% endtab %}
{% endtabs %}

### HTML

JourneyApps offers an [`html`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/html) UI Component that allows you to embed HTML snippets or pages into your apps. This is mostly useful for two purposes:

* Embedding HTML content, like terms and conditions etc. into an app
* Extending the functionality offered "natively" by JourneyApps. For example, you could embed an HTML page that offers some level of interactiveness to create user interface elements or experiences that are not possible to implement natively in JourneyApps. (see the [reference documentation](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/html) for more details)

The `<html/>` component can display HTML content from two types of sources:

* A local HTML file that is embedded inside your app (HTML files can be uploaded to your app using the Assets Workspace in OXIDE) — specify a local path to the HTML file in the `src=""` attribute
* A remote HTML page — specify an `https://` URL in the `src=""` attribute

#### Let's add some HTML to our app \[OPTIONAL]

The following section walks you through the process of creating some basic static HTML and adding that to your app. It can be useful for some very specific styling requirements, but it's generally easier to style your app using the before mentioned methods.

First, you need to create a new `.html` file on your computer. The easiest will be to use a text editor and save the file with the following filename `blue-line.html` (note the file extension). Use the below code for the contents and once saved, upload the `blue-line.html` file to your **Assets** workspace.

```html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body style="margin: 0px">
		<table style="width: 100%">
	        <tbody>
	          <tr style="height: 8px">
	            <td style="background-color:#1870ca; width: 7%"></td>
	            <td></td>
	          </tr>
	          <tr style="height: 8px"></tr>
	          <tr style="height: 8px"></tr>
	        </tbody>
      </table>
	</body>
</html>
```

Now let's add it to the **Main** view. So, in `main.view.xml` add a `<html>` component (add it as the very first view component outside of the columns but after the variables) and specify the `src="html/blue-line.html"`. You will also need to specify the height manually in this example as the default minimum height would be too much for our example HTML. (Note the `show-fullscreen-button="false"`)

```xml
<!-- Components go here: -->
<html src="html/blue-line.html" show-fullscreen-button="false" height="15px"/>
```

Your app should now look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-c302a6fd44e3a955c855e8b93821aec98d783700%2Fdesktop-pl-blueline-7.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-c57b3a7db58ea5e7aa22486084e141d322765390%2Fmobile-pl-blueline-7.png?alt=media)
{% endtab %}
{% endtabs %}

As you can see, the length of the blue line is different on the phone vs the desktop. That is being specified in the HTML itself. Let's go and update it now. It's currently using a 7% width, but let's change it to 25% for good measure. So, head over to the Assets Workspace and select the `blue-line.html` file. Like this.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-5d4e9a91ad8658ee4ec6e23418c5d5ecef73fa8a%2Foxide-pl-assets-blueline.png?alt=media)

Now, let's change the width % to 25%. Like this.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-9d810bd564734c628d35faf882d595febb722931%2Foxide-pl-assets-blueline-update.png?alt=media)

Now your app will look like this.

{% tabs %}
{% tab title="Desktop" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-537fccf15d12cb79d2a4582a4efdf18ce50914ef%2Fdesktop-pl-blueline-25.png?alt=media)
{% endtab %}

{% tab title="Mobile" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-393e1c2403fe2e7983dcc608b801d84376539991%2Fmobile-pl-blueline-25.png?alt=media)
{% endtab %}
{% endtabs %}

We have now touched on all the basic styling elements of JourneyApps applications. Next up we are going to revamp our main view with a more powerful `<list/>` component.

{% hint style="info" %}
**Further reading: Advanced Styling and Configuration**

See the [Component Styling and Configuration](https://docs.journeyapps.com/reference/build/app-styling-and-customizations) section for further information about advanced styling capabilities in JourneyApps.
{% endhint %}