How is custom CSS working?

Hey everyone !

I can’t find any useful information on how to style with custom CSS a page.
I managed to dig for a class and then add custom code but it’s super painful et doesn’t show up visually in the editor. What’s the right process to handle custom styling ?

Thanks for any tips :pray:

Are you trying to style the dynamic blocks or static ones

I’m trying tu customize my navbar in this case, add radius, shadow. Also on cards I’d like to use some flex functions to style them.

I checked the template Client Portal which is the most ‘beautiful’ I found but I have no clues where they put their radiuses on card for example and style this way.

Yes, applying custom CSS at specific parts of the app can get sort of painful.

Also, you have to debug straight on the live app to see the changes on the browser while making use of the dev tools and play around with selectors and classes.

The thing is that softr HTML semantics change from one block to the other and there is yet no rule
or standard to address deep customization; however some of the custom code ‘hacks’ shared in community has been eventually implemented as core features in softr studio. Lets just hope that deeper customization of the layouts stays current in softr road map.

In my experience so far, Softr Support has readily owned up to the fact that, in its current state, to implement any custom CSS, you’d have to apply lipstick to a pig. I could be wrong, but it seems as though some newer additions to the dev team are trying to figure out how to refactor legacy issues introduced by the original developers.

@acjnas consider us a+1 for deeper customization options within the UI. It’s hard to imagine the amount of refactoring they would need to do in order to make sensible CSS customization a reality for builders.