ScriptEditor: better CSS styling

[ustk]

It'd be nice to have the CSS styled a wee bit instead of this all orange/pink colour block style

Also, the collapse button isn't collapsing everything sometimes...

here it should collapse up to line 255 instead of stopping at line 207... (this is from the Modulation Matrix Tutorial snippet)

[Christoph Hart]

@ustk that‘s only if you use an inline stylesheet where it parses it as whole string. If you use a CSS file you get proper syntax highlighting.

[HISEnberg]

@Christoph-Hart Can you explain a bit further? How do you you "use" a CSS file within the HISE scripting framework?

[ustk]

@Christoph-Hart You mean like this as included file? I guess not... Or maybe when opening the css in an external editor, but the whole point of this is to use it in Hise...

[Christoph Hart]

HISE | Scripting |

(docs.hise.dev)

[ustk]

@Christoph-Hart Ok I see! It's only when using this function that it shows up with proper syntax highlighting, not with standard include...

[HISEnberg]

@Christoph-Hart said in ScriptEditor: better CSS styling:

HISE | Scripting |

Thanks for clarifying!!

[Christoph Hart]

@ustk of course if you‘re including a script file that contains a CSS string it will still use the JS syntax highlighting.

[d.healey]

I'm adding a css file within a namespace like this but I'm not seeing it available for editing in the drop down menu.

namespace MyNamespace
{
    const laf = Content.createLocalLookAndFeel();
    laf.setStyleSheet("myStyle.css");
}

Edit: Hmm if I call it style.css it shows up.

Edit2: Ah I figured it out. I was starting the css filename with the word on so it was being placed in the callbacks menu :)

[d.healey]

Has the CSS debugger been removed?

[Christoph Hart]

@d-healey which one?

I've moved the CSS debugger to sit below the component property list, but you might need to reset your workspace to see this layout.

Bonus tip: if you click on the pen button after hovering over an CSS element, you can inplace-change the CSS and update it with F5 (just like in the element inspector in any web browser). This will just recompile the CSS for this element so if you have a large project this might be faster for trying out different things in CSS.
But be aware that this is not persistent, so you need to backport the changes you made there to your CSS file later.

[d.healey]

@Christoph-Hart Ah perfect, that's it. I was looking for it on the right-click (as per the docs).

[d.healey]

Is it possible to combine regular laf and css, I thought it was now but I can't find the post about this.

Also it seems once I assign a paint routine to a panel, the css I've assigned is disabled. My use case here is to use the css to apply a shadow and draw the background of the panel, and use a paint routine to draw some text and other bits and pieces.

[Christoph Hart]

@d-healey yes you can combine CSS & laf, but just in the sense that a single LAF object can have a style sheet as well as LAF functions defined and it will pick whatever is there to render the target component. You cannot render CSS & script functions (paint routines or LAF functions) at the same time for a single component.

Note that you can use the ::before and ::after pseudo elements to add some text so if you just want to make a background panel with a header that contains the panel name, this should be doable completely within CSS.

[d.healey]

@Christoph-Hart said in ScriptEditor: better CSS styling:

You cannot render CSS & script functions (paint routines or LAF functions) at the same time for a single component.

Ah that's what I was wanting. For example with the preset browser, last time I checked, it wasn't possible to style all the buttons using css so I had to do it all with laf, even though everything else was possible with CSS.

[Christoph Hart]

@d-healey but you can do that now. Buttons are distinct elements and will pick up the css while you can style the preset browser with laf functions.

[d.healey]

@Christoph-Hart ah cool, I'll give it a try

[d.healey]

@Christoph-Hart What's the reason we can't have both regular laf and css playing together on a single control?