Feature request: Show in layout if something has custom CSS

Beta
#1

In the layout tab, could there be an icon or * or something to identify elements that have custom CSS in the element CSS?
Will easily show at a glance where any code we’ve added in may be.

2 Likes
#2

I saw this in some competing builders and it is an useful feature.

#3

Interesting idea here. I’ll open a feature request so we can consider it later on. Something we are planning is a place to put your own custom CSS that loads in the builder. This way you can make little adjustments to the interface as needed. The least we could do here is add a class that is present when an element has CSS and you could target that with the custom CSS tool. For example, you could get your * with a pseudo element.

#4

Nice! It would make Styler, Stylus and other CSS Browser plugins redundant. :slight_smile::thumbsup:

One thing that is important for me is the ability to toggle on/off individual styles. For example if I need a 360px Viewport preview, I just select this style in Stylus, and I easily turn it off when I’m done previewing it.

1 Like
#5

using stylus for this (360px) have been very useful… thanks for the heads up

1 Like
#6

Gotcha, so what I’m referring to would most likely be a pretty simple textarea input in preferences. you may still need to use a browser extension if you need the flexibility to quickly toggle it from somewhere.

#7

Hey @RubberDuckers and @Misho ! Quick update here. The next beta (and consequently the 3.1.0 release) will feature a way to add custom CSS to the application under Preferences.

I’ve added a modifier class called has-element-css to the cs-layer elements used in the Layout pane. Here’s some custom CSS you can add to that preference textarea to get you in the ballpark of what you’re looking for:

.cs-layer.has-element-css > .cs-layer-content:before {
    content: '*';
    position: absolute;
    left: 2px;
    top: 0;
}

Give that a try when the next beta is out!

3 Likes
#8

Awesome! That’ll be so good, was digging around for some broken code the other day (went and left off the closing } :man_facepalming:) but wasn’t sure where or which element I’d done it on!

When you say next Beta do you mean Beta2 of the current Beta cycle?

#9

Beta2. It will be available as early as today depending on what else I can get wrapped up.