Change default element classes

When I add a referenceSelector widget to a page, the resulting client code has a drilldown of several levels before writing out the button with the nested span that will launch the function for the button. I want to be able to change or set the css class for the span within the button. I can set a class to the reference selector itself, but I need access to the button and span nested 4 levels deep in that resultant client code so I can set specific css classes and/or styles to that.
2 answers

Hi George,

Applying custom CSS to elements that are not directly targetable (not sure if that's a real word?) can be done using SASS.

Here's a link to a blog (old-ish but still valid) describing how it works:

You can set a custom class on the reference selector to apply the styling.

In the sass file you'll add something like:

.customreferenceselector {
    option {

or whatever you want to target and/or change.

Hope this helps!


Thanks for the reply,

That looks helpful, but what I really want to do is take full command of every element no matter now nested it gets. and the element I am looking for has a class that has been applied to it. I want to be able to change (better yet, set) the classes of nested elements myself at the modeller level.

Reference Selector writes out:

<div name="referenceSelector1" class="my-class">
      <span class="mendix-applied-class"></span>

I can change the value of  "my-class" .... I need to change/set the value of "mendix-applied-class" in each and every nested level of elements no matter how deep they nest. This should be simple and easy to do right in the modeller properties of each widget added by allowing access to all the properties of all the elements that will be part of the widget when it writes out to the page, but it is not for some reason.

Any ideas?