Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,293,410
Community Members
 
Community Events
165
Community Groups

How to control the look of tabs

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

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.

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

Like Nicholas Franco likes this

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?

0 votes
Alex Koxaras Community Leader Aug 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
Community showcase
Published in Confluence

Confluence: Where work and wellness meet

Feeling overwhelmed by the demands of work and life? With a 25% increase in the prevalence of anxiety and depression worldwide during the pandemic, for most of us, it’s a resounding yes . 🙋‍♀️ ...

736 views 5 21
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you