Customizing Tabs and Cloaks

Owned by Elizabeth Tai
Last updated: Sept 21, 2023 by Smita Nair

This guide aims to introduce some basic features of the Composition Setup macro. This macro allows customization of certain elements when creating tabs or cloaked content.

Ingredients

Apps

Composition

Macros

Composition Setup, Deck of Cards

Guide

Colored Tabs

Let's customize a set of tabs by changing the active tab's color.

  1. First of all, create a set of three tabs as instructed in the Creating Tabs with Composition Server.

  2. But this time, add a Composition Setup macro above the Deck of Cards macro.
    Then, in the Composition Setup macro, type in the following parameters:

    deck.tab.active.border = 2px dashed black deck.tab.active.background = #ff0055 cloak.toggle.type = custom

  3. The first line allows you to customize a tab so it will have a border that is 2 pixels thick, is black and is also a dotted line.
    The second line allows you to customize a tab so it will have a background color with a bright shade of fuchsia (#ff0055), in case your readers are complaining they aren't able to see where certain content is.

  4. Click Save and you should have something that looks like this:

  5. Congratulations, you now have some garish looking tabs.
    There are more properties available with Composition Setup for customization of tabs. Refer to the Composition Setup macro page for all available properties.

Customizing Cloaks

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

  1. Create some cloaked content as instructed in the Creating Cloaked Content.

  2. Now attach two images to the page that can be used to replace the right and down arrows used for the cloak. You may also use these following images (save them and upload them to your own server):

     and 

  3. Now, in the Composition Setup macro that you created for the tabs above, add in these lines to the already existing lines in the macro:

    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

    (Remember to change the above image URLs to your image URLs.)

  4. You should now have a Composition Setup macro that looks like this:

  5. As documented in the Composition Setup, 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 determines what images we'll use for the toggle.open and toggle.close setting.
    Remember to replace the two URLs with the proper location of your images.

  6. Click Save and you should now have something that looks like this:

    Cloaked:

     
    Uncloaked:

     

Notes

Not applicable.

Result

Related Reading