I’m sorry in advance for the generic question. I’m trying to understand how to make my website look “better”.
From the straight functionality, programming side, I have that working great. But I don’t have a clue where to start to make this thing look better than like a early 2000’s square greyscale forms application.
I saw the Anvil ticketing example, but I feel like there are a lot of gaps missing in terms of how I go from A to B. I saw the intro to HTML and CSS, but I’m kind of hoping to avoid writing html from scratch. Is there a Wix.com style editor that I could use to build the html side?
The short answer is no, there’s no shortcut.
The long answer is you can do some pretty beautiful stuff relatively easily. Say, for example, you wanted to give the square edges a little rounding: just work your way through components in the theme.css (in Assets) adding a border radius at 12px, then get over to a palette generator, pick out a good one, and work it through at high contrast.
You’ll end up with high accessibility and a good clean look and feel.
There’s loads of amazing stuff you can do beyond, such as using events to add borders, backgrounds, and other styles to individual components. i.e. self.text1.border = “2px Solid”+app.theme_colours[‘My_Fave_Colour’]
(I like to set my colours as Globals to keep my code clean / colour changes easy and recommend the same to others, but that’s a personal thing and there’s probably a better way the Anvil team know of).
If you want to go further, start inspecting elements and using a live CSS editor to restyle them, then drop the code in your theme.
The real magic with Anvil is still the Python libraries. To me the look and feel stuff is still witchcraft, but I’m learning.
1 Like
Thanks! Do you know if there are any IDE’s for html/css? Even having preset color schemes to select from would be nice…
I’ve not found one yet.
On colour: https://coolors.co/
Then pop your colours into here: A11y Rocks :: Color Palette
Then you can just set up your anvil colours in the IDE and start blending until it’s just so.
Thanks! I guess my other question is, where do I actually do this in anvil? I see a ‘dashboard.html’, but I’m not sure what that is? is that my “Form1”?
Left hand side in your app, scroll down and you’ll see Theme under Services.
1 Like