Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

How to control the look of tabs

Taylor Roche July 3, 2019

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!

2 answers

1 accepted

1 vote
Answer accepted
Nicholas Franco December 13, 2021

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 December 13, 2021

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

Like Nicholas Franco likes this
Marya Belanger May 24, 2022

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

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

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

Like Femina Pereira likes this
Femina Pereira July 18, 2023

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

0 votes
Alex Koxaras _Relational_
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
August 11, 2021

Hi @Taylor Roche 

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

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events