Custom Dynamic Classes & Styles

Wappler General How To
#1

Hey Wapplers (is that a term yet?)

I was going through George’s doc on applying styles and classes via dynamic attributes (https://docs.wappler.io/t/using-dynamic-attributes-part-3-toggling-class-based-on-condition/2882), which is awesome(!), but this part struck me:

The class that we’ve setup is error (1). Note, that this is a custom class, which you define in your own CSS and it is not something integrated in app connect. Then, select a condition when this class should be applied (2).

So what if I don’t want to use a pre-defined Bootstrap class (for example: table-danger) and want to come up with my own cool jam? Where do I go to set that up? I assume it’s under the Styles area but I’m not quite sure how to set that up. Any tips from the pros?

Thanks for reading.

:sunglasses:

#2

Hi @fatherofinvention,
You can enter any class name there, which you defined in your css file(s).

1 Like
#3

You could use the Design panel and style almost any element any way that you wish.

#4

Hey @Teodor and @brad

I am not loading any external CSS files. I am doing all of my styling in Wappler. Am I able to create a custom class within Wappler that I can reference in this class toggle rule?

#5

Yes, for now you can do this through the styles panel: https://docs.wappler.io/t/using-the-css-styles-panel/2925 by creating your own custom css file.
Soon the visual Design panel is getting a huge boost and you will be able to define classes fully visual there.

1 Like
#6

Ah, thank you sir. Not sure how I missed this doc since I’m a big believer in RTFM. I’ll give this a look and return if I have any questions on it, or will otherwise mark this as the solution.