Cornerstone layer visualization and organization

[Regnalf]

I don’t know how most people feel in the Cornerstone Editor when the content structure has already grown quite large. But I still have problems finding the right level and affiliation for larger and more complex content because everything looks pretty much the same.

That’s why I played around a bit with the possibilities and gave Cornerstone a little more color. What I was missing, especially with the new feature Deactivated, was that a deactivated layer should somehow be easily recognizable as such.

Here is my test:

If you want to try it out for yourself:

add_action ('cornerstone_before_boot_app', function () {	add_action ('wp_print_styles', 'CS_admin_enqueue_cornerstone_css'); });

function CS_admin_enqueue_cornerstone_css ()
{
	wp_enqueue_style ('Cornerstone_xCSS',	 ** path to your css file **);
}

And the css file

.tco-layer[style="--lvl: 0;"] .tco-layer-content
{
	border-left: 3px solid orange;
	
}

.tco-layer:not([style="--lvl: 0;"]) .tco-layer-content-before
{
	border-left-color: rgb(200, 128, 0);
	border-left-width: 2px;
	border-left-style: solid;
}


.tco-layer[style="--lvl: 1;"] .tco-layer-content-before	{border-left-color: rgb(200, 128, 0);}
.tco-layer[style="--lvl: 2;"] .tco-layer-content-before	{border-left-color: rgb(198, 200, 0);}
.tco-layer[style="--lvl: 3;"] .tco-layer-content-before	{border-left-color: rgb(0, 200, 20);}
.tco-layer[style="--lvl: 4;"] .tco-layer-content-before	{border-left-color: rgb(0, 189, 200);}
.tco-layer[style="--lvl: 5;"] .tco-layer-content-before	{border-left-color: rgb(0, 125, 200);}
.tco-layer[style="--lvl: 6;"] .tco-layer-content-before	{border-left-color: rgb(0, 37, 255);}
.tco-layer[style="--lvl: 7;"] .tco-layer-content-before	{border-left-color: rgb(144, 0, 254);}
.tco-layer[style="--lvl: 8;"] .tco-layer-content-before	{border-left-color: rgb(212, 31, 182);}
.tco-layer[style="--lvl: 9;"] .tco-layer-content-before	{border-left-color: rgb(200, 0, 62);}
.tco-layer[style="--lvl: 10;"] .tco-layer-content-before	{border-left-color: rgb(200, 128, 0);}
.tco-layer[style="--lvl: 11;"] .tco-layer-content-before	{border-left-color: rgb(198, 200, 0);}
.tco-layer[style="--lvl: 12;"] .tco-layer-content-before	{border-left-color: rgb(0, 200, 20);}
.tco-layer[style="--lvl: 13;"] .tco-layer-content-before	{border-left-color: rgb(0, 189, 200);}
.tco-layer[style="--lvl: 14;"] .tco-layer-content-before	{border-left-color: rgb(0, 125, 200);}
.tco-layer[style="--lvl: 15;"] .tco-layer-content-before	{border-left-color: rgb(0, 37, 255);}
.tco-layer[style="--lvl: 16;"] .tco-layer-content-before	{border-left-color: rgb(144, 0, 255);}
.tco-layer[style="--lvl: 17;"] .tco-layer-content-before	{border-left-color: rgb(212, 31, 182);}
.tco-layer[style="--lvl: 18;"] .tco-layer-content-before	{border-left-color: rgb(200, 0, 62);}



.tco-layer:has(.is-eye-slash) .tco-layer-content
{
	background-color: rgb(128, 0, 0);
}    

A button for expand all, and collapse all or for a specific layer and below would also be great.

What do you think?

[charlie]

I like the idea of having layer depth more visible. I think the colors are a bit much. I like this approach I’ve seen in other apps where their are lines matching the depth.

Usually expand and collapse all are handled by clicking the expand or close caret while holding shift. Which I would I like to see in Cornerstone.

Thanks for the thoughts.

Have a great day.

[Regnalf]

Thanks for the feedback, as already written, pages and especially headers or layouts can become very complex and it’s easy to lose track. The way the structure is currently set up, it’s not so easy to use CSS to display the lines you mentioned.

By the way, is the hook I used to integrate my CSS ok, or have I overlooked something that would make it easier to integrate? I don’t want to do it in the Cornerstone Toolbox, because I have written my own plugin for it, which is easier to distribute to other sites.

[JvP]

That would be a nice improvement.

[Regnalf]

It would also be nice if container elements could be distinguished from individual elements. For example, row elements, column elements and these usually also contain individual elements.

If there was a type CSS class for this, it would help a lot with individual design.