Changing color of Wizard pattern

Changing color of Wizard pattern

  

What is the preferred way of changing the color of the Wizardpattern from the default to something else, ideally making it dynamic? More generally what is the preferred way of changing the color of widgets that have no Style Classes property?

Obviously, a shortcoming of customizing the pattern itself is that we would prefer to remain consistent with current releases of the Silk UI theme.

Hi,

The least disruptive way to do this to customize the silkui css for the wizard.

Your post doesn't mention if you want to customize the mobile or the web wizard pattern, both have different CSS attached.

Using chrome browser you can inspect the classes used by the wizard, if you copy these css and then only include the color and background-color attributes in your app's CSS they are overruled.


Regards,

Daniel

Thank you for responding, Daniël.  I started by looking at the SilkUI CSS, assuming that would be the best way.  The problem I face is that making the Wizard Pattern change color dynamically that way will require me to change the CSS directly on the element using Javascript, something I would prefer to avoid.

David Schuler wrote:

Thank you for responding, Daniël.  I started by looking at the SilkUI CSS, assuming that would be the best way.  The problem I face is that making the Wizard Pattern change color dynamically that way will require me to change the CSS directly on the element using Javascript, something I would prefer to avoid.

With dynamic you mean that color should depend on logic? 

In that case did you consider that you can apply conditional formatting in the extended properties of the widget. For property "style" you can write some condition in it's value like 

"color:" +if(<condition>, "green", "red")

Or as alternative set property "class" to a container of the wizard widget and write:

If(<condition>, "MyClass", "")

Then in the custom CSS preseed the overruled CSS with your class name (mind the space after .MyClass

.MyClass .WizardStep.ActiveTab


For example, with a three-step wizard when you're on the first step it would be red, on the second step yellow, and on the third step green.

There do not seem to be extended properties on the widget.  However, digging into the Wizard web block a little more I see that the web block itself has a Style associated with it:


save image

I may be able to do what I need to do either by using that or digging into the Javascript.

In my previous post I tried to explain that you enclose the wizard in a container.

On the container you will have the extended properties.

Got it.  Thank you.

If my answer was the solution to your problem, could you mark it as solution. That way others in the future can find this post if they have a similar problem.