Skip to main content

13 - Design and Attach a Theme

Last updated 11/12/2025

This documentation is optional and will explain how to design and attach a theme to the Portfolio application. You don't need to change the theme that is on the Portfolio application, this is just for you to know how to design and attach themes for an instance of your 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.

Five gives you several themes out of the box and these are listed in the Themes view.

Add the Portfolio Theme

1. Click Setup in the menu followed by Themes in the sub-menu.


Themes menu item
Figure 1 - Themes menu item

2. Click the Add Item button and type Portfolio in the Name field.

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


Add Portfolio theme
Figure 2 - Add 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.


Save button
Figure 3 - Save button

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

Advanced editor
Figure 6 - Advanced editor

Attach the Portfolio Theme

1. Click Setup in the menu followed by Instances in the sub-menu.


Instances Menu Item
Figure 7 - Instances menu item

caution
You will need to remove your application from deployment and deploy again to see changes made to an instance record.
2. Select the default record in the list and click the Edit button in the form app bar.

info
The default record is created by Five when you save an application record.

Edit button
Figure 8 - Edit button

3. Select Portfolio in the Theme field.

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

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


Edit default Instance
Figure 9 - Edit default instance

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


Save Button
Figure 10 - Save button

tip
If you attached a new theme, this is a good time to deploy the Portfolio application to check your theme!