Hey @urchindesign,
You’re referring to the outline pane items right? I think that’s where we added the class. I could look into adding some others as well. I think having one for looper consumer/providers might be nice too.
Curious on your thoughts (and yours @Misho) of adding it to the Breadcrumbs as well.
Breadcrumbs would also be nice for anything that’s hidden away.
Thanks! I’ll see what I can do there.
Forgot to follow up here: having them in the breadcrumbs as well is a great idea. Breadcrumbs are visible even if Outline tab is hidden, and/or element structure is not fully expanded.
+1 yes please
Ok, so here’s what I’m going with for now. These classes (
has-conditions
has-looper-provider
has-looper-consumer
has-custom-atts
has-element-css
has-hide-bp
has-dynamic-content
Those classes will be added to tco-crumb (Breadcrumbs) and tco-layer (Outline).
You’re welcome!
Hey @alexander,
I’ve just recently been playing with these classes on the UI style and I think I might have come across a minor bug.
So I have a Looper Provider on .is-lvl-3 and a Looper Consumer on is-lvl-4. But currently, the .has-looper-consumer and .has-looper-provider are all being applied to the parent level. Here are some screenshots which might explain better than my explanation here.
Looper Provider on is-lvl-3
Looper Consumer on is-lvl-4
Chrome Inspect on Looper Provider - is-lvl-3
Chrome Inspect on Looper Consumer - .is-lvl-4
Hopefully, this makes sense!
Got it! Fixed for the next patch.
No problem! I’ve added has-scroll-effects, has-interaction-effects, and is-effects-provider (Link child interactions is enabled)
@alexander, thanks for all the great classes. This will help a lot.
I am trying to think of a way to highlight all options simultaneously. Very often more than one is applied. For example, an element could have both Custom CSS and Interaction effects.
Unfortunately, there are ten various indicators, and things like this won’t work:
.tco-crumb.has-element-css::after {}
.tco-crumb.has-interaction-effects::after {}
...
If both are in use, only the last one will be shown. It is possible to have one more applied with the ::before pseudo elements but there are so many others.
I was hoping to place a line of small indicators above the Breadcrumb’s text, but that is not possible. I could perhaps do something for each of the classes, like border bottom for one, border top for the other, etc. That’s messy though. There is also a <span> element inside, so I have used it to solve Looper Consumer and the Provider with its own ::before and ::after.
Do you have any idea what could we do to display all indicators, even if many are applied simultaneously?
Thanks!
Did you figure something out yet?
I had been thinking about using an image sprite with positioning but I’m not sure about all the possible variations… another option would be to use JS to append a div or something.
but i haven’t though about it much… we seem to be too busy at the moment.
So we’ve discussed some rewrites to the Outline panel for performance, and we’ll probably revisit some interactions as well and potentially visual feedback. Similar to what you’re looking to do here I think it’s something we’ll implement an official solution for at some point - perhaps with the theme options reboot.
Meanwhile, I’d probably approach it with CSS variables and do something like this. You could replace 1 and 2 with copy/pasted unicode values if you wanted to use icons.
.has-element-css {
--icon-has-element-css: '1';
}
.has-interaction-effects {
--icon-has-interaction-effects: '2';
}
.tco-crumb span:before {
margin-right: 2px;
content: var(--icon-has-element-css) var(--icon-has-interaction-effects);
}
Thanks for this… seems I learn something new every day… haven’t really worked with variables like that before.
Nice!
Wouldn’t this CSS place all variable conditions to the exact same place? Maybe I am seeing something totally wrongly. 
You can put CSS variables anywhere and if they don’t exist nothing will output. The .tco-crumb span:before would try to render all the different symbols in a row, but won’t have anything to output if none of the variables are declared. It works because you only define those variables on the items that should be displaying them and it stays blank everywhere else.
@Misho @urchindesign @devinelston Have you smart people put something together yet to show these indicators in the builders?
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.