Ignition CSS selectors list

Ignition
1

Good evening.
I am trying to make some new themes with the CSS customisation.
Is there any way to have a list of the selectors that are available?
For example I would like to make custom label, or specific customisation on flex containers item, but trying with “classic” CSS selectors is not working.

Thanks for help.

2

Check the CSS files in the active theme to see which selectors you could use. For example, if you’re using the light theme, browse to the Ignition installation location and look in the themes directory that corresponds to your theme. You’ll see a bunch of CSS files, this should get you started.

If you want to provide specific examples, such as what “classic” CSS selectors you’re using, that would be helpful!

3

css is css so it should all work the same, ignition uses a lot of classes tho

4

Thanks for the reply. I am sorry I am new with CSS so maybe it’s difficult to me.
What I am trying to do is that for example using .td {
…
}

for table data customization is not working while
.t{
…
}
Is working…
Maybe what I am searching for are the css classes that ignition uses, to be able to modify them?

I took the light theme and modified some part of the CSS but I cannot find anything for labels, so I can’t understand how to provide theme styles to them.

5

.td is looking for a class named ‘td’ not the html element td

But ignition doesnt use td’s for tables. nor has a class named like that (or its not relevant to tables)

The best way to find css classes and stuff is to do it with the inspector (in chrome)
With that you can do live changes to css and classes and see what (doesnt)change

with ctrl+shift+c you can easily find the correct elements by hovering over them

image
image1146×438 55 KB

Here you see igntion did make some classes named .t and .tc
if i add a style there in the inspector i can see it live changing the column so i know where and what to add in the ccs file
image
image1267×230 30.3 KB

2 Likes
6

btw you should create a new theme file that inherits light.css and not change the light.css files as these might get overwritten on update.

1 Like
7

Thank you so much!!
You solved my problem! Didn’t known about that function in chrome. I feel really newbie.

Thank you very much.

And yes of course I am creating a new theme inheriting light.css, thank you anyway.

1 Like