How can I customize the Form Tabs widget with some CSS code?

  • Profile Image
    Asked on December 26, 2017 at 06:14 PM

    The tabs do not look good on the page. Each tab is a different length and not centered on the page. Wondering if there is some CSS to make it look better. Here is the current view:

    1514329808Screen Shot 2017-12-26 at 3.02

    Here is what I would like to see:

    1514329958Screen Shot 2017-12-26 at 3.12



  • Profile Image
    Answered on December 26, 2017 at 07:40 PM

    You may achieve something similar doing the following: 

    1. Select the theme "Electric Red" on the form tabs widget settings: 


    2. Inject the following CSS code to the widge, the option will be found under the widget settings as well: 

    ul#tabs-list .current {

        background:orange !important; 

        color: #FFFFFF;


    ul#tabs-list li {

        background: #FFFFFF !important; 

        color: #000000;

    border-top: 4px solid orange;

    width: 216px; 

        margin: 0px !important;

        padding-right: 5px;

        padding-left: 5px;

    ul#tabs-list {

        margin: 0px !important;

        padding: 0px !important;

        top: 0px;



        padding-top: 0px;

    border-top: 0px solid transparent;


    3. Increase the form's width to 1130px: 

    15143350161.gifHere is an example about how it will work: 

    Feel free to clone my form following this guide: 

    I hope this helps. 

  • Profile Image
    Answered on December 26, 2017 at 08:19 PM

    This worked great thanks!