Overview / summary of CCS Styles as code listing

My wish would be to be able to see at first glance which CSS commands are currently being applied to an element, e.g. in the “Advanced” area.
This way, experienced users can immediately grasp what styles have been applied to complex layouts.

Something like Breakdance may be? You click on a button and it shows all the edited properties for a block.

Brakedance has no tabs like in Cwicly, if I remember correctly. Because it is certainly not a function for every user, I thought of a field in the tab “Advanced” in the area thats currently labeled “Custom CSS”. This renaming as “CSS” or so.
There then two areas for “Generated CSS” and “Custom CSS” – just a suggestion.
This would make these two related things visually close to each other.

How practical some implementation is, usually turns out only later, during use.

These info needs to be visible/accessible regardless of which block inspector tab is currently active.

Some suggestions, feel free to add more:

  • On the bottom of each panel with the ability to resize the area horizontally
  • An icon / shortcut which triggers a pinned modal which can freely be moved and resized

Needs to be available from anywhere in an instant.

2-3 clicks to reach info which I then have to remember while making changes sounds like a cumbersome task to me.

Although it might not be related to this feature request, since I think this is a separate topic, I find this a very interesting idea.
A list which shows all modified properties at once - with the ability to make changes directly.
I think I read this somewhere else already.

Breakdance does have options wrapped under tabs. It differs from element to element. They don’t have a standard implementation. They have made it very confusing to make it simple for users. There is no fixed place to find something.

Yes. This goes as a separate request. I was confused about the request. I like @Jugibur idea. He wants an area where all the css applied from block inspector options can be seen. We make a quick modification there and that also carries over to the same property in the block inspector options. But I feel this feature will consume a lot of time of the team to be perfected.

Edit: A separate feature request for this feature. Show all modified properties by clicking a button

1 Like

Honestly, I even thought of your suggestion too, since I’m not a fan of many clicks either. I just assumed that this is rather a “nerd” feature and could irritate the actual target group of Cwicly, since the actual (real css) properties in Cwicly are as good as always hidden.

Ist this really the case? From my understanding this request is about a read-only option - which currently makes the most sense imo. Well, at least my thoughts were made based on this assumption.

Writing own CSS inside a specific block inspector area, which then transfers automatically to the block options properties, imagine this is possible at some day.

But as you already pointed out, I also think this is a very complex topic and I’m not sure if this can be implemented in a reliable working way. In the end, it needs to work vice versa, right?

Got your point.
Well, there are the global options or the role editor that are able to take care of such scenarios.

My guess is, that from all relevant/popular builders, Cwicly has one of the highest proportion of nerds.

But I also share your view that the general user shouldn’t be confused with advanced stuff which is present all the time across the editor.

Oh that would be at least my dream for the future!

I agree that it would be very complex to interpret the written CSS and to transfer it into the Cwicly input masks.
So thats the reason why for now my wish is just an overview (read-only)

This has been brought up by @yankiara in the past Spotlight.

We already received that in the form of the Quick Code editor, which even syncs the code with the UI (and vice versa), which in fact is a gigantic feature (and which hopefully will be further enhanced).

A list that shows all modified properties from the advanced panel in the block inspector (by category) would indeed add another layer of convenience and workflow improvement.
Apparently, that could easily go hand in hand with a property search functionality.
Cwicly is the tool which would require a search functionality the least, but I can see it’s highly requested.

@dranzer posted a good example above how this could be implemented.
Adding a search and a modified property list would be another step to complement the block inspector.

1 Like

Thanks for bringing it up again, @Marius. I understand that Louis is working according to his plan and vision, which is great as always. However, if these features are prioritized, the user experience will be much better.

1 Like

Agreed @dranzer.
I think the block inspector has come to a state where things like these could finally be addressed.

It wasn’t crucial, since the UI is highly efficient anyway, so I understand that it hasn’t been tackled yet as a priority.