Tabs color not editable

I have attempted to use the built in tabs but for some reason the colors are not editable. Where would I find the place to edit them directly (background is white with no place to change this).

I am sure I am missing something but the widget and colors area in customize is empty as well.

Thanks

Hey Darren,

Welcome to the BB forums! :slight_smile:

Unfortunately, we’ve no such setting for that. The only thing you can style on the Tabs module is the border-color. We like to keep things simple. If you want to have that option, feel free to head over to our User Voice Forums and add that in as a feature request. :slight_smile: For now, the only way around this would be via custom CSS.

Ben

Ben,
Thanks for the update. I guess what I am confused about is why the background is not editable in any locations. Does this mean that all tabs on any page are always white? I currently have all of my background set to black with white text everywhere else on the page and as such no white writing on the tab headers or body are visible.

Hey Darren,

That is the case. But you can always use custom CSS to style it. Try the snippet below and see if it works.

.fl-tabs .fl-tabs-panels, .fl-tabs .fl-tabs-label {
  background: #000;
  color: #FFF;
}

If you’re using the BB theme, you can place this under Theme Customizer > Code > CSS Code. Let us know how it goes! :slight_smile:

Ben

How can I set a different color for inactive versus active tabs?

Hey Andrew,

You can use the snippet below. :slight_smile:

/* Change BB active tab style */
.fl-tabs .fl-tabs-labels .fl-tab-active, .fl-tabs .fl-tabs-panel .fl-tab-active {
    background: red;
    color: black;
}

Ben

Hey Ben,

The snippet you provided changes the color of the active tab but I am wanting to accomplish the same thing Darren is. That is, to have the inactive tab itself be a different color. My page background is black and so the inactive tabs are also black. With or without the snippet above the default color is white. I am fine with white however, I would look the inactive tab to be a dark gray.

What CSS could I use for the inactive tab?

Hey David,

The CSS code I gave Darren above should work for you.

.fl-tabs .fl-tabs-panels, .fl-tabs .fl-tabs-label {
  background: #000;
  color: #FFF;
}

Is that not the case? If so, can you share the URL of the site in question so we can check?

Ben

Actually no Ben. All that does is make both tabs black with a white border. What I’m hoping to accomplish is to have an inactive tab, be a different color like a dark gray (e.g. #565656). Upon clicking it would then become the active tab and would also be the default white color. You can check out the following page:

https://www.quickpictours.com/tour/mls-1373433/