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

                            17

                            Online

                            1.9k

                            Users

                            12.3k

                            Topics

                            107.1k

                            Posts