Style the li navigation links

[TKul6]

Hi,

My application has a gray-blackish theme.
When I added the wizard control it seems that the current step is disabled and the second step is the active one (Due to the default style provided by the control).

Is there a way to provide my style to the control? (I tried to add a class attribute but it doesn't seems to work).

Thanks,
TMaster

UPDATE

I did dig a bit in the code and I think I have a solution.

according to the less file there are 5 basic colors to use.

I think it would be best if I could supply the colors according to my theme.

What do you think?

[madoar]

Currently it's not possible to modify change the style of the wizard core components (mostly the navigation bar) from outside.
The only way to modify the style of the navigation bar is by modifying the source code and then by building ng2-archwizard yourself.

The less file you've found is the right place to search for the styles for the horizontal navigation bar. If you're using the vertical layout you'll need to take a look at the less file for the vertical navigation bar, which is a different file. Changing the 5 color variables at the beginning should be enough to change the colors used in the whole navigation bar.

[ggoforth]

First, the wizard rocks and saved me a ton of time having to build it myself. Thank you! I'd like to second TMaster, would be great to be able to change the done colors to fit with a sites theme. Thanks again for all of your work!

[madoar]

I would love to enhance the possibility to style the wizard from outside the component/module.
The problem I see, and don't know how to solve, is how to pass the style from outside the component to the navigation bar.
The navigation bar is currently not visible to the developer, in addition I've done some tests a while ago where I tried to "simply" define some classes used by the navigation bar from outside. This didn't work because angular seems to automatically add some attributes to the classes to prevent problems from appearing in case a class name is used multiple times. This results in the "overwritten" classes (from outside) not to be used.

If you know of a solution to this problem, or somehow got it working please send me a message so I can add it to the demo and/or enhance ng2-archwizard to add required changes.

[avril-verhaeghen]

@madoar The "problem" with the "extra" attributes is because in Angular each component has it's own scope. This principle has been also taken in place with styling. Angular it is called encapsulation.

It's very simple to remove the encapsulation, but then you're going to have some issues with "general styling" if someone by accident uses the same CSS classes.

My thought on this is maybe give the possibility to point to a CSS file via a parameter. Or use your own encapsulation in CSS, something like:

.ng2-archwizard .steps { // your css here }

And so on. There are several options. But for me the more proper way to do this is give the possibility to load a custom css file into the component.

Just my 2 cents 😉

[madoar]

@avril-verhaeghen thanks for the information!
Can you tell me, how you would like to give the css file to the wizard component and how to apply the css file afterwards?

[avril-verhaeghen]

@madoar I'm figuring out how to do this, but as I'm thinking about it could create an HTML security issue.

See, it's easily possible to pass the location of a CSS file to a component, but then the component needs to inject that CSS file directly into the DOM. Which actually is a bad idea.

Not sure how other modules handle their styling to be able to be overwritten. If you want I can have a look at the source and make a pull-request if I find something good?

[madoar]

@avril-verhaeghen feel free to give it a go :)

[avril-verhaeghen]

@madoar ok great 👍 ! I'll give it a try 🙂

[avril-verhaeghen]

@madoar can you send me an email? I have an off-screen question about how you build it 🙂

[unaor]

joining the request to change the colors maybe through a directive?

[dominik-mrugalski]

Well... I'm using that plugin and when I set....
<wizard [disableNavigationBar]="true" navBarLocation=""> [...] </wizard>
it cause hiding navbar :) Now we can write our own navbar with proper styles ;)
It's a hack, not solution, but i hope it will be work :)