how can I change the color of visited sections in nav-list.

Hi,

I have a wizard view but after completion of each section I need to change the color of tab/text in the nav list. How can I achieve this?

I am using orbeon forms 2016.3 version and designing forms in form builder. I tried to edit xbl component of wizard but it is not working.

I tried to edit CSS classes, but there are CSS classes like
    has-errors
    invalid
    incomplete
    not-started
    disabled
    active

And there is no existing class for visited/completed sections. Where I can add class for wizard view <li>.

 Please help me out.

Regards,
Neenu Jacob

Neenu,

I wouldn't try to modify the XBL component. This is delicate code and if you modify it you will have trouble upgrading Orbeon Forms to a newer version.

Instead, add your own CSS file:

    https://doc.orbeon.com/form-runner/styling/css.html#writing-your-own-css
    https://doc.orbeon.com/configuration/properties/form-runner.html#adding-your-own-css

And do the styling with CSS only.

Now you should be able to create a CSS rule such as:

    :not(.incomplete):not(.not-started)

or something like this without needing a new CSS class.

For Orbeon Forms 2017.2, we also plan some improvements to the wizard status:

    https://github.com/orbeon/orbeon-forms/issues/3059

Regards,

-Erik

Thank you Erik. It works!!!

Excellent, thanks for confirming!

-Erik