HISE Logo Forum
    • Categories
    • Register
    • Login

    ScriptEditor: better CSS styling

    Scheduled Pinned Locked Moved Feature Requests
    18 Posts 4 Posters 256 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ustkU
      ustk @Christoph Hart
      last edited by

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

      Hise made me an F5 dude, browser just suffers...

      Christoph HartC 1 Reply Last reply Reply Quote 0
      • HISEnbergH
        HISEnberg @Christoph Hart
        last edited by

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

        HISE | Scripting |

        Thanks for clarifying!!

        1 Reply Last reply Reply Quote 0
        • Christoph HartC
          Christoph Hart @ustk
          last edited by

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

          1 Reply Last reply Reply Quote 1
          • d.healeyD
            d.healey
            last edited by 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 :)

            Libre Wave - Freedom respecting instruments and effects
            My Patreon - HISE tutorials
            YouTube Channel - Public HISE tutorials

            1 Reply Last reply Reply Quote 0
            • d.healeyD
              d.healey
              last edited by

              Has the CSS debugger been removed?

              Libre Wave - Freedom respecting instruments and effects
              My Patreon - HISE tutorials
              YouTube Channel - Public HISE tutorials

              Christoph HartC 1 Reply Last reply Reply Quote 0
              • Christoph HartC
                Christoph Hart @d.healey
                last edited by

                @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.

                f93e8f90-c2fa-49e6-b379-3f899767d17a-image.png

                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.healeyD 1 Reply Last reply Reply Quote 2
                • d.healeyD
                  d.healey @Christoph Hart
                  last edited by

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

                  Libre Wave - Freedom respecting instruments and effects
                  My Patreon - HISE tutorials
                  YouTube Channel - Public HISE tutorials

                  1 Reply Last reply Reply Quote 0
                  • d.healeyD
                    d.healey
                    last edited by

                    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.

                    Libre Wave - Freedom respecting instruments and effects
                    My Patreon - HISE tutorials
                    YouTube Channel - Public HISE tutorials

                    Christoph HartC 1 Reply Last reply Reply Quote 0
                    • Christoph HartC
                      Christoph Hart @d.healey
                      last edited by 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.healeyD 1 Reply Last reply Reply Quote 0
                      • d.healeyD
                        d.healey @Christoph Hart
                        last edited by

                        @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.

                        Libre Wave - Freedom respecting instruments and effects
                        My Patreon - HISE tutorials
                        YouTube Channel - Public HISE tutorials

                        Christoph HartC 1 Reply Last reply Reply Quote 0
                        • Christoph HartC
                          Christoph Hart @d.healey
                          last edited by

                          @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.healeyD 1 Reply Last reply Reply Quote 1
                          • d.healeyD
                            d.healey @Christoph Hart
                            last edited by

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

                            Libre Wave - Freedom respecting instruments and effects
                            My Patreon - HISE tutorials
                            YouTube Channel - Public HISE tutorials

                            1 Reply Last reply Reply Quote 0
                            • d.healeyD
                              d.healey
                              last edited by

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

                              Libre Wave - Freedom respecting instruments and effects
                              My Patreon - HISE tutorials
                              YouTube Channel - Public HISE tutorials

                              1 Reply Last reply Reply Quote 1
                              • First post
                                Last post

                              14

                              Online

                              1.9k

                              Users

                              12.3k

                              Topics

                              107.1k

                              Posts