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

Vertical Tabs adding Border and Styling

James January 31, 2020

I am trying to find a way to add a border or some sort of styling to the tabs (Vertical in this case) on a Chalk page. I have found some CSS styling online but it does not seem to be changing. Is there a way to add a border or background or is there a list of options that can be applied to the tabs?

I am creating a Tabs Container and putting a few Tabs Pages inside and want those tabs to have some styling

Annotation 2020-01-31 111408.jpg

1 answer

1 vote
Eduardo Godinez March 20, 2024
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item.active-tab a {
font-family:Lucida Console; font-style: italic; background-color: lightblue; font-size: 16px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius: 12px;
}
.aui-tabs.horizontal-tabs>.tabs-menu>.menu-item a {
font-family: verdana; background-color:#F5F5F5; color:black; font-size: 16px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius: 12px;
}

use that code and edit font family, size, color, and style as you please. You can remove the round border if you want.

This is what it looks like when you add the css stylesheet macro to the tabs container or tabs page macro:

2024-03-20_10-49-42.jpg

Eduardo Godinez March 20, 2024

that's for horizontal tabs so just change .aui-tabs.horizontal-tabs to .aui-tabs.vertical-tabs and also change the tabs container settings to display vertical.

Eduardo Godinez March 20, 2024

add width: 200 px; at the end to change the width of the tab if the vertical tab doesn't display the full name of the tab

Kelli Severn
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
April 12, 2024

Hi Eduardo,

I have just used this code and it worked perfectly, other than increasing the width of the tabs...I need them to be significantly wider.

 

This is what I have:

.aui-tabs.vertical-tabs>.tabs-menu>.menu-item.active-tab a {
font-family:verdana; font-style: italic; background-color: lightblue; font-size: 16px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius: 12px; width: 1000 px;
}
.aui-tabs.vertical-tabs>.tabs-menu>.menu-item a {
font-family: verdana; background-color:#F5F5F5; color:black; font-size: 16px; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-radius: 12px; width: 1000 px;
}

Thanks so much,

Kelli 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events