New Stylesheet resource

:partying_face:

Fantastic :exploding_head:

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 :pray:

3 Likes

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.

6 Likes

Slightly disappointed it wasn't called Chad mode from the right-click menu @kgamble

/s

7 Likes

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.

We can probably blame @PGriffith :wink:

2 Likes

Chad mode would have had a name collision with my style class.

6 Likes

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.

image

image

image

Do not use dots in your class names.
A dot is a css selector, do not use it for naming!

3 Likes

We do everything we can to prevent you from naming your Style Classes in an invalid way.
Screen Shot 2022-10-14 at 7.59.13 AM

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.

6 Likes

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.

2 Likes

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?

1 Like

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.

Yes, it's a bug, and we already have a fix in development. I can't guarantee 8.1.24 because of the holidays, but it'll be in soon.

What if you're using a parent project to create several similar instances, which all use the same classes ?
Not being able to inherit the style sheet would be very frustrating, especially when you're already inheriting the style classes that go with it.

2 Likes

I'm guessing this is the bug:

Inheritable and overridable would be ideal.

My previous post was less than clear.

The bug is that the resource may not be overridden.

The impending fix allows for child projects to override the inherited resource. If your expectation is that each project should have its own, then you're free to not supply any stylesheet.css resource to the inheritable project.

The idea is to inherit the parent stylesheet with overwrite option and expose a brand new stylesheet as well for each project.
As I told it is a very special case.
We need to define some global classes in the Parent project as our library and at the same time, each project should be able to have its own class too.

3 Likes

So Nader, I think what you're saying is:

  • you want all parent project StyleSheets to be inherited by all children
  • you also want to be able to create StyleSheets in child projects where the new stylesheet resource itself doesn't override the inherited stylesheets, but are extensions of inherited stylesheets
  • if child stylesheets include styles that are defined in parent stylesheets, then the child styles should prevail.

This is definitely how I would expect these to work, which is exactly how CSS themes work at the moment. If you consider the light theme to be the parent, then your own theme extends these, and any styles defined in the light theme can be overridden in your own theme. But any that you don't override are still inherited

6 Likes

Yes exactly but when I overwrite the stylesheet and add something to it there is no way if the parent add anything new class it pass to child any more as you overwrite it

1 Like