How would I change the color of the Breadcrumbs widget?

  • Profile Image
    GLtenn2019
    Asked on September 21, 2019 at 06:13 PM
    One more question. How would i change the color of the breadcrumbs?
  • Profile Image
    Mike_G
    Answered on September 21, 2019 at 06:51 PM

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

    1569106166zt18_25_15.png

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

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

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

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

    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.

  • Profile Image
    GLtenn2019
    Answered on September 23, 2019 at 01:30 PM

    This is great! thanks for your help.