How to use image as the Card Label
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:
Attach the images that will be used as the Card Label later.
Add the "Deck of Cards" and "Card" macro, then save the page.
Using a text editor, create a file, and add the following:
.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%; }
An example of the above:
.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%; }
Please save the file as a CSS file and attach it to the same page.
At the top, Add "Composition Setup" macro and add the following into the macro:
import.css = <CSSAttachmentURL>
Example:
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:
Add an "HTML Macro", and add the following:
Or, add the same to the bottom of the same CSS file (without the "style} and upload it to the same page. Example: