Changing background color of Classic Tab

Support
#1

Hello, I found in the forum some answers to changing the background color, text etc in the classic tab and was able to copy some code into my CSS. However, I can’t seem to change the color of the background once the tab opens. Please see here: http://canadianpolefitnessassociation.com/cpfa-online-academy/

You can see that when you click on one of the tabs and it opens, it is a black background. How can I change the background color and text color?

Also, is there a way to make it look like the attached screenshot? I actually like the way the tab looks in edit mode. Where each tab goes across the entire screen.

#2

Hello @CPFA,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
    background-color: #ddd;
    color: #000;
}

Looks like you are using Tabs Left layout. Please change the layout to Top. https://cloudup.com/c_rYt8TVb1l

Thanks.

#3

Thanks for the quick response! I added that in and it is not changing the black background color. This is all the CSS I have in there:

.x-nav-tabs {border: 2px solid #f46c5d; border-bottom: 0;}

.x-nav-tabs.top>li a {border-bottom: 2px solid #f46c5d; color: #754e4e; font-size: 16px;}

.x-nav-tabs.top>li {border-right: 2px solid #f46c5d;}

.x-tab-content {border: 2px solid #f46c5d; border-top: 0; font-size: 14px;}

.x-nav-tabs>li>a {background-color: #e5e5e5;}

.x-nav-tabs>li>a:hover {background-color: #e5e5e5; color: #e5e5e5;}
.x-nav-tabs>.active>a, .x-nav-tabs>.active>a:hover {
background-color: #ddd;
color: #000;
}

Is something missing or should some of this be removed? I did try changing the #ddd and #000 in the last line, but that didn’t change the black background.

#4

I’m using Tab left at the moment, because when I use the other option it looks like this:

#5

Hi again,

Try adding the following CSS code in the Theme Options > CSS:

.x-tab-content {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #000 !important;
}

If you need horizontal layout perhaps you can try accordions instead, for a demo see http://demo.theme.co/integrity-1/shortcodes/accordion/

Hope this helps!

#6

Thank you, that worked! Is there a way to make all the tab title boxes the same height? As you can see from this image, it looks a little strange right now with all that grey space between the tabs and the content.

#7

Hello @CPFA,

Thanks for updating the thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

.x-nav-tabs.top>li a {
    min-height: 150px;
    display: flex;
    align-items: center;
}

Thanks.

#8

Awesome, that worked great! Thanks so much for your help and quick responses!

#9

Hi @CPFA,

Happy to hear that. Feel free to ask us again.

Thanks. :slight_smile:

#10