Make Form Tab Widgets rounded corner and change font color

  • Profile Image
    PoppiesBlooming
    Asked on August 31, 2014 at 02:05 PM
    can you tell me how to make them rounded and the yellow colour from the font? (#ffcc00) even just the colour would be fine if not rounded.
  • Profile Image
    jonathan
    Answered on August 31, 2014 at 07:16 PM

    Hi,

    Please try using this CSS code in the Form Tabs widget custom CSS option

     

    .tabs-list li{background-color: #ffcc00 !important;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 100px;

     

    }

    .tabs-list .current{background-color: #0066cc !important;

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 100px;

    }

     

     

    I tried this on a test form here http://www.jotform.me/form/42427046672455 and seems to work.

     

    Hope this help. Inform us if you need further assistance.

    Thanks!

  • Profile Image
    PoppiesBlooming
    Answered on August 31, 2014 at 07:36 PM

    is there a way to get the grey triangles to go too? This is brilliant though thank you!

  • Profile Image
    ashwin_d
    Answered on September 01, 2014 at 12:35 AM

    Hello PoppiesBlooming,

    Please add the following custom css code in your widget to hide the grey triangles:

    .tabs-list li:before {

    border-left: none !important;

    }

    .tabs-list li:after {

    border-right: none !important;

    }

    It should give you the following results:

    Please take a look at the following cloned form and see if this looks acceptable:  http://form.jotformpro.com/form/42430309478960? 

    Hope this helps.

    Do get back to us if you need any other changes.

    Thank you!