Simple way to customise tabs

  • oarthus

    (@oarthus)


    5 years, 9 months ago

    Hello

    I am looking for a simple (zero code / css…) way (anf if free it’s better) to customise tabs titles in a way similar to this page:
    faq tabs
    I have tried several plugins (jet tabs, wp tabs…) but have not been able to achieve a similar result (they miss some basic options).
    Any idea on the best way to achieve this without code? Should I look for another route (forms maybe?)
    I have a long list of FAQs and want to group them by categories, accessible through tabs that don’t really look like tabs, but should display with one web page.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • tugbucket

    (@tugbucket)

    5 years, 9 months ago

    I just combined using
    https://wordpress.org/plugins/wp-expand-tabs-free/
    and
    https://wordpress.org/plugins/responsive-accordion-and-collapse/
    and it worked fine. But of course, not sure what you are really looking for when you say:

    (they miss some basic options)

    Thread Starter oarthus

    (@oarthus)

    5 years, 9 months ago

    Thanks for your help.
    I have tried WP tabs and maybe it’s me but it seems to be missing basic feautures for what I’m trying to achieve (something that behaves like tabs but does not lok like tabs).
    For instance in the tabs display option you need to choose between align left / right. I would like to align center, but no option available.
    Maybe this is available in the pro version, but not sure.

    Thanks

    Thread Starter oarthus

    (@oarthus)

    5 years, 9 months ago

    also just tried responsive accordion, but it does not allow me to achieve this

    what I like in the example is:
    Tabs are centered in the page. They look like clickable images, not tabs
    Once you click on a tab it displays the content related to each tab, without having a border around tab + content. SO it looks natural.

    So far all the tabs plugins I have tried do not seem to allow this (force to align tabs left or righ instead of center), do not allow flexibility in the tab format…

    Any suggestion welcome

    thanks

    tugbucket

    (@tugbucket)

    5 years, 9 months ago

    Yeah, you’re going to need to add some of your own CSS to make what you want happen. Not even a lot though.

    #sp-tabpro-wrapper_36.sp-tab__lay-default ul {
    border-bottom: none;
}
#sp-tabpro-wrapper_36 .sp-tab__nav {
    justify-content: space-between;
}
#sp-tabpro-wrapper_36.sp-tab__lay-default ul .sp-tab__nav-item {
    background-color: #fff;
    margin-right: 5px;
}
#sp-tabpro-wrapper_36.sp-tab__lay-default ul > li > label.sp-tab__active {
	border-color: #ccc;
}
#sp-tabpro-wrapper_36.sp-tab__lay-default ul .sp-tab__nav-item {
    margin-right: 0;
    width: calc(20% - 4px);
}
.tab_title_area:nth-child(2)::before {
    font-family: FontAwesome;
    content: "\f272";
    display: block;
    width: 100%;
    height: 50px;
    font-size: 20px;
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
}
#sp-tabpro-wrapper_36.sp-tab__lay-default .sp-tab__tab-content > .sp-tab__tab-pane {
	border: none;
}

    using the first example here: https://shapedplugin.com/demo/wp-tabs/

    That will remove the border from the whole thing, add a font awesome icon to the second tab and center the tabs. Just a rough example but it’s not a lot to customize.

    • This reply was modified 5 years, 9 months ago by tugbucket.
    Thread Starter oarthus

    (@oarthus)

    5 years, 9 months ago

    Thanks mate, you’re great. Unfortunately I have no CSS skills and not really willing to invest in learning because I already have so much on my plate. I was hoping to find a non technical solution, but it does not seem easy to find.
    At least it means I was so bad at looking for the right solution.
    The whole domain (customising the UI) is still not mature at all, as you need a plugin for every single action (or the use of CSS).
    It reminds me of what you needed to do with Windows phone, before Aplle released its first iphone: a plugin to customise the top bar, antoher one of for the footer and one for the center part.
    Then came the iphone or android, ready to use 🙂

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Simple way to customise tabs’ is closed to new replies.