Perspective Table: Create a Style Class that Contains Multiple Style Settings

Ignition
,
1

I understand basic style classes for perspective, but how can I create a style class that configures a table's style the way I want it regarding multiple style properties like pager style, rows -> striped settings, etc. I guess it would be changing the default table style settings, so I don't have to reconfigure the table every time I use it. I'm guessing if you can do this it would be with the advanced stylesheet.css file?

2 Likes
2

Take a look at the table.css file in the install directory (C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light\common

Any of these styles can be overwritten from the advanced stylesheet resource. The style that's used will be the last imported.

1 Like
3

I see. Thanks for the tip, that should be the info I need.

4

I knew you could override the css global variables, but I couldn't figure out where to find the names. Now that I think about it, the file directory you mentioned is obvious for where they would be.

.ia_table__body__row--even {
    background-color: var(--table-rowsEven);
}

.ia_table__body__row--odd {
    background-color: var(--table-rowsOdd);
}
1 Like
5

I just started playing with CSS recently myself, so it was fresh in my memory and I also did not know what things to overwrite at first. I did the same thing for popup headers. You can find CSS groups for various components within the subfolders for the base styles (light and dark).

You can also overwrite your own custom styles prefixing them with .psc- in the stylesheet
For example, adding fadeIn animation to one of my styles:

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.psc-EmbeddedView_Slow {
	animation: fadeIn 1.35s;
}
1 Like
6

Also, CSS Cheat Sheet - Interactive, not a PDF | HTMLCheatSheet.com

2 Likes
7

I like this website too, Keyframes.app

1 Like