Linking a whole style sheet to a particular form

Hi,
I had a designer create something for me in Figma, and then I used Locofy builder to turn this into HTML and CSS so I can use it in my Anvil app. Is there a way to create a style sheet for only a single form? I know about the Roles function, and I have used that before to link a Form to a particular CSS selector, however now I have an entirely new CSS and HTML file with body, custom selectors, and many other div selectors which I wish to use only on this particular form for the time being.

I thought about using roles, but I think this is only for one particular selector and cannot be used to link a whole CSS file to a particular form. At least, I did not think of a way to do it.

Is there a better way to apply designs created outside of Anvil to one’s app?

When you create a new form in your app, one of the options should be “Custom HTML” :

You can paste your own html/css in the “html” property of this form.

1 Like

Ahh, ok, thanks. I did that and also uploaded my two CSS style sheets as assets and renamed them to index.css and global.css. However, they don’t seem to have gotten referenced by the HTML.

It is in this format:

Is that the correct file path to use or must I add „assets“ to that somewhere?

Never mind, I got it. It has to be in the /_/theme/ format, in other words:

./_/theme/global.css

2 Likes

I am interested how you solved all this! To be more specific i would like to know how you solved things like, buttons, input fields and dynamics (python script).
Do you mind sharing or screenshoting your project?

I also have some figma designs which i want to use in my anvil projects.

Hi Tobias,

I ended up adding the Anvil components to the file after I exported it from Figma/HTML. It would be nice to have a more seamless Figma/Anvil integration like how AWS Amplify offers, but that system does introduce other complexities.
I just dragged and dropped Anvil components to my form after adding the custom HTML and CSS. This puts the components at the very bottom of the form by default. However if you want more control you can try using this (Drop zones):