What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form Tabs: How to re-style their appearance?

    Asked by jmkinsman on February 07, 2015 at 03:26 AM

    Hello,

    I have already read the other threads for this, but have been unsuccessful with having those solutions work for me. I would like to make the gray tabs smaller, change the color, remove the triangular shape, make the font smaller and change the font color. I have a feeling that I made an error when I added them to the CSS...I'm not exactly sure what colors I want yet, so just using something generic would be great and I can modify later on.

     

    Thanks!

    Jennifer

    Page URL:
    http://www.jotform.com//?formID=50368991292162#

    font color font size CSS layout form tabs
  • Profile Image

    Answered by bkljaic on February 07, 2015 at 06:19 AM

    Hi,

    Please try to use custom CSS inside the Form Tabs widget:

    Replace your code with this :

    .tabs-list li {
       font-size: 10px;
       font-weight: bold;
       color:#000000;
    }

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

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 80px;

    }

    .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: 80px;

    }
    .tabs-list li .liBefore{
    border-bottom:none!important;
    }
    .tabs-list li .liAfter{
    border-bottom:none!important;
    }

     

    On picture below is explanation of changes:

    Hope this will help.

  • Profile Image

    Answered by Ben on February 07, 2015 at 08:29 AM

    It seems to me Jennifer that you are after a complete re-design of the Form Tabs :)

    I will try to help you out as much as I can so lets see what we come up with and together with the code given by bkljaic above, I believe that we will be able to cover all angles :)

    First, when taking a look at your form: http://www.jotform.us/form/50368991292162 I see that you have already made some color changes to your tabs and when looking at the code above, there is already some code that will help you style it further.

    What I will do is a simple breakdown of the classes and options that we can use.

    .tabs-list

    - This class holds all of the tabs, so working with it we can do some changes that will affect the tabs layout.

    Under .tabs-list we have the elements holding tabs and they start from 0. So first tab has 0, second 1 and so on.

    To use this in our code, to style 2nd tab for example, we can do this:

    .tabs-list > li[data-type="1"] {
           font-weight: bold;
    }

    As we go from tab to tab, only the bold number changes. Now I have given it bold font, but anything you need can go there.

    OK, so it is good that we know how to style each tab on its own from left to right, but we can use a feature to know which tab is currently selected, to make it stand out from others.

    As mentioned above, .tabs-list .current is the class rule that we are after.

    It is good to note that each tab element ( .tabs-list > li ) holds 3 different elements that allow us to style the tabs to the smallest of details.

    These are all div elements with next classes:

    .liBefore
    .liContent
    .liAfter

    As shown above in response by bkljaic, the first and the second one are used to draw the rectangles at the ends of the tabs.

    To change their color or size, etc, we must style border, not the element, or we would not get the same effect that we are looking for. By default these are bottom borders.

    Example:

    .tabs-list div.liBefore {
         border-bottom-color: white; /* this changes the color of it */
         border-radius: 0 0 0 20px; /* This is how you can change the plain rectangle to a curved one instead. */
    }

    We can even flip the rectangle like so:

    .tabs-list div.liBefore {
         border-radius: 0 0 0 20px; /* This is how you can change the plain rectangle to a curved one instead. */
         border-top: 28px solid white; /* we change its size, state/type, color, */
         border-bottom: none; /* we neutralize the default setting showing the bottom rectangle */
    }

    I generally suggest not to use !important statement on rules unless utterly important, because it will make future styling harder to achieve, but to style currently selected tab, you will need to use it.

    Combining what is mentioned in both responses you can come to experiment with some 'exotic' styles and and up with some cool styles that you like.

    Do let us know if you have any further questions or require some assistance and we would be happy to assist.

  • Profile Image

    Answered by jmkinsman on February 07, 2015 at 10:10 AM

    Hi Ben,

    I guess it did end up being a total resdesign ;) I originally searched how to make the tabs smaller and found a thread where a woman had originally asked for that and had then gone on to get some more code from him to make the rest of the changes as well.

    http://www.jotform.com/answers/422893-Make-Form-Tab-Widgets-rounded-corner-and-change-font-color

    However, when I copied them into my tabs area, I did not have the same success. Thought maybe there was something off with the way I had pasted them into the css area.

    Thanks for your help. I'll play around with those settings.

    Jennifer

  • Profile Image

    Answered by Sean on February 07, 2015 at 01:50 PM

    Hello jmkinsman,

    When you are adding your custom code in the Inject Custom CSS area, it is recommended that you paste it at the end of the existing code. Can you try doing that to see the outcome? Looking forward to your response.


    Cheers!
    Sean