ScriptEditor: better CSS styling
-
-
@Christoph-Hart Ok I see! It's only when using this function that it shows up with proper syntax highlighting, not with standard include...
-
@Christoph-Hart said in ScriptEditor: better CSS styling:
HISE | Scripting |
Thanks for clarifying!!
-
@ustk of course if you‘re including a script file that contains a CSS string it will still use the JS syntax highlighting.
-
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 :) -
Has the CSS debugger been removed?
-
@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. -
@Christoph-Hart Ah perfect, that's it. I was looking for it on the right-click (as per the docs).
-
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.
-
@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. -
@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.
-
@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.
-
@Christoph-Hart ah cool, I'll give it a try
-
@Christoph-Hart What's the reason we can't have both regular laf and css playing together on a single control?