---
title: "How to customize the tabs and cloaks on a page"
canonical: "https://support.appfire.com/space/CT/1561987427/How%20to%20customize%20the%20tabs%20and%20cloaks%20on%20a%20page"
format: markdown
---
> Macro (aura-html)

You can use the Composition Setup macro to customize certain elements when creating tabs or cloaked content.

For details about the properties available for tab and cloak customization, refer to the [Composition Setup](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562247546/Composition+Setup?atlOrigin=eyJpIjoiYWJiYWI3ZjU1NzI2NDI1MGFkMDE3ZGNiY2Q5YjFkNjIiLCJwIjoiYyJ9) macro reference page.

## Ingredients

| Apps | Composition |
| --- | --- |
| Macros | Composition Setup, Deck of Cards, Card, Toggle Cloak |

## Guide

### Customize the color of the active tab

Let's customize a set of tabs by changing the active tab's color, so your readers can easily see where the content is located.

1. Create a set of three tabs. For details, see [https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1561791200](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1561791200).
2. Add a Composition Setup macro above the Deck of Cards macro.
3. Inside the Composition Setup macro body, enter the following properties:
  - The first line customizes the active tab to have a border that is 2 pixels thick, a dotted line, and black color.
  - The second line customizes the active tab's background color to a bright fuchsia shade (`#ff0055)`.
4. Save the page and verify the result.

### Customize the arrow icons for cloaked content

Let's create some cloaked content but change the default arrow icon with one of our own choosing.

1. Create some cloaked content. For details, see [https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1561299902](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1561299902).
2. Attach two images to the page to replace the right and down arrows used for the cloak.  
For example, attach the following images:
  and
3. If it doesn’t already exist, add a Composition Setup macro above the Toggle Cloak macro.
4. Inside the Composition Setup macro body, add the following properties:
  - The first line is the property that determines what sort of toggle to display. Since we want to use our own images, we use `custom`.
  - The second and third lines are the properties that determine what images to use for the `toggle.open` and `toggle.close` setting.  
Remember to replace the two URLs with the proper location of your images.
5. Save the page and verify the result.
  Cloaked:
  Uncloaked:
  

## Result

![image](media://9eb0f6e8-3d35-4392-9b65-1cd33a1f5260)

# Related pages

- [https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562247546](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562247546)
- [https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562345850](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562345850)
- [https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562345917](https://appfire.atlassian.net/wiki/spaces/CTFCSM/pages/1562345917)