Understanding CSS, Selectors, and Specificity in Ignition Perspective

[@hrishikeshbharadwaj3991]

Hey you are super helpful buddy! This has helped a lot at many levels of understanding CSS , it isn't so easy for someone having typical Industrial Automation experience .

[@OmronOmicron]

great video nice work! Maybe you made this before the new revision came out but I have Version 8.1.23 for commercial use and it has the option to "enable advanced style sheet" when you right click the "Styles" option under "Perspective" in the "Project Browser." This then does kind of what you had in your "custom" folder in the root dir. Anyway Great information and solid explanations!! keep it up!!

[@mattaudio]

This channel is so legit. Thanks for sharing.

[@thewebpleb9534]

Oh wow, thank you for that kind compliment! I'm glad the material is helpful

[@jatinsingh3295]

Awesome!!! The information you provide is really helpful. Thank you!

[@thewebpleb9534]

Glad it was helpful!

[@mupajelingau20]

Nices guide👍🏻

[@gauravshitole748]

Hey buddy, Thanks for this it was really helpful! I just have some few questions as below. First I hope your family is good now. 1. Okay so when we use id selector in custom CSS and you assigned the domId to the button called theLastButton. Can I use the same domId to the different button to make it use same style? 2. In the dev Tools for button css I saw there under element.style there was flex: 0 34 flex property. What’s that? 3. Can you explain same for minWidth and maxWidth if possible 4. If you plan to make a video of making custom theme please let me know. I’d really like to check that out. Can we create our own theme by giving selection as ignition has light and dark? So like can we say to our theme myLight and myDark and make it that way? Thanks in advance

[@thewebpleb9534]

Hi Guarav, good questions! 1. No, I wouldn't do it that way. DOM IDs should be unique. So if you give a component a certain domId, you should never give the same one to another component. The way you would approach this is to use CSS classes, which can apply the same style to many different elements. So, for instance, you can add `my-style-class` as a style class on a Perspective component and then go to your custom CSS files in the Ignition installation location and use a class selector to style those components (ie. .psc-my-style-class { ... }). 2. This is shorthand notation for flex. Check the MDN documentation (I can't add links here) for a better explanation. 3. Can you elaborate on where you are getting minWidth and maxWidth? 4. Yes, I do have a video that is somewhat related. Yes, if you follow the Ignition docs on how to add themes (which is very simple), then you'll see your custom theme in the designer session properties. I have a video coming out soon about how to style a certain component with a class that I think might help you out. I'm also hoping to create a video on just themes in the future, so stay tuned!

[@subber100]

Do u still use your dell XPS 8940?

[@thewebpleb9534]

Yes, pretty much every day. Still solid

[@subber100]

@@thewebpleb9534 oh nice