| templateType | template |
|---|
| templateOption | {"label":"FAQ Template Cloud Ready v2","value":"949196335471299072","templateType":"template"} |
|---|
| templateTypeOption | {"label":"Confluence template/blueprint","value":"template"} |
|---|
| templateId | 949196335471299072 |
|---|
| excerpt | 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: import.css = https://apps-demo.servicerocket.io/confluence-6.15.0/download/attachments/33948443/tabs.css?api=v2 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: <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> Or, add the same to the bottom of the same CSS file (without the "style} and upload it to the same page. Example: .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: none} |
|---|
| fieldGroupKeys | {"3lo45anm0k":["net.customware.confluence.plugin.scaffolding__3lo45anm0k__data_0_7gz7tgav96"]} |
|---|
|