Page Comparison

...

Purpose

While the card labels are usually using text for identification, it is possible to set them using an image.

Example:

...

Answer

To use an image as the card labels, we can follow the steps below:

1. Attach the images that will be used as the Card Label later.

2. Add the "Deck of Cards" and "Card" macro, then save the page.

3. Using a text editor, create a file, and add the following:

   Code Block
   .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL>);} .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL);} .tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; }

4. An example of the above:

   Code Block

   .tabs .tabs-menu .menu-item:nth-child(1) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba.png?api=v2);} .tabs .tabs-menu .menu-item:nth-child(2) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba%20copy.png?api=v2);} .tabs .tabs-menu .menu-item:nth-child(3) a { background-image:url(https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/Cursor-ffvi-gba%20copy1.png?api=v2);} .tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; }

5. Please save the file as a CSS file and attach it to the same page.

6. At the top, Add "Composition Setup" macro and add the following into the macro:

   Code Block
   import.css = <CSSAttachmentURL>

   Example:

   Code Block
   import.css = https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/tabs.css?api=v2

7. Save the page and check for an effect.

Optional

If we would like to remove the Text Label completely, we can either do the following:

1. Add an "HTML Macro", and add the following:

   Code Block
   <style> .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:link {color: transparent; user-select: none;} .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {color: transparent; user-select: none} </style>

2. Or, add the same to the bottom of the same CSS file (without the "style} and upload it to the same page. Example:

   Code Block

   .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL>);} .tabs .tabs-menu .menu-item:nth-child(<tab number>) a { background-image:url(<attachmentURL);} .tabs .tabs-menu .menu-item a { height:50px; color: transparent; background-size:30px; background-repeat:no-repeat; background-position: 50%; } .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a:link {color: transparent; user-select: none;} .aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {color: transparent; user-select:

...

1. none}