Styling css for anvil login form

Anvil Q&A
1

I have an app where there’s a standard login form for Anvil - and for some reason the title of the login is Yellow. See below:

image
image1390×398 62.7 KB

I’ve tried changing the colours in the app - but none of them are set to yellow to begin with, so it can’t be that.

I’ve added a line in the theme.css to try and override this - calling .h4: #0c2534 !important; - but that doesn’t override the “test-1.css” that’s showing in the inspection panel.

Given this is an Anvil login form it seems there is no template to edit so I could try and override it directly on the front end.

This is almost certainly something really stupid - yet it’s driving me mad as I just want to have some basic colours on the site to act as Headers, links, text or buttons without relying on the standard anvil colour scheme.

2

I style that modal all the time, buttons and all.

I vaguely remember the yellow issue. When I’m back in the office will drop you the CSS which sorts it out.

3

You could try making your own css selector as specific as the one you want to override. The !important flag should then work. Something like

h4.modal-title.alert-title {
    color: green !important;
}

(I’ve not tried this).

1 Like
4

Thanks - that has hit it. It seems strange that I’ve got to go down to this atomic level to set the colour of the title of a login form though, doesn’t it? What’s the point in having a colour scheme for the app if the first form the user sees completely disregards it?

1 Like
5

You can still use the color scheme, just change green to whatever part of the color scheme you want to use:

h4.modal-title.alert-title {
  color: %color:Primary 500%;
}
3 Likes