Skip to main content

12 - Design and Attach a Theme

Last updated 13/12/2023

This documentation will explain how to design and attach a theme to the Portfolio application.

This will be a two step process. Firstly, the theme needs to be created in Five's Theme Editor. Secondly, the theme needs to be attached to the default instance of the Portfolio application in the Instances view.
1. Click Setup in the menu.

2. Click Themes in the sub-menu.


Themes Menu Item
Figure 1 - Themes menu item

Add the Portfolio Theme​

1. Click the Add Item button.

2. Type Portfolio in the Name field.

3. Click in the Theme field to open Five's Theme Editor.


Add the Portfolio Theme
Figure 2 - Add the Portfolio theme

4. Point, click, and select colors for the targeted elements.

5. On completion, click the Save button in the Theme Editor app bar.


Design and Save Theme
Figure 3 - Design and save theme

6. Click the Save button in the form app bar.


Save Button
Figure 4 - Save button

tip
If you have CSS knowledge, you can target classes by clicking the Advanced tab!

Advanced Tab
Figure 5 - Advanced tab
1. Click Setup in the menu.

2. Click Instances in the sub-menu.


Instances Menu Item
Figure 6 - Instances menu item

Attach the Theme​

caution
You cannot edit an Instance record while the application instance is deployed, you will need to click the Remove from Development button first.

Remove from Development Button
Figure 7 - Remove from Development button

info
If you are working in Local, you will need to select the record in the list first. When working in the Cloud, if there is only one instance record, the record will display by default.

1. Either click the Edit button in the form app bar, or click directly in the Theme field.


Edit Button
Figure 8 - Edit button

2. Click the lookup icon in the Theme field and select Portfolio.

3. Optional: Click the Edit icon in the Logo field and open an image file.

4. Optional: Click the Edit icon in the Small Logo field and open an image file.


Edit the Default Instance
Figure 9 - Edit the default instance

5. Click the Save button in the form app bar.


Save Button
Figure 10 - Save button

tip
This is a good time to deploy (run) the Portfolio application to check the theme!

Portfolio Theme
Figure 11 - Portfolio theme