How would I change the color of the Breadcrumbs widget?

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

    Assuming you didn't find any suitable color from the list of built-in themes of the Breadcrumbs widget,

    1569106166zt18 25 15 Screenshot 10

    you can also use custom CSS codes to customize the color of the widget to your preference.

    The widget has two states, active and inactive page. The color and the background color of the pages is best to be different when a page is active or inactive.

    To change the color of the text for inactive pages, please use the custom CSS codes below.

    .se-progress-box {

        color: green  !important;

    }

    1569105249zt18 33 20 Screenshot 21

    As for the background-color of the inactivate pages, please have the codes below.

    .se-progress-content .se-progress-line, .se-progress-content .se-badge .se-step {

        background-color: lightgreen !important;

    }

    1569105485zt18 36 44 Screenshot 32

    Now, for the active pages texts color, please inject the following CSS codes to your form.

    .se-progress-box .se-badge .se-step.se-active, .se-progress-box .se-badge .se-step.se-active .se-desc {

        color: gold !important;

    }

    1569105586zt18 39 13 Screenshot 43

    and, for the active pages background-color, here's what you need.

    .se-progress-box .se-badge .se-step.se-active, .se-progress-box .se-progress-line .se-progress {

        background-color: purple !important;

    }

    1569105800zt18 42 31 Screenshot 54

    I have applied the CSS codes to the same Sample Form I have linked in the original threa you opened — https://form.jotform.com/92634684244968

    On the codes above, you can change the value of the color and background-color to your own preference.

    Please give it a try and let us know if you need any further assistance.

  • GLtenn2019
    Replied on September 23, 2019 at 1:30 PM

    This is great! thanks for your help.