Tab placement (bottom/center) & add images to tab

  • Hi, first let me say kudos very nice plug in. I can see using this in a few places.

    I have a couple questions with which I hope you can help me. I can stumble my way around CSS/HTML/PHP, but haven’t been able to get past where I am at currently.

    Part way down this page: https://staging.getbrightswitch.com/details-2/ I am using the tabs to change the content area for the “switches/apps/connection” and I was wondering.

    1. How can move the tabs under the content area and center them across the span of the content area
    2. I’ve used some CSS to get the images under the tab titles (as a bg-img), what I would like to do is get the text to show above the title (without having to add a white buffer to the top of all the images.

    Ultimately I’d like the area to look like:
    https://goo.gl/By2Afe
    and then it would spread out with more white space when in bigger browser windows.

    Any help is greatly appreciated.

    thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Gregor Capuder

    (@capuderg)

    Hi,

    all these things can be done with CSS.

    To change the order of the divs you could use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (use the order and the flex-direction: column). And for the bg image, you could use background-position, to offset the image.

    Take care!

    Thread Starter fredthesam

    (@fredthesam)

    Thanks for the quick response, this is working great.

    Plugin Contributor Gregor Capuder

    (@capuderg)

    Hi,

    no problem ??

    Please rate our plugin here: https://www.ads-software.com/support/plugin/tabs-widget-for-page-builder/reviews/, we would really appreciate it.

    Have a nice weekend!

    Thread Starter fredthesam

    (@fredthesam)

    follow-on question re: using flex box.
    I have 2 columns in the main content container and am trying to get the content to not wrap, starts wrapping at ~780px wide. (same URL as OP: main content container has green dotted line around it, 2 columns I want next to each other are the blue and grey ones)
    I’ve been playing around with “flex-wrap: nowrap” in different places as well as trying with additional “display:inline-flex”, but can’t seem to get the right combo. Any suggestions.

    Also do you have a place to donate to the plugin?

    Plugin Contributor Gregor Capuder

    (@capuderg)

    Hi,

    we do not collect donations at this time, but I’m glad you gave us a nice review ??

    As for the flexbox and layout issue, I’m sorry, but I can’t help you here. I’m not a front-end developer (I know just a few basic stuff)…

    Take care!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Tab placement (bottom/center) & add images to tab’ is closed to new replies.