I haven’t done anything fancy yet, just used it to change the text color in the outline view when there’s custom CSS on the relevant element.
.tco-layer.has-element-css .tco-layer-content {
color:red;
}
Have it on my todo list to figure something else out, but that’s all I’ve done so far… I’m also curious if anybody else has come up with something handy.
So, I have come upp with something that I quite like:
(you may not be able to directly copy-paste, because of the single-quotes being prettyfied here - EDITED, should now be okay.)
:root {
--icon-has-conditions: '';
--icon-has-looper-provider: '';
--icon-has-looper-consumer: '';
--icon-has-element-css: '';
--icon-has-custom-atts: '';
--icon-has-hide-bp: '';
--icon-has-dynamic-content: '';
--icon-has-scroll-effects: '';
--icon-has-interaction-effects: '';
--icon-is-effects-provider: '';
}
.has-conditions {
--icon-has-conditions: '?';
}
.has-looper-provider {
--icon-has-looper-provider: '↻';
}
.has-looper-consumer {
--icon-has-looper-consumer: '↷';
}
.has-element-css {
--icon-has-element-css: 'C';
}
.has-custom-atts {
--icon-has-custom-atts: 'A';
}
.has-hide-bp {
--icon-has-hide-bp: 'X';
}
.has-dynamic-content {
--icon-has-dynamic-content: 'D';
}
.has-scroll-effects {
--icon-has-scroll-effects: 'S';
}
.has-interaction-effects {
--icon-has-interaction-effects: 'I';
}
.is-effects-provider {
--icon-is-effects-provider: 'P';
}
.tco-layer-content:after {
content:
var(--icon-has-conditions)
var(--icon-has-looper-provider)
var(--icon-has-looper-consumer)
var(--icon-has-element-css)
var(--icon-has-custom-atts)
var(--icon-has-hide-bp)
var(--icon-has-dynamic-content)
var(--icon-has-scroll-effects)
var(--icon-has-interaction-effects)
var(--icon-is-effects-provider);
font-size: .8em;
font-weight: bold;
}
.tco-crumb span:before {
content:
var(--icon-has-conditions)
var(--icon-has-looper-provider)
var(--icon-has-looper-consumer)
var(--icon-has-element-css)
var(--icon-has-custom-atts)
var(--icon-has-hide-bp)
var(--icon-has-dynamic-content)
var(--icon-has-scroll-effects)
var(--icon-has-interaction-effects)
var(--icon-is-effects-provider);
font-weight: bold;
color:var(--c-cm-magenta);
position:absolute;
top:-1em
}Neat. Quickly trying it, it didn’t work for me (probably because I didn’t fix the right thing when adjusting for the ' issue – but I think I see what you’re doing, and it looks neat.
BTW, when you paste in here, you can highlight the text and then click the little </> button. And I think that might prevent the formatting issue…
:root {
–icon-has-conditions: '';
}Ahh… I was clicking the “quote” botton… I will edit the post above accordingly.
Here is another version with different placements of the indicators:
:root {
--icon-has-conditions: '';
--icon-has-looper-provider: '';
--icon-has-looper-consumer: '';
--icon-has-element-css: '';
--icon-has-custom-atts: '';
--icon-has-hide-bp: '';
--icon-has-dynamic-content: '';
--icon-has-scroll-effects: '';
--icon-has-interaction-effects: '';
--icon-is-effects-provider: '';
}
.has-conditions {
--icon-has-conditions: '?';
}
.has-looper-provider {
--icon-has-looper-provider: '↻';
}
.has-looper-consumer {
--icon-has-looper-consumer: '↷';
}
.has-element-css {
--icon-has-element-css: 'C';
}
.has-custom-atts {
--icon-has-custom-atts: 'A';
}
.has-hide-bp {
--icon-has-hide-bp: 'X';
}
.has-dynamic-content {
--icon-has-dynamic-content: 'D';
}
.has-scroll-effects {
--icon-has-scroll-effects: 'S';
}
.has-interaction-effects {
--icon-has-interaction-effects: 'I';
}
.is-effects-provider {
--icon-is-effects-provider: 'P';
}
.tco-layer-content span {
position: absolute;
top: -.4em;
}
.tco-layer-content span:before {
content:
var(--icon-has-conditions)
var(--icon-has-looper-provider)
var(--icon-has-looper-consumer)
var(--icon-has-element-css)
var(--icon-has-custom-atts)
var(--icon-has-hide-bp)
var(--icon-has-dynamic-content)
var(--icon-has-scroll-effects)
var(--icon-has-interaction-effects)
var(--icon-is-effects-provider);
font-size: .9em;
font-weight: bold;
position:absolute;
top: 1.1em
}
.tco-crumb span {
top: -.5em;
}
.tco-crumb span:before {
content:
var(--icon-has-conditions)
var(--icon-has-looper-provider)
var(--icon-has-looper-consumer)
var(--icon-has-element-css)
var(--icon-has-custom-atts)
var(--icon-has-hide-bp)
var(--icon-has-dynamic-content)
var(--icon-has-scroll-effects)
var(--icon-has-interaction-effects)
var(--icon-is-effects-provider);
font-weight: bold;
color:var(--c-cm-red);
position:absolute;
top: 1.1em
}Nice! I really like where you’re headed with those – thanks for sharing!
I’m not going to have time to play with them much at the moment, but I’ll circle back if I come up with anything else. (My quick ideas were to use different colors for the indicators themselves - or maybe even full-on emojis)
Looking good! Loving how this customization is evolving. 
This is brilliant… Thank you.
It’ll take some time to remember what each of the letters means but very useful!
Now if only there was a way to limit seeing these changes to specfic users
I haven’t set it up yet, but I assume this should still work… with some browsers, you can set them up to reference a local .css file, so changes you make to that file will be applied to all relevant websites.
For example, before the UI CSS options were available within Pro, I had used this method to re-arrange some stuff in the builder bars (moving the breadcrumbs around, etc).
So, that would be one way of having the little indicators show up when you’re building a site, but nobody else would see them. But of course this requires you setting it up on each machine you want to use for development…
I’ll add a class to html that goes something like tco-user-1 where 1 is the current user ID. That’s a really easy adjustment to make since the user ID is readily available. Look for it in the 4.1 cycle when we pick feature development back up.