Tabs color not editable

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / General Questions / Tabs color not editable

This topic is: resolved
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #44092

    Darren
    Participant

    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

    #44183

    Ben Carlo
    Keymaster

    Hey Darren,

    Welcome to the BB forums! 🙂

    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. 🙂 For now, the only way around this would be via custom CSS.

    Ben

    #44404

    Darren
    Participant

    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.

    #44534

    Ben Carlo
    Keymaster

    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! 🙂

    Ben

    #76822

    andrewpeters
    Participant

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

    #76839

    Ben Carlo
    Keymaster

    Hey Andrew,

    You can use the snippet below. 🙂

    /* 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

    #115348

    David
    Participant

    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?

    #115576

    Ben Carlo
    Keymaster

    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

    #115587

    David
    Participant

    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/

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘General Questions’ is closed to new topics and replies.