Changing the background colour of alerts?

Anvil Q&A
1

Can somebody tell me how I can modify the properties of alert? Like changing their background colors, paddings etc?

What I’ve tried:


.alert {
background-color: black !important;
}

However, this changed the color of Notifications instead. I want to apply css to alert. Can somebody tell me how I can do it?

Thank you very much

2

figured out how to change it

.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;
  background-color: black; 
  
}

However, is it possible for me to only keep this new background color for a specific alert. Would have been great if we could have done something like

alert(role=foo)

I tried applying this role to a particular form, hoping it will work on alerts in that form but had no success.

.anvil-role-alert.modal-content body>div[data-notify="container"]{
  background-color: black !important;
}

I also tried creating a new project having a function:

def alert(self,body):
    alert(body,buttons=[],large=True)

Then I added it as a dependency to my form. But still nothing worked.

Any help will be greatly appreciated.

1 Like
4

That’s a good suggestion re adding a role to alerts. We’ll add that to our list.

As a work around you could try something like this

from anvil.js.window import document

def my_alert(*args, role=None, **kwargs):
    try:
        if role is not None:
            alert_dom = document.getElementById('alert-modal').querySelector('.modal-dialog')
            alert_dom.classList.add('anvil-role-' + role)
        return alert(*args, **kwargs)
    finally:
        if role is not None:
            alert_dom.classList.remove('anvil-role-' + role)

then adjust your css to be

.anvil-role-alert .modal-content {
  background-color: black;
}
5

Thanks for the help. However, it isn’t working. I keep getting the error

AttributeError: ‘NoneType’ object has no attribute ‘classList’

Am I doing something wrong here? Or is it a problem with my theme (Material Design)?

6

Missed a dot. Edited solution.

1 Like
7

It works perfectly now. Thanks for your help.

8

Just noticed that this feature is now officially there in Anvil. Wonderful job!

1 Like