Feature request: indicate presence of Custom CSS/JS

Beta
#1

Sometimes it is difficut to remember which element in your layout has Custom CSS attached to it. Did I add it to the button? Or to the Column in which the button is in? Or to the parent Row? You get the idea. It would be SUPER helpful if there was a small icon added next to each element, in the layout pane, that has custom CSS/JS.

1 Like
#2

Misho wrote some CSS for thisā€¦ but I agree that it should be a default in the builder.

.cs-layer.has-element-css > .cs-layer-content:before {
content: ā€˜*ā€™;
position: absolute;
color:hsla(101, 34%, 55%, .9)!important;
left: 0;
top: 9px;
}

When in the builder click the cog to open the settings modal. Under preferences go to ā€œCustom UI CSSā€ and add this snippet. (Each user would need to add it for themselves.)

2 Likes
#3

Would be helpful indeed.

#4

This does not work for meā€¦ Iā€™m on Pro 3.1.2, latest WordPress
EDIT: Sorry, it does work! When I copy-pasted your code, it inserted wrong quote signs around the ā€˜*ā€™
Great! Thank you!

#5

Glad to hear the CSS is working! This is part of why we added the developer CSS feature, along with that class has-element-css. We donā€™t want to introduce more colors to the UI for all users, but this is a helpful power user feature.

#6

Thank you. Not sure I agree with you that it is only useful for power users. I would not consider myself to be one, I still have to work with LOTS of trial and error. Which often leaves behind failed attempts of CSS. After turning on this feature as suggested above, I was amazed how many elements on my pages contained CSS leftoversā€¦ I would have never found them otherwise. So I do encourage you to implement this as a default, or at least to prominently document this possibility in your new doc pages.
By the way, I have adjusted the formatting of the indicator to the following, maybe some other people may find it useful as well:

.cs-layer.has-element-css > .cs-layer-content:before {
content: 'CSS';
font-size: .8em;
font-weight: bold;
transform: rotate(-90deg);
position: absolute;
color:rgb(255,128,0)!important;
left: 0;
top: 9px;
}
2 Likes