Vertical Tabs adding Border and Styling

[James]

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

[Eduardo Godinez]

.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:

[Eduardo Godinez]

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]

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]

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