How to change font size and tab width of Form Tabs widget

  • Profile Image
    cmsacomms
    Asked on January 28, 2016 at 10:55 PM

    Hi, I'm trying to change the font size and tab width on the widget tab using custom CSS but it is not changing anything. The reason I want to change it is I have a lot of tabs (14) for my form and want them smaller. Perhaps it is because I have overriding styles in the main CSS styles of the form but I do not know how/where I should change this so just the tab font sizes will change ...

     

     

     

     

     

  • Profile Image
    Boris
    Answered on January 29, 2016 at 07:49 AM

    The problem is caused by one of the existing CSS rules on the form, which is setting 13px font-size to all elements:

    * {
    font-family: "Metrophobic", sans-serif;
    font-size: 13px;
    }

    So even though the CSS you have used inside the widget is correct, the CSS of the form is setting the elements inside the .tabs-list li to have 13 pixels font-size. You may want to try using this CSS in the widget instead:

    .tabs-list .liContent { font-size: 8px; }

    If you also want to reduce horizontal width of the tabs, you can use a CSS rule such as this one:

    .tabs-list.tabs-list li { padding: 3px 14px; }

    The result of both of these rules would look like this:

    Let us know if you need further assistance, and we will be happy to help.