[NEW] Theming Update: Major Visual Changes in Perspective

Hi Kyle, could you provide a project export or anything like that? Also any specs on your environment would be helpful. What OS? What build? It’s hard to tell what’s going on exactly in each of these situations without the full project context… That said, here’s what I have for now until we can get some more info!

  1. Unable to replicate with the details provided. Are there any other containers involved in this layout? Embedded views? Nested containers? How tall is the coordinate container? 0.02 Y position is quite small and maybe only perceptually looking like “the top” if it’s a small size to begin with.

  2. Unable to replicate with the details provided. Again, what’s the container context of this component? If you set the slider value to 50, can you see the handle then? At 0, the handle is positioned so far left that only half of it may be showing when selected.

  3. Very odd, I’m not sure what’s going on here. Does this appear the same on existing and newly created toggle switch components since the upgrade?

  4. I think you may have included the wrong screenshot here?

  5. The new default striped-odd row background color is very subtle. is it possible that it’s simply not visible on your monitor?

  6. Unable to replicate. Project export would be helpful to diagnose.

  7. The font itself changed, not the actual size. That said, the new default font is a bit wider, so it seems larger in some contexts, like data-dense tables unfortunately.

Hi
I want to add some custom style in light.case file.
What I wonder why I should create my style with prefix of psc- ?
For example my style name is Wave-animation but if I want to access it in perspective I should use
.psc-Wave-animation in light.css.

1 Like

I will have to follow up on some of these when I have a chance to go back to 8.0.14+. At this time I had to revert back to 8.0.10 because of numerous issues we didn’t have time to address. In the meantime here are some comments.

  1. It’s just a NumericEntryField inside an XY container set to percent mode. You can see the blue outline is where it is supposed to be, but the numeric entry graphic (white box) is not inside the blue box despite it being that object.

  2. It has nothing to do wit the position of the handles. There are actually two sliders there and the other is at a non-zero/non-max value and still not showing up. It works just fine on 8.0.10 on these settings.

  3. If I drag a new toggle switch in from the Perspective Components menu it looks like this as well.

  4. Wrong picture, but my text should sum up whats happening. This isn’t specific to 8.0.14 - I see this in 8.0.10 as well. I just recreated it in 8.0.10:
    This is what I input - clicked “All Corners” then typed 5 in top left (it made them all 5):
    image
    Then hit OK and this was the result:
    image

  5. Even if the default is very subtle - why did it change the values I already had entered? It changed values I had - it shouldn’t do that. I’d have to look again if it was truly so subtle my monitor was an issue, but I have two different monitors (laptop and desktop) and they are different and I couldn’t see it on either I don’t believe.

  6. I’ll follow up with some backups in a private message.

  7. I’d have to upgrade versions again to check.

Would manual changes to the theme files possibly cause any of these? I don’t know if we made any, but I’ve noticed I need to revert to a back up theme file after downgrading back to 8.0.10 or the text styles and some other things look incorrect (seem to default to Times New Roman maybe). Rebooting the gateway appears to restore the Times New Roman and make me re-copy over the back up theme files.

@nader.chinichian Why wouldn’t you just include the style as part of an inheritable project?

Hi
I need to use some ccs code that doesn’t work inside the components style. For example position relative and margin auto doesn’t work in xy container but adding ! important keyword in css class works perfect.

Or for hover effect I need to manipulate other css property that doesn’t exist in style gui interface yet.
By adding .psc-myclass in light.css I manage to create very interesting effect.
Also the animation in style class is very limit right now and I ask IA to add a menu to add custom case code in designer for a while.
For example if I want to animate filter property there is no option unless I write my @keyframe code in light.css.

Okay, well the reason you need to use the “.psc-” prefix is to avoid potential collision between Perspective Style Class names and classes that we supply by default.

For example:
I’m using a Button component and I want to create a Style that I think describes how this primary Button should look. I name this Style “ia_button–primary”.

In this case, if we hadn’t attached the “psc-” prefix to the style class, all primary Buttons would use your Style - instead of only the ones you apply that Style Class to, because the theme-specified “ia_button–primary” class would have its values overridden by your Style Class of the same name.

3 Likes

Ray - I was able to update a gateway to 8.0.14 again and checked a few things.

'3. Toggle switches come in with no colors defined and are essentially invisible. It happens for new ones I drag on and breaks old ones that didn’t have colors specified before.
image

'5. The table appears to have NO color difference between rows. The header is also transparent now by default it seems. Intentional? Or is something wrong on my end?

