How to control the look of tabs

[Taylor Roche]

Hello and thank you for any help you can provide.

I have a confluence page that makes extensive use of the Tab Container and Tab Page macros.

I'd like the tabs to "pop" a little more than they do and I am wondering if there is a way to change the look of the tabs for a specific page. For example, can I change the background color of the tabs, the font color, the font size, can I change these things for the active tab.

I found lots of discussion on changing these things using CSS for the space, but I am hoping there is a way to do it at the page or even the tab container/tab page level.

I found this discussion but didn't have any luck with it:

https://www.atlassian.com/blog/archives/styling_tabs_in_confluence_210

I found if I use a CSS Stylesheet Macro and imbed the following code I can control the color and size of the text on my page, but I couldn't figure out how to do anyting for the tabs on the page.

.wiki-content { color: #00AA00; font-size: 20px }

Thank you!

[Nicholas Franco · Accepted solution]

For the original poster and anyone else searching for this, here is the CSS:

.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;
}

You can do this at the page level by using the "css stylesheet" macro inserted into the page that you want the new style.

[Taylor Roche]

Thank you! Your suggestion is extremely helpful and appears to do what I was looking for!

[Marya Belanger]

How do you apply a new css class to a tab menu item itself? Based on how you used "active-tab", I tried to create a new class "unreleased": 

.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a {
background-color:#d5eaf5; border-radius: 10% / 50%; padding:10px; margin:5px; 
}

.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.unreleased a {
background-color:#f7d7d7; border-style: solid; border-width:1px; border-color:#fa9191;
}

In the Tabs Page macro GUI I add "unreleased" to the class field but nothing happens. 

If I inspect the page's html, "unreleased" is listed as a class on the tabs-pane, not the menu-item? But active-tab is on the menu-item, as it should be.

Why does menu-item.active-tab register on the menu-item but unreleased doesn't, even though the CSS is written exactly the same?

[Femina Pereira]

@Marya Belanger I faced the same issue as you mentioned above, was curious did you find a solution for it?

[Alex Koxaras _Relational_]

Hi @Taylor Roche 

There could be apps within the marketplace that could possibly do what you ask. Did you search there?