/
How to customize the tabs and cloaks on a page

How to customize the tabs and cloaks on a page

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 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 Add tabs to a page.

  2. Add a Composition Setup macro above the Deck of Cards macro.

  3. Inside the Composition Setup macro body, enter the following properties:

    deck.tab.active.border = 2px dashed black deck.tab.active.background = #ff0055

    • 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 Create cloaked content.

  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:

    cloak.toggle.type = custom cloak.toggle.open = http://docs.servicerocket.com/download/attachments/12681714/rocket_right.png cloak.toggle.close = http://docs.servicerocket.com/download/attachments/12681714/rocket_down.png

    • 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

Related pages