Is there a way to customize Breadcrumbs widget to have text under each number. To look like this example.

  • GLtenn2019
    Asked on September 20, 2019 at 7:58 PM

    1569023883Breadcrumbs example Screenshot 10


  • Girish JotForm Support
    Replied on September 20, 2019 at 8:33 PM

    Yes, it may be possible to achieve this using custom CSS inside the widget.

    Please check this related thread for a suitable solution to see if it helps: https://www.jotform.com/answers/1198324-Breadcrumbs-widget 

  • GLtenn2019
    Replied on September 21, 2019 at 10:43 AM

    Thank you for your response, however, the css in the thread doesn't work. 

  • Mike_G JotForm Support
    Replied on September 21, 2019 at 12:53 PM

    I have checked the custom CSS codes my colleague in the other thread have provided and it does seem to have worked on the most recent form you have updated.

    1569082279zt12 10 19 Screenshot 10

    1569082317zt12 11 35 Screenshot 21


    To meet the requirements you showed us in your screenshot, I have completed the needed CSS codes that you will inject in the into the Custom CSS property of the Breadcrumbs widget in your form.

    .se-progress-box {

        overflow: hidden !important;

    }

    #form-tab-1 .se-desc:after {

        content: "About You";

        font-size: 10px !important;

    }

    #form-tab-2 .se-desc:after {

        content: "Income & Withholding";

        font-size: 10px !important;

    }

    #form-tab-3 .se-desc:after {

        content: "Adjustments";

        font-size: 10px !important;

    }

    #form-tab-4 .se-desc:after {

        content: "Deductions";

        font-size: 10px !important;

    }

    #form-tab-5 .se-desc:after {

        content: "Tax Credits";

        font-size: 10px !important;

    }

    #form-tab-6 .se-desc:after {

        content: "Results";

        font-size: 10px !important;

    }

    Please make sure that you click the (green) "Update Widget" button after you inject the CSS codes above.

    1569084639zt12 49 53 Screenshot 32

    The codes above is a bit different from the one in the other thread — the text below the numbers also changes its color to indicate the current page.

    Here's a link to a cloned version of your form where I have applied the changes above.

    https://form.jotform.com/92634684244968

    Feel free to contact us again anytime if you have other questions or concerns.

  • GLtenn2019
    Replied on September 21, 2019 at 4:56 PM

    Right on, you folks rock, thank you! I think i just needed to refresh my page for the new css to take effect. 

    One more question. How would i change the color of the breadcrumbs?
  • Mike_G JotForm Support
    Replied on September 21, 2019 at 6:24 PM

    You are most welcome! Refreshing the page might be required for the new style to reflect.

    As for your new concern, although related to the original concern you have posted in this thread, I have moved it to a separate thread considering it is still about another topic and also to avoid confusion.

    Here's the link to the new thread — https://www.jotform.com/answers/1973666

    Please refer to that thread if you have any follow-up question about your new concern.