Adding CSS code to Class Editor

@Norm I recall a few months ago there was some discussion about adding this functionality in the then “future”.

To recap the requirement, I find there is a missing feature which is the ability to add CSS code to the Class Editor. Currently this has to be done in a separate CSS file that has to be created, and loaded as Project Attachment in Project Settings. This works fine except that the code isn’t loaded in Edit mode and the affect of the CSS can only be seen in Preview mode. Then if you want to make a change to that code, the original file must be edited and reloaded.

If this could all be done via the Class Editor, such as using a new tab with a code entry box, it would be a big new feature.

2 Likes

yeah its still in the works.

4 Likes

If you weren’t so bloody productive and working on so many other aspects of Blocs, I would say get it out of the “works”. Good to know it’s not forgotton.

1 Like

Yeah I work on things in stages, then hop onto others when I get stuck. But if Im honest I spend about 60% of my time tracking and fixing bugs :disappointed_relieved:

I would also very much appreciate it. It would be great if you could f.e. pass an external class or css-code as a hover effect. You would have great design possibilities and it also would make a lot of brics superfluous.

2 Likes

making brics superfluous probably isn’t really what the developers want but being able to fiddle with the style.css within Blocs would really be cool…

The updated discussion in another thread made me think back to this threads idea for the Class Editor.

@Norm Are we getting any closer? :smile:

3 Likes

I would love that, I’ve put in a request awhile ago for something like this. Especially if it respected breakpoints too. :grin:

2 Likes

Yes, if it adhered to the same features as whats offered currently by the Class Editor and through the app then it would prove very effective.

1 Like

This would be another great addition indeed.

1 Like

I like this idea too, but I also like the idea of a complete (or more complete) visual toolset for classes a little more.

I started work on this, but the time consuming part is handling human error and the various ways a single class rule could be written and potentially mutated.

It’s obviously all possible, but is time better spent expanding the class editor visually as it benefits all Blocs users :thinking:

5 Likes

This feature would be awesome. While I do feel like I’m more adapted to Blocs Class Functionality, I continue to have a lot of custom CSS classes just filling up the code editor and assets on certain projects.

1 Like

@webdeersign must be busy with his RapidWeaver stuff.

Yes I also remember the boat load comment. Blocs 4 certainly improved things, was the class editor actually redesigned or just improved further with additional features?

Good to hear it will continue to get more things for all users to visually manipulate.

How does that differ from what issues a person can also unwittingly introduce to the app by dumping CSS into the Page Settings > Custom Code, with malformed input. What checks for human error does it have?

Maybe such a feature within the Class Editor could have two tabs in the input area. One as shown above to just dump in CSS for those in the know. But another for beginners to [+] add properties and values pairings line by line, with Intellisense checking to ensure they are correct. :smile:

Anyway doesn’t sound like this feature is gonna happen. So we’ll have to wait to see what other CSS properties will get included visually with the Class Editor. The boat load comment was a while ago and based upon users comments throughout the forum we are not quite there, yet.

My initial plan was to make the code input of the class editor also parse and populate the visual UI controls simultaneously, when possible.

So it was a kind of best of both words, it’s absolutely possible, but it’s also a larger task as it has potential for pitfalls from the various ways css shorthand can be used and accidentally misused.

When Blocs handles css visually, obviously we have better control over how the css is written and formatted.

As I’m sure you and the many Blocs users, well versed in CSS, are aware, the Class Editor will never be finished and the needs of users in this area, will never been satisfied.

But to round off, never say never. My response here was actually intended to let Blocs users know, I share their thoughts regarding the value of such a feature, not snub them out.

I just have two types of users to consider.

:pray:

5 Likes

Yeah makes sense.

I just figured such an area would be for instances not covered through the visual input to fill the gaps for users needs when they arise. Not bypass the visual input to manually input the same things. ;–)

Edit: To clarify it would seemingly be more intuitive to users verse the more disjointed Custom Code input for minor CSS things. A user could fill out things visually then to the same class add a few things not covered in the visual editor to the same class. If they want to dump reams of CSS then obviously the Custom Code is suited for that.

Every visual web editor ever. :laughing:

1 Like

@Norm, what about you have the code editor, end then you have some Buttons, pre populated with texts we create before. Check this work I made for a client, I propose this for my client:

https://blocs.pt/a_helpblocusers/@css-option/index.html

Then when I create the final version of the website/app it ends like this:

It could be a nice option I think, but you are the developer, is just my option…

1 Like

@Norm with this option we can add our snippets and assign them to buttons…

Take a look please.

Was something like this ever added? I’m attempting to come back to Blocs after a year or so of just doing everything by hand, and while I can add a separate CSS file and add it to the project, It would be nice to do everything in-app.

@vex

Like this?