In studio when you click on a button or list item there is a click image/background image or color change that happens. There also doesn't seem to be an option to change this in the element's properties panel. I assume this is changed in the style but when I try to edit the style in Studio there still doesn't seem to be a way to change this. Am I on the right track or is there now way to adjust this from within the studio?

Hi GausRoth!

For the default Button Element in Noesis, these interaction states are found within the Button Template, as 'Setters.

To access, and customise these, you can do the following:

1) Introduce a Button to the Page, and create a new Template for it by right-clicking on it, and navigating through the 'Templates' section.
(If you've already created a custom Button Template, you can enter the Template, and skip to Step 2)


Then, pick a name and location to save it to:


Once this is done, you'll automatically be placed into the Template Editor (as seen through the magenta Stage border):


2) Within the Template, navigate to the 'Interactivity' tab on the left of the application window (can also be accessed by hitting Ctrl+3).

Once there, if you head to the 'Setters' tab, you'll be able to see the out-of-the-box interaction states for the Hover and Pressed states you were looking for.

If you expand either of the current Setters, you can see the Property changes that happen when each interaction takes place.
(At this point you can hover over any Property within, and delete them if desired.)



3) If you want to add your own look to the existing interaction states, you can click on either of them, and you'll automatically be entered into a 'Recording Mode' where any changes you make to any Element in their Properties Panel, will be keyed to the interaction state you selected.



4) If you want other things other than those already there to enact changes, you can press on the '+' icon in the top right of the Setters Panel, and select what you want to trigger the change:


Then from the new Setter's Properties Panel, you can select what you want the Setter to listen, to enact a change:
Once the Setter's conditions are created, you can 'key' your Properties for it, just like in Step 3.


And that's essentially how it all works!


Further Notes:

One other thing I'll add, is that Setters are also something that can be set up in a Style.

So, if you want the look of your interactions to be driven from a Style rather than from within a Template, you can remove them from the Template, and then enter your Style, and using the method outlined in Step 4, create the Setters within it instead.

Let me know if this helps and answers what you were looking for.

- Dorian

Ah...that makes sense. Thank you!