Automatic style class assignment?

[V.Anderson]

Is there a way to automatically assign classes to a component when you add it to a view?

I am finding that I spend a lot of time like this: Add component (button) > Select component > Add Class (button)

Or is there some method of working with classes/styling that does not require manually selecting them in a different way? (the “Ignition” way that is not readily apparent)

[PGriffith]

If you want to globally change all components of a certain type, then you can use theming - if you look in the installation directory for data/modules/com.inductiveautomation.perspective/themes/, there’s a readme.md file that explains the general process. It’s a somewhat advanced feature, requiring some knowledge of raw CSS, but that’s your best solution for global, static customization of components.

[V.Anderson]

Thank you! This is exactly what I was hoping to find.

Is there any documentation on themes yet?

As I am finding some odd CSS files in the system that I can’t figure out myself where they are coming from. They appear to be auto-generated, and they conflict with the theme styles. Here’s an example:

In the screenshot below my theme style (based on my best guesses from the other theme css files, has the correct selectors. But there is padding:0 from a file called PerspectiveComponents.7099e69e317255576124.css which I can’t track down why it would style the button with 0px of padding. (ie, there was padding in the component property, but it was removed, and it shouldn’t be “0xp” regardless…)

[PGriffith]

That padding: 0 is indeed coming from an automatically applied style generated by our code.
You can override by using a more specific selector, or force it with !important; see this post for more info:

(feature-2943) Perspective Accordion

you could technically override whatever CSS you want there are some issues you might run into though CSS Specificity might cause your overridden CSS to not work, you could use !important to force it, but that’s not good CSS practice. You’ll notice that for my .ia_accordionComponent__body--expanded style I had to increase my CSS specificity by adding .ia_accordionComponent__body to it so that it has a higher CSS specificity than what the original style was. Further reading on specificity can…

[V.Anderson]

@PGriffith Using !important is something I leave for emergency last ditch situations. I don’t want to start off with that unfortunately. But yes, it would work.

The padding:0px is not coming from the same sources as the padding:11px from the style props. (screenshot) This is starting to look like a bug of sorts.

[V.Anderson]

@mperkins I am fine with maintaining class changes if it’s required to allow Perspective to be improved. But I don’t want to go against best practices I have learned for many years doing web design/CSS, we are on the same page there.

This seems like a possible oversight more than anything else.