How would I change the color of the Breadcrumbs widget?

  • Profile Image
    Asked on September 21, 2019 at 06:13 PM
    One more question. How would i change the color of the breadcrumbs?
  • Profile Image
    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,


    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;



    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;



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

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

        color: gold !important;



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

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

        background-color: purple !important;



    I have applied the CSS codes to the same Sample Form I have linked in the original threa you opened —

    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
    Answered on September 23, 2019 at 01:30 PM

    This is great! thanks for your help.