Custom CSS for Form Tab Widget

  • Profile Image
    Asked on February 17, 2015 at 03:57 PM

    I can see there is a space for adding css to the forms tab widget, which I have started to do.  However, it would be great to know which pieces to actually add css to.

    For example, I've added this to the custom css:

    .tabs-list li {font-size: 13px; color: #ffffff; background-color: #666c86;}

    which gives me the look I want, however it needs some tweaks as you can see, such as having an "active" tab color, and taking out the little angles from the background.

    Any help in defining these would be great...




  • Profile Image
    Answered on February 17, 2015 at 05:58 PM

    It is quite difficult to list out the complete classes or ids for a widget. However, from the DOM inspector the following highlighted ids and classes that might help you in achieving your requirement.

    As you see the screenshot above, the active tab is having a class "current", each tab has an ID form-tab-number, etc. You can also see these elements from the developer console of the browser. Right-click on the widget and select Inspect Element to see the developer console that displays the DOM.

    I hope this information helps! Let us know if you need any further assistance. We will be happy to help.

  • Profile Image
    Answered on February 18, 2015 at 04:50 PM

    Thank you for pointing me at this.  I was able to go in and ad the correct changes I wanted to make.  It's not perfect, however it works very well!

    Many thanks

  • Profile Image
    Answered on February 18, 2015 at 06:22 PM

    On behalf of my colleague, you're welcome.

    If you require further assistance, feel free to contact us anytime.
    Best Regards.