Changing the colour of Form Tabs widget

  • Profile Image
    Asked on May 15, 2016 at 10:43 PM

    I am using the form tabs widget. How am i able to change the colour of the grey triangle sections to green as well.


    Thank you in advance.

  • Profile Image
    Answered on May 16, 2016 at 01:24 AM

    First, I would recommend trying one of our Themes for the Form Tabs widget, to see if there is one you'd like to use from our predefined themes:

    If there is no theme you like, and you still want to use custom CSS, we can do this by applying a bit of custom CSS to your form:

    .tabs-list li { background: #00FF00 !important; }
    .tabs-list li .liBefore, .tabs-list li .liAfter { border-bottom-color: #00FF00 !important; }
    .tabs-list .current .liAfter, .tabs-list .current .liBefore { border-bottom-color: #FFFFFF !important; }

    You can add this CSS to your widget by clicking on its wand-shaped icon, and then scrolling down to the Custom CSS area:

    Your form would end up looking like this, where "Inspire" is the currently selected tab:

    If you need further assistance, please let us know.