Changing the color or build in images of components

[Cameron_Nickle]

Hi all,

I'm just trying to add a little personality to my project and I'd like to change the color of the little eyes beside the password field in perspective. Is it possible to do that?

These guys:

Thank you,

Cam

[Transistor]

If you're on > 8.1.22 you can add the override in stylesheet.css.

• In Project Browser right-click on Perspective | Styles and select Enable Advanced Stylesheet the stylesheet.
• Paste in the following:

.ia_passwordFieldComponent__visibilityIcon {
    fill: var(--success);
}

Here I've changed the default --callToAction color from the built-in themes to the "success" green. You can choose any CSS color but if you use the built-in themes it will change nicely with the theme.

https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes

[lrose]

Sure is.

Easiest way would be to change the color of the --callToAction variable in whatever theme you're using, however, that will have other effects that you may not want.

You can also create your own variable to hold the color.

The color is set with the CSS class .ia_passwordFieldComponent__visibilityIcon

I don't have a new enough version yet to have the style sheets but if you put this in the backgroundImage prop inside of the props.style for the component it will change the color to red.

}.ia_passwordFieldComponent__visibilityIcon{"fill":rgba(255,0,0,255);}{

[lrose]

@Transistor

recent version (> 8.1.15 maybe?)

8.1.22

[Transistor]

@lrose

8.1.22

I found it while you were answering. Thanks.

[Cameron_Nickle]

I should have specified that I don't know any CSS and am trying to just use the little style class system that Ignition offers

[pascal.fragnoud]

The problem with style classes is that you don't get to chose precisely what it applies to.

The suggested solution is very basic css, you'll figure it out in no time.
I recommend learning the basics if you want to make things look nice in perspective. It's really not that hard. Read about selectors and how to apply styles, then you can google the actual properties and their accepted values when you need them.

[Tim_Carlton]

To take the opposing view before calling it a week, Don't.
Use the tool as designed. Learn and use what it can do out of the box. Live in the walled garden. It is pretty here. You can be productive. You probably don't need to spend time changing the default look and feel.

(note - opinions expressed here do not necessarily represent those of my employer, the forum software company, the forum sponsor, me, or anyone really.)

[pascal.fragnoud]

I understand that staying in supported territory is preferable, but... the stylesheet is built into the designer now, and it's really not something that will break things badly.
Worst case scenario, it doesn't look like what you wanted, you delete the line, close the sheet and you're back to square one.

[aaronrai24]

To add on to this you can still use style classes in a similar way by using 'stub classes'. This allows you to still have the luxury of selecting your style class from the selector, but the liberty to add your own CSS in the stylesheet.

Create a style class that i can bind to with non-dialog properties?

Would require embedding a full CSS parser in the Java side of the application. Not impossible, but not a high priority. You could make a 'stub' style class (with no actual effects) so that it shows up in the selector, and then do all of the actual CSS authoring in the stylesheet. The big downside there is maintenance burden. I'm personally in favor of the idea of allowing arbitrary CSS editing inside a style class (with a one-way operation to convert the builder into a plain text input), but I…

As mentioned this isn't the from a maintenance standpoint and why I prefer to create custom perspective themes.