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.
    • Christoph HartC
      Christoph Hart @ustk
      last edited by

      Link Preview Image
      HISE | Scripting |

      favicon

      (docs.hise.dev)

      ustkU HISEnbergH 2 Replies Last reply Reply Quote 2
      • 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

                                17

                                Online

                                1.9k

                                Users

                                12.3k

                                Topics

                                107.1k

                                Posts