Changing the Form Tabs color

  • Profile Image
    jhbdc
    Asked on December 01, 2015 at 07:18 AM

    Hi all, I am trying to find out if it is possible to change the colour of my form tabs to #1c9abd? with white font?

     

  • Profile Image
    Jan
    Answered on December 01, 2015 at 10:34 AM

    You need to apply these custom CSS code on the Form Tabs widget.

    .tabs-list.default li {
    background: #1c9abd !important;
    border-top: 1px solid #1c9abd !important;
    color: #ffffff !important;
    }

    .tabs-list.default li.current {
    background: #1c9abd !important;
    border-top: 1px solid #1c9abd !important;
    color: #ffffff !important;
    }

    .tabs-list.default .liAfter, .tabs-list.default .liBefore {
    border-bottom: 28px solid #1c9abd !important;
    }

    .tabs-list.default li.current .liAfter, .tabs-list.default li.current .liBefore {
    border-bottom: 28px solid #1c9abd !important;
    }

    Please follow the steps below in order to add custom CSS on the widget:

    1. Select the Form Tabs widget and then click the "Wizard" icon.

    2. On the Form Tabs settings, please scroll down and you'll see a box where you can put custom CSS.

    3. Click the Finish button when you're done.

    Hope that helps. Thank you.

  • Profile Image
    jhbdc
    Answered on December 02, 2015 at 11:45 PM

    It worked! Thank you!

  • Profile Image
    Jan
    Answered on December 03, 2015 at 04:17 AM

    Glad to hear that it is working on your end. Let us know if you need any help. Thank you.

  • Profile Image
    SpiritofGeorgia
    Answered on December 04, 2015 at 12:45 PM

    Thank you for this! I tried all of the variation in the forum and this is the only one that worked!

    http://www.jotform.com/answers/718038-Problems-with-Form-Tab-Widget-Custom-CSS/ 

  • Profile Image
    Welvin
    Answered on December 04, 2015 at 01:46 PM

    You're welcome. Please contact us again if we can help in any way.