-
GLtenn2019Asked on September 21, 2019 at 6:13 PM
-
Mike_G JotForm SupportReplied 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,
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-step.se-active, .se-progress-box .se-badge .se-step.se-active .se-desc {
color: gold !important;
}
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;
}
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.
-
GLtenn2019Replied on September 23, 2019 at 1:30 PM
This is great! thanks for your help.