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

  • Profile Image
    GLtenn2019
    Asked on September 20, 2019 at 07:58 PM
  • Profile Image
    gerardw
    Answered on September 20, 2019 at 08: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 

  • Profile Image
    GLtenn2019
    Answered on September 21, 2019 at 10:43 AM

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

  • Profile Image
    Mike_G
    Answered 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.png

    1569082317zt12_11_35.png


    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.png

    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.

  • Profile Image
    GLtenn2019
    Answered on September 21, 2019 at 04: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?
  • Profile Image
    Mike_G
    Answered on September 21, 2019 at 06: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.