'7. In tables the default size definitely is different for me. In tables where the font size was set in the rows section nothing looks any different, but when it wasn’t specified the font size is definitely bigger. The row height seems screwed up as well. Both of these have the same properties set for rows (you can see here again where it wiped out colors I had specified already which is very frustrating).
Old: imageimage
New: image image

Again, I’m not sure if maybe something is screwed up in our themes. Could you provide a clean set of files for the themes folder that I could try putting on our gateway to see if that affects things?

The files themselves might be correct, but your browser (or Designer) might be using cached resources. Please try clearing your browser cache to see if that solve the problem in a session. If so, you should also clear the Designer cache. You could also use the browser’s developer tools to inspect elements in a session to see what resources they are using.

In the following screenshot, you can see that 8.0.14 Toggle Switches should expect to have their color set by the light.css resource, and that color should be defined by a variable named “–label”. That variable is itself set by another variable: '"–neutral-90". The “–neutral-90” variable is defined as #323232. Again, if you don’t see these properties in place, but the theme files are in the expected directory, you should clear your browser cache.


Screen Shot 2020-07-14 at 8.36.12 AM
Screen Shot 2020-07-14 at 8.36.30 AM

OK, so let me make sure I am doing this right, because I’m sure I’m missing something somewhere. First, I just want to make sure you know I have the gateway running on a PC, I’m using Designer in a VM session, and I can view the client on my host PC as well as in the VM. I also have a Surface Pro laptop that I am using as a client with Chrome.

I followed the instructions at https://support.inductiveautomation.com/index.php?/Knowledgebase/Article/View/112/2/how-to-clear-client-ignition-cache-and-java-cache#clear-client-cache to clear the .ignition folder on the gateway PC and the VM where I am using designer. Do I also need to do the Java cache? I also cleared the cache from the browsing history in Chrome. I assume that is what you mean by browser cache.

After clearing all of these I notice NO changes at all in how things are presented. All the issues I’m seeing are present on every single client and designer.

It doesn’t seem to be referencing the light.css like it should though so I feel like I’m not doing something right. Is a reboot necessary after clearing .ignition?
Here are two different toggles - one had colors defined, the other is strictly default (and is invisible now). Both appear to have the boxy look instead of rounded as well.


Clearing the Ignition Cache would fix the Designer, but would have no effect on any sessions. Since you are not seeing the issues resolved on the Designer, it leads me to believe that the files are not in place as expected. I would recommend you contact support for further assistance.

You should not need to clear the Java cache.

Some of the issues like Toggle switches and tables and the top bar on popups have been fixed by deleting the whole themes folder and letting it rebuild itself, so that is good. There was definitely an issue with the theme files.

2 Likes

Hi
I try to create scroll touch effect with following code in my theme:

.psc-mySlider{
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
}
But it doesn’t effect in perspective scrollbar. Do you know what I did wrong?

is there a way to set the background color inside a tab container to transparent using theming. It appears to use the following by default. I tried to change background color in the ia_tabContainerComponent__content and that didn’t work. Not a CSS expert so I’m not sure if there needs to be something nested, but I tried a couple things and couldn’t get it to work. I’m sure I could just override container–secondary, but I’m not sure what else that will affect.

.ia_container–secondary {
background-color: var(–container);
};

image

find the .ia_tabContainerComponent__content entry in the theme files and supply the following:

background: transparent;

Doesn’t seem to work for me. My theme override is working because the border style one is taking effect, but not the background.

image

Does the tab content have a View or component within it? Could you provide a photo of the Tab Component in use with a component in place “behind” the Tab Component which you would expect to see? Based on your screenshots, it looks like you haven’t saved the changes to the theme file, OR the changes have not been picked up by the session. You might need to start a new session, or you might need to clear your browser cache if you have indeed saved the correct file.

Ok, I got it to work now. There must have been something I couldn’t see wrong with the css code because when I retyped it all back in it worked fine. Cache didn’t make a difference, but it seemed to use an old version of the file when it encountered something it didn’t like. Not sure if that makes sense.

1 Like

Were you able to capture any details in the logs? Surely something must have complained.

I’d suggest using a code editor next time to help with for realtime syntax evaluation and code completion. The theming should pick up the changes in realtime merely requiring you to refresh the page so that the updated resources are re-fetched. Using the browsers developers tools to experiment is also a good idea, and I’d highly recommend it. -Y

Yeah, I started doing that after the issues. Thank you!