Vertical Tabs adding Border and Styling

Question

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

Kelli Severn · Answer

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

Eduardo Godinez · Answer

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

Eduardo Godinez · Answer

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.