# Create a style class that i can bind to with non-dialog properties? **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [July 19, 2023, 7:20pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603 "2023-07-19T19:20:23Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [July 19, 2023, 7:20pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/1 "2023-07-19T19:20:23Z")
every class i create uses the dialog box, which is generally passable. but i need to create clasess that have CSS properties not found in the dialog box. i know can build classes in the `stylesheet.css` but i can't link to any of them in the component `props` which means my non-webdev team can't use them. how do i get around this odd limitation? ---
**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\ **Post date:** [July 19, 2023, 7:30pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/2 "2023-07-19T19:30:49Z")
Perspective allows you to create styles: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/4/e431caf485a8028e16275b06c9eb663d1834a0fe.png) Those can be added to a component in the designer: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4ff5a872e471209281a05a9aa95488067413f049.png) The stylesheet.css is used in case you need to override something (probably an IA style, but possibly you create a style in the list that is a stub and is actually defined here?) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/f/fff961e00822f8919bbb39514a12fcbbbad25368.png) Is that what you are looking for? ---
**Author:** ![aaronrai24](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aaronrai24/32/87248_2.png) [@aaronrai24](https://forum.inductiveautomation.com/u/aaronrai24)\ **Post date:** [July 19, 2023, 7:38pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/3 "2023-07-19T19:38:12Z")
You can apply style classes you've written in your stylesheet.css by just entering the name of your class in the component's `style classes`. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b18855cf4d6021fd240aebefa3d252f3710bbd02.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cf23eb544217fb106f05d71907fc4bd344b3f8fd.png) ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [July 19, 2023, 7:44pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/4 "2023-07-19T19:44:31Z")
@aaronrai24 this is just what i was looking for. i did not know you could just add your custom classes that way. fantastic. ###### it would be nice if they'd show up in the dropdown too, wouldn't it? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [July 19, 2023, 8:03pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/5 "2023-07-19T20:03:01Z")
> [@ian.sebryk](#): > > ###### it would be nice if they'd show up in the dropdown too, wouldn't it? 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 also don't make any decisions re: Perspective πŸ˜„ ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [July 19, 2023, 8:38pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/6 "2023-07-19T20:38:40Z")
@paul-griffith totally understand. i'm just being a whiny πŸ’©. and it's only because some of the team won't hunt for stuff if it's not in their face. so it's purely a '_make Ian's life easier_' thing. πŸ˜ƒ ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [July 20, 2023, 12:35am UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/7 "2023-07-20T00:35:43Z")
> [@paul-griffith](#): > > idea of allowing arbitrary CSS editing inside a style class For @ian.sebryk note you can actually do this already, but it's only practical for adding basic props. Inside of an existing property in the dialogue, you can end the prop with ; and then continue on and add what you want to aka css injection. Eg in the `backgroundColor` prop value, you can add: ```auto ; gap: 5px ``` This way you can add props that aren't in the dialogue which let's you still see them from the dialogue, rather than having some props in dialogue, some in css stylesheet ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [July 20, 2023, 4:25am UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/8 "2023-07-20T04:25:05Z")
> [@paul-griffith](#): > > 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. After doing this for some time, I find it’s actually a much better workflow than using the dialog editor (even considering that the editor for the Advanced Stylesheet is a little janky). ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [July 20, 2023, 1:13pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/9 "2023-07-20T13:13:39Z")
> [@nminchin](#): > > aka css injection. love it. like SQL injection from back in the day... nice. πŸ’― ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [July 31, 2023, 8:15pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/10 "2023-07-31T20:15:44Z")
> [@paul-griffith](#): > > 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. How do you make a stub style class that is in a folder structure work with the stylesheet? Is it possible? Using the root works great. For example, stub class is `shared/style-test`. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [July 31, 2023, 8:36pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/11 "2023-07-31T20:36:21Z")
CSS doesn't really have folders, so the emitted style class uses an escaped slash as the locator. So it'd be something like `.psc-shared\/style-test {` ---
**Author:** ![ian.sebryk](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ian.sebryk/32/49319_2.png) [@ian.sebryk](https://forum.inductiveautomation.com/u/ian.sebryk)\ **Post date:** [December 19, 2023, 7:09pm UTC](https://forum.inductiveautomation.com/t/create-a-style-class-that-i-can-bind-to-with-non-dialog-properties/76603/12 "2023-12-19T19:09:02Z")
i'm revisiting this mostly for my own benefit. the answer still stands. but some pointers: note the `.psc-`prefix when _ **writing** _ the class, and it's **absence** when _ **using** _ it in the box. also note that changes won't be seen until the project is **saved**. unfortunate, but apparently necessary. that's all. ciao for now. πŸ˜ƒ