AppBuilder Theme remove lines

Grasshopper ShapeDiver
1

Hey forum,

I would like to know if it possible to remove the contour lines from the AppBuilder.

image
image664×405 72.5 KB

I understand I need to load an theme.json file, but I couldn’t find the variable at the mantine color/theme documentation.

Also, is it possible to add breaking lines?

image
image601×464 50.6 KB

Thanks alot!

2

You can check the “Getting started” theme from this pages: Customize a theme

It includes the property for removing the border of widgets in the UI:

"Paper": {
 "defaultProps": {
  "withBorder": false
 }
}

There is no way to add separation lines at the moment. Have you considered creating different tabs, accordions or stacks for organizing your parameters?

3

Hello Mathieu!

Yes, I already done that, but the single line was our goal.

image
image261×323 6.87 KB

As I understood from the code at getting started, I need to set the ‘withborder’ inside the ‘"components": {
"AppBuilderAppShellTemplatePage":'

right?

4

I am not sure I understand your message.

What do you already do? And what do you mean by “the single line was our goal”?

If you use the “Getting started” theme, you will notice that all contour lines are removed from the UI, because the property is applied on the “Paper” element (which is used by all widgets).

If you only want to remove the contour lines from the parameters, you can do this:

“AppBuilderControlsWidgetComponent”: {
  “defaultProps”: {
    “elementPaperProps”: {
      “withBorder”: false
  }
}

https://shapediverdownloads.s3.us-east-1.amazonaws.com/themes/no_border_params.json

As I said above, separation lines are not possible at the moment.

–

We are aware that editing theme files is not user-friendly and will introduce a theme builder in the future.

5

Hey Mathieu!

It worked, thanks alot.

(When I said single line I mean like an underline between the parameters. but no worry, we can work with what is available.)

One last thing: We would like the font to be ISOCPEUR, I added the font into the theme.json but it didn’t loaded properly. Any thoughts on this issue?

Here’s the theme:

{

    "version": "1.0",

    "themeOverrides": {

        "fontFamily": "ISOCPEUR",

        "defaultRadius": "xs",

        "other": {"forceColorScheme": "light"},

        "components": {

            "AppBuilderControlsWidgetComponent": {

                "defaultProps": {

                    "elementPaperProps": {

                        "withBorder": false

                    }

                }

            }

        }

    }

}

This is how it looks at the moment:

image
image239×275 2.94 KB

6

Nevermind, I restarted my browser and it worked :slight_smile:

Thanks alot for the help. Also, thanks for appbuilder. I’m not fluent in web development at all and it’s awesome to create these interfaces within grasshopper (that I am fluent).

Keep up with the good work.

ps: would be awesome in the future to have a theme customizer in a web page or a gh definition :slight_smile: