Form tabs with a specific style

  • Profile Image
    Asked on December 01, 2015 at 12:43 PM

    Hi support !

    I checked several postings concerning the form tabs and tried also by myself to create my own tabs based on the different informations. The tab style I want to create should look like the one I found in the following posting

    How to center the form tabs widget?

    Asked by Benflips on December 19, 2014 at 05:16 AM

    which means all tabs centered with no spacing between. It would be great, if you can give me the necessary custom css code to achive this.

    Thank you in advance for your assistance.

    Best regards



  • Profile Image
    Answered on December 01, 2015 at 02:43 PM

    I am assuming that you would like to replicate the tabs this user created for his form. To create your tabs look the same, you may try inserting the following code in the tab wizard:

    .tabs-list {
    margin-top: 12px;
    text-align: center;

    .tabs-list li {
    margin-left: 1px;
    margin-right: 1px;
    border-top: 1px solid green;
    border-left: 1px solid green;
    border-right: 1px solid green;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    .tabs-list li .liBefore {
    border: 0;

    .tabs-list li .liAfter {
    border: 0;

    .tabs-list li {
    padding: 3px 40px;

    Please let us know if this helps.

  • Profile Image
    Answered on December 03, 2015 at 09:09 AM

    Hello Victor !

    Before I´ve seen your answer, I was able to puzzle out most of the configuration possibilities to fullfill my needs by comparing different postings. Your reply gives me some more details, how to adjust the form tabs and I will try it in a 2nd step. Many thanks for this.

    BR Erwin

  • Profile Image
    Answered on December 03, 2015 at 10:32 AM

    On behalf of my colleague Victor, you are most welcome and also, thank you for motivating words. If you need any extra help in the future, always feel free to ask us.