Form Tabs: How to re-style their appearance?

  • jmkinsman
    Asked on February 7, 2015 at 3: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

  • bkljaic
    Replied on February 7, 2015 at 6:19 AM

    Hi,

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

    Form Tabs: How to re style their appearance? Image 1 Screenshot 30

    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:

    Form Tabs: How to re style their appearance? Image 2 Screenshot 41

    Hope this will help.

  • Ben
    Replied on February 7, 2015 at 8: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. */
    }

    Form Tabs: How to re style their appearance? Image 1 Screenshot 40

    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 */
    }

    Form Tabs: How to re style their appearance? Image 2 Screenshot 51

    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.

    Form Tabs: How to re style their appearance? Image 3 Screenshot 62

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

  • jmkinsman
    Replied on February 7, 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

  • Sean
    Replied on February 7, 2015 at 1: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