How to control the look of tabs
Asked by 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!


Answers:
author: Nicholas Franco
body: 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.

comments: author: Taylor Roche
body: Thank you! Your suggestion is extremely helpful and appears to do what I was looking for!


author: Marya Belanger
body: 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.

![2022-05-24_10-32-56.png](https://community.atlassian.com/t5/image/serverpage/image-id/198880i18EAD9A9FEB9E900/image-size/large?v=v2&px=999 "2022-05-24_10-32-56.png")

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.

![2022-05-24_10-30-48.png](https://community.atlassian.com/t5/image/serverpage/image-id/198879i3DA3AF6765957032/image-size/large?v=v2&px=999 "2022-05-24_10-30-48.png")

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


author: Femina Pereira
body: [@Marya Belanger](/t5/user/viewprofilepage/user-id/4529218) I faced the same issue as you mentioned above, was curious did you find a solution for it?


author: Alex Koxaras _Relational_
body: Hi [@Taylor Roche](/t5/user/viewprofilepage/user-id/2683067)

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


Tags: confluence-server

font

server

tab