How to customize the tabs using the HTML macro
The steps on this page require the Confluence instance to enable the HTML macro. Enabling these macros opens your Confluence site to cross-site scripting attacks. Do not enable them unless you trust all your users!
You can customize tabs and cloaks using the Composition Setup macro. However, there are certain limitations, such as font style, size, etc. This can be achieved using the HTML macro. The following is a sample of a customized set of tabs:
You can add an HTML macro to your Confluence page and add the following macro body:
If the tabs are at the top or bottom:
<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:
<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>