Builder user interface suggestion

[Regnalf]

The Builder is a powerful tool when it comes to creating content, and you will realize this at the latest when you create complex content.
Unfortunately, you can quickly lose the overview when the structures become VERY complex.

This example is not as complex as the ones I have already created, and it should only serve as an illustration:

I think you can see what I want to achieve.

What is finally the best design solution is probably best asked with the community, my suggestion would be at least level deep structure-giving elements such as bar, row, grid, column, div to give a better recognizability.

Maybe not the best solution, but i hope there are suggestions from you or the community?

[marc_a]

Hi @Regnalf,

Thanks for reaching out and for your detailed explanation. I will make a feature request so it might be taken into account in the future.

Thank you.

[alexander]

Hi @Regnalf,

I saw this in our backlog and wanted to followup here. Regretfully, this isn’t something we want to implement in the outline. However, there is a way for you to customize the tool yourself with a bit of custom CSS. First, make sure the Dev Console is enabled in preferences. Then open it and switch to the UI CSS tab.

The Outline has classes for each level, so using this CSS you can shade the background of each layer:

.is-lvl-0 { --bg: rgba(0,0,0,.5); }
.is-lvl-1 { --bg: rgba(0,0,0,.3); }
.is-lvl-2 { --bg: rgba(0,0,0,.2); }
.is-lvl-3 { --bg: rgba(0,0,0,.1); }

.tco-layer .tco-layer-content:after {
  content: '';
  position: absolute;
  top: 0;
  right: -1rem;
  bottom: 0;
  left: -1rem;
  background: var(--bg);
  z-index:-1;
}

We don’t officially support changes to the UI like this but it is a nice way to make little adjustments like this.