> For the complete documentation index, see [llms.txt](https://help.iviva.com/lucy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.iviva.com/lucy/gallery-dashboards/customising-a-canvas.md).

# Customising a Canvas

Beyond customising individual widgets, you can personalise your canvas further by:

* **Adding Sidebar Items**
* **Adding a Logo** **and Colours**
* **Advanced Configuration**
* **Changing the Color Theme**

{% hint style="info" %}
Before starting this tutorial, you need to have a knowledge in creating a canvas in Lucy.
{% endhint %}

{% content-ref url="/pages/xBBqFZxICevvrgHY9iZN" %}
[Creating a Canvas](/lucy/gallery-dashboards/creating-a-canvas.md)
{% endcontent-ref %}

## Adding a Sidebar Item to Your Canvas

Add Sidebar items/links help you to navigate to different pages in your canvas. They are typically located on the left side of your canvas for easy access.

There are two ways to create a sidebar item on your canvas.

1. [Selecting from an Existing Sidebar Item](#selecting-from-an-existing-sidebar-item)
2. [Creating a New Sidebar Item](#creating-a-new-sidebar-item)

### Selecting from an Existing Sidebar Item

Developers can use the React toolkit (lucy-xp) to build widgets and register sidebar links, which can then be added to a canvas.

To Select from an Existing Sidebar Item

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Customise this Canvas.**
6. Click the **Add Item** button.
7. Pick the **Select from an Existing One** tab.
8. **Sidebar Link:** Select the required existing sidebar link from the list.
9. **Custom Label:** Type in the name to be displayed in the link and the existing label will be replaced by the entered one or keep the existing label if necessary.
10. **User Roles:** Select required user groups who has access to the link. To allow anyone to access it, do not select any.
11. Click **Save**.
12. Click **Save** once again.
13. You will see a sidebar link added to your canvas.

### Creating a New Sidebar Item

You can create a sidebar item/links in your canvas to open a URL, launch a secondary canvas, or make it a dropdown list.

#### Create a New Sidebar Item to Open a URL

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Customise this Canvas.**
6. Click the **Add Item** button.
7. Pick the **Create a New One** tab.
8. **Label**:Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose.
9. **Type**: There are three types of sidebar items: **Open URL, Open a Secondary Canvas** and **Create a Dropdown**. Select **Open URL** to open an external link when the sidebar item is clicked.
10. **URL**: Enter the **URL**.
11. **Open link in**: Select to open in a new tab or in the same tab.
12. **User Roles:** Select required user groups who has access to the link. To allow anyone to access it, do not select any.
13. Click **Save**.
14. Click **Save** once again.
15. You will see a sidebar link added to your canvas. Click on it to open the web page.

#### Create a New Sidebar Item to Open a Secondary Canvas

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Customise this Canvas.**
6. Click the **Add Item** button.
7. Pick the **Create a New One** tab.
8. **Label**: Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose, e.g., Property Management.
9. **Type**: There are three types of sidebar items: **Open URL, Open a Secondary Canvas** and **Create a Dropdown**. Choose the required type.
10. Select Open a Secondary Canvas to create an additional canvas on your current canvas.
    1. **Name**: Enter a name for the secondary canvas.
    2. **User Roles:** Select required user groups who has access to the link. To allow anyone to access it, do not select any.
    3. Click **Save**.
11. Click **Save** once again.
12. You will see a sidebar link added to your canvas. Click on it and you will see an additional empty canvas opened on the same tab. Customise it as needed.

#### Create a New Sidebar Item as a Dropdown

1. On the Lucy app homepage, go to the **Gallery** tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.

5. Then, click **Customise this Canvas.**

6. Click the **Add Item** button.

7. Pick the **Create a New One** tab.

8. **Label**: Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose.

9. **Type**: There are three types of sidebar items: **Open URL, Open a Secondary Canvas** and **Create a Dropdown**. Select **Create a Dropdown** option to make the sidebar item a dropdown and configure options to be displayed under the dropdown list.
   1. Add dropdown options under the sidebar item. 
      1. Click **Add Item.**
      2. **Select from an Existing Item** tab**:** Pick this tab to select an existing sidebar item as the dropdown option.
      3. **Create a New One** tab: Pick this tab to create a new dropdown option.
         1. **Label**: Enter an appropriate label for the dropdown option.
         2. **Type**: There are two types of options: Open URL and Open a Secondary Canvas.
         3. Configure the details as necessary.
      4. Add more options under the dropdown as necessary.

10. Click **Save**.

11. Click **Save** once again.

12. You will see a sidebar link added to your canvas. Click on it to expand it and view the configured options under it.

13. Click on each option to see its functionality.

## **Adding a Logo** **and Colours** 

Add your logo to your canvas and customise the colors of the sidebar and the header.

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Customise this Canvas.**
6. Add a Logo to your canvas.
   1. Navigate to the left sidebar section of the canvas.
   2. Click the ![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FwKAvnXHDgCR2ttuZkfb8%2Fimage.png?alt=media\&token=e65b3335-dffb-46b7-abf8-2b584aa880aa) icon at the top left.
   3. To add a logo, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.
   4. Click Upload.
7. Add a gradient colour to the sidebar.
   1. Navigate to the left sidebar section of the canvas.
   2. Pick required colours.
8. Add a header colour or a background image.
   1. Navigate to the header section of the canvas.
   2. To add a header colour, pick the required colour.
   3. Add a background image.
      1. Click ![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FwKAvnXHDgCR2ttuZkfb8%2Fimage.png?alt=media\&token=e65b3335-dffb-46b7-abf8-2b584aa880aa) icon.
      2. To add a background image, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.
      3. Click Upload.
9. Add a canvas background image.
   1. Navigate to the footer section of the canvas.
   2. Click ![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2FwKAvnXHDgCR2ttuZkfb8%2Fimage.png?alt=media\&token=e65b3335-dffb-46b7-abf8-2b584aa880aa) icon.
   3. To add a background image, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.
   4. Click Upload.
10. Blur Background: Select this option to apply a blurred effect to the canvas background.
11. Click **Save**.

## Advanced Configuration

Under Advanced Configuration, you have two options.

1. **Set as Default**
2. **Clear Dashboard**

### **Set as Default**

Any canvas can be personalised. Although, it's the same canvas, the content in it can vary depending on the user. By setting a canvas as default, all users can see the same content. Any modifications to the canvas done by a user will be overridden by the default settings, preserving the original configuration.

To Set a Canvas as Default

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Advanced Configuration.**
6. Click **Set as Default.**
7. Click the **Exit** button to leave the edit mode.
8. Your canvas is now set as the default.
9. Log in to Lucy using a different account and open the same canvas.
10. Modify the canvas, e.g., Add a widget.
11. Switch back to your account and open the canvas.
12. You will see that the modifications not applied to the canvas.

### **Clear Dashboard**

Clearing a Dashboard involves removing all widgets from your canvas.

To Clear Your Dashboard

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the **Cutomise** icon![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F3UHZQgYP6oduQ1DceZrO%2Fimage.png?alt=media\&token=a4c98321-905e-42ae-ab71-bf7628326a11) in the bottom right corner.
5. Then, click **Advanced Configuration.**
6. Click **Clear Dashboard.**
7. All the widgets added to the canvas will be removed.
8. Click the **Exit** button to leave the edit mode.

## **Changing the Color Theme**

Color theme is the overall color palette used in your canvas. You can often choose between a dark or light theme to change the appearance of the background, text, and other elements.

1. On the Lucy app homepage, go to the **Gallery** tab.
2. Gallery page will open.
3. On the Gallery page, find and click on your canvas to open it.
4. Click the Colour Pallet icon ![](https://333252015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTG5DCdGHEfzVksM49xh8%2Fuploads%2F4rmDYkqGfBXK97N6yA7p%2Fimage.png?alt=media\&token=8278c4fe-1e70-4244-9ebf-3d16a9991ab0). When you create a new canvas, the light mode is activated by default.
5. **Dark mode:** Click the Dark option to switch from light mode to dark.
6. **Light mode:** Click the Light option to switch from dark mode to light.