Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: stylesheet.css
This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the Perspective node of the Project Browser, right-click the Styles node, and select "Enable Advanced Stylesheet".
Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this resource are inserted into the Perspective project in-between the theme files of the Gateway and the Named Styles of the project, creating the following hierarchy: Theming > Stylesheet > Named Styles > Inline Props.
Note that this resource is scoped only to the project it resides in - though it is supported during project inheritance - whereas the Theming files are Gateway-scoped. This allows for much finer tuning of styling for an individual project.
To disable this advanced feature, delete the resource from within the Styles directory.
Support:
While support is available for questions in regard to functionality within Perspective, is is expected that anyone using this resource have extensive background in working with CSS; support is unlikely to be able to assist in troubleshooting why CSS rules defined in this resource are or are not being applied within your project.
Amazing! Although I was getting pretty good at using @victordcq injection trick and/or adding my own CSS files. This is going to save so much time and it'll be the single place to look if I need to have custom CSS
This feature puts the advanced CSS development in your project backup which makes future support a lot easier.
I love the recent embedded SVG improvements and this CSS improvement for that reason. I like a recovery plan that is essentially restoring the backup vs needing to restore a system image or rebuild a bunch of custom backend stuff.
Really this was a huge missed opportunity by IA... I hope at least in a developer comment somewhere under the hood in Java(Kotlin) it has an homage to the original idea.
I've just tried to use this new resource (Great idea by the way!), but have noticed that the classes are automatically prefixed with "psc-", just as the inbuilt styles would be.
See below.
Easily worked around by changing the naming in the advanced css though.
We do everything we can to prevent you from naming your Style Classes in an invalid way.
Please note that all Perspective Style Classes are prefixed with psc- before use to prevent you from overwriting our built-in styles accidentally. If you create a Style Class of device-spinner, you should attach that Style Class to components with the device-spinner name, but your advanced stylesheet rule should target .psc-device-spinner.
Okay, understood. That's actually what I have and it works fine, just was not clear to me as I'm still new to Perspective (coming from Citect).
I actually didn't explicitly create a style class called device-spinner as you have screen shot, as that seemed redundant for my purpose.
The first picture I attached was a typo in my example of what doesn't work, I intended to put device-spinner without the . as an example.
I suppose what I was trying to get across was that it wasn't clear to a user such as myself that when you create a new class selector you must prefix it with psc- because in the background Perspective is tacking it on, particularly when looking at your screenshot here
So for an example of what works for anyone else attempting to use this handy new feature:
Class selector inside Advanced Style sheet: .psc-device-spinner, because psc- prefixed by Perspective.
Class applied to element: device-spinner, no prefix.
When using this in an inheritable project I noticed there is no way to override the resource or open read-only. Just wondering if this is something that should be added?
For me, it is a bug.
I think it should be one of the exceptional resources which should not be inherited, as each project needs to have its own CSS classes.
