Changing the buttons on login and signup form

Anvil Q&A
1

So I have noticed a small problem with the login and signup form. I don’t know why but for me, the login and signup buttons in the form aren’t visible. However,when I clicked on the portion where the buttons were supposed to be, I realised that they were always there. Somehow their colors got changed making them invisible. So how can I change the colors of the buttons on Login and Signup form? I am not much familiar with HTML and CSS so I need help

2

I ran into a similar problem with some of the light-gray buttons. Depending on your monitor’s display settings (brightness and contrast) and viewing angle (tilt), light gray can be indistinguishable from white. While I was able to readjust my colleague’s display, I can’t generally do that for customers. In that case, it’s necessary to adjust the app’s colors instead. That should include the colors on all “stock” forms such as log-in and sign-up.

This might be a matter of adjusting settings in the CSS file(s), but I’m no CSS expert.

3

Unfortunately I choose the Hello San Francisco theme. But then I regretted it. However, it was too late to rebuild the app so I decided to simply paste the theme.css file of material design. It worked but I don’t have options for changing theme colors even now…

4

I’ll just wait for @stucork to once again come up with the magical fix like he always does.

5

You can copy and paste components from one form to another by selecting them or their parent container and then copy and paste. This approach retains all the event handlers so the copy and pasted code will make it work right out of the box. This would help you take the San Fran themed components and paste them in to the desired themed form. Just be careful to only take only the code after the self.init_components(**properties) line so that you dont change the reference to the template.

It is quite quick to change over if you prefer the Standard template look and feel.

6

Oh, I see. But my app is pretty big with so many different containers and adjustments which took me hours.

But anyway, I just realised that I had the same problem with alerts, notifications and confirmations. So maybe changing their code in the Theme.css will fix it. As I mentioned above, I’m pretty bad with CSS

/* Component: Dialog (alert), Notification /
.modal-content, body>div[data-notify=“container”] {
border-radius: 2px;
/ 24dp */ box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2)
!important;
}

What change will I have to do here to fix it? I’ll like my buttons to be green with a white foreground if possible. Although anything will work for me as long as they are visible on my white background.

7

It depends how much you’ve changed the theme folders but:

Another way to get the material design is to checkout your project locally with git (maybe a clone rather than the actual app just in case it goes wrong).

Also checkout a blank material design app.

Open these in a local code editor.

Copy the relevant files/code from the theme folder in the material design app to your app. Then push it back to anvil.

If you’re new to git this will be a challenge.

8

copy pasting the theme.css worked well for me as well. Now I’m easily able to use the Material design. I just want to know how I can now fix this login form issue. I provided the css code for alerts and notification. I think that fixing those will also fix the login and signup form. Can you please suggest the changes I can do?

9

I figured out the solution at last. The problem wasn’t with my login form but with my buttons. Being a noob with HTML and CSS, I don’t know the exact value to change but I just changed the color of all these to black.

.anvil-role-primary-color > .btn, .btn-primary, .anvil-role-primary-color.file-loader>label {
color: black;
background-color: %color:Primary 500%;
}

.anvil-role-secondary-color > .btn, .anvil-role-secondary-color.file-loader>label {
color: black;
background-color: %color:Secondary 500%;
}

.btn-success, .btn-info, .btn-warning, .btn-danger {
color: black;
}

.anvil-role-primary-color > .btn:hover, .anvil-role-primary-color > .btn:active, .anvil-role-primary-color > .btn:focus,
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
color: black;
background-color: %color:Primary 700%;
}

.anvil-role-secondary-color > .btn:hover, .anvil-role-secondary-color > .btn:active, .anvil-role-secondary-color > .btn:focus {
color: black;
background-color: %color:Secondary 700%;
}

It made my login button appear black and hence did the job.

1 Like