How to customize Composition Tabs using HTML macro

Summary

This KB requires the Confluence instance to enable the HTML Macro. Enabling these macros will open your Confluence site to cross-site scripting attacks. Do not enable them unless you trust all your users!

You are able to Customizing Tabs and Cloaks using the Composition Setup macro. However, there are certain limitations such as font style, size and etc. This can be achieved using the HTML macro. The following is a sample of customized Composition's tab:

Environment

Confluence or Jira version
Add-on version

Diagnostics Steps

Not applicable.

Cause

The Composition Setup has certain limits on customizing tabs.

Workaround

If the tabs are at the top or bottom:

Add an HTML macro on the confluence page and add the following:

<style>
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a {font-family:Lucida Console; font-style: italic; background-color: lightblue; font-size: 20px;}
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {font-family: verdana; background-color:#F30289; color:white; font-size: 20px;}
</style>

If the tabs are on the left or right:

Add an HTML macro on the confluence page and add the following:

<style>
.aui-tabs.vertical-tabs>.tabs-menu>.menu-item.active-tab a {font-family:Lucida Console; font-style: italic; background-color: lightblue; font-size: 20px;}
.aui-tabs.vertical-tabs>.tabs-menu>.menu-item a {font-family: verdana; background-color:#F30289; color:white; font-size: 20px;}
</style>

Resolution

Not applicable.