How to Globally Customize Composition Tabs using Space Stylesheets

Owned by Elizabeth Tai (Unlicensed)
Last updated: Sept 21, 2023 by Smita Nair
2 min read

Summary

Sometimes a user may want to customize the tabs and cloaks globally instead of adding the Composition Setup or HTML macro on each page. For example, the user may use the Card macro on hundreds of pages and adding the customization for individual pages would not be feasible.

Instead of adding this to each page, is there a global setting so all cards look and feel as intended by the user?

Environment

  • Confluence Server

Diagnostics Steps

Not applicable.

Cause

The Composition Setup macro has certain limits on customizing tabs so the HTML macro must be applied to each page individually.

Workaround

You can apply styling to your cards/tabs by defining a CSS class and then calling that class in your Deck of Cards macro.

Please follow below steps to add CSS styling to your Composition tabs:

  1. Go to the Cog Icon UNKNOWN ATTACHMENT > General Configuration > Stylesheet.

  2. Click Edit and add the following CSS class (named "tabs" in this example):

    .tabs .tabs-menu .menu-item a {border:2px black; background-color:#1282C5; color:white;}

  3. After adding the Deck of Cards macro enter "tabs" in the CSS Class field.

     

     

  4. Click Save and the CSS class will be applied to the tabs.

Follow the outline at Basic Styling Tutorial to get an introduction to CSS. We have also provided Commonly used CSS classes in Composition Tabs and related examples at Examples of CSS style code in Composition Tabs to help you get started. 

Resolution

Not applicable.