I’m in the process of transitioning some of my apps to the new Material Design theme and I’m really liking the increased flexibility of new theme. I do notice though that the style parameter for a Notification no longer changes its color like it used to in the original theme. Has anyone found a way to change the Notification panel color in this new Material Design theme with either the standard style names or with the new color scheme?
Oh, sorry about that. We override notification colours in the new theme because Material Design uses the same colours for everything. (I suppose we could add an icon or something like that…)
It’s possible to customise it in the CSS - as you’re a Support Plan customer I’d suggest you drop us a line at support@anvil.works and spend a few support incidents on having us update the theme 
No worries. It’s not really important as we’re well away from any kind of production release right now. This is my first time using the new Material Design theme, so mostly I was just curious. Thanks!
Hello,
was this issue solved ? is there a workaround ?
Thank you
Edit: This advice applies to alert() message boxes, not to Notifications. Scroll down for an update about Notifications.
Yes - you can use either of two workarounds:
-
To edit the CSS of the theme (you can find it under “Assets” on the left) to set different colours for the buttons in the modal dialog, based on their Bootstrap classed (
.btn-danger, etc. This will require some quality time with your browser’s developer tools, and an understanding of CSS.) -
Don’t use the built-in alert buttons at all, and create them in Anvil. You can pass a Form (or a panel) to the
alert()function, and includeButtons on that form with customisedforegroundcolours. (I’d recommend putting theButtons in aFlowPanelwithalignset toright, to put them in the same position as the built-in dialogs.)
1 Like
I’ve tired to use
alert(alerts_buttons())
in many ways, but only got
How should i call the button from the additional form ?
Thank you
To get rid of the default OK button, do this :
return_value = alert(alert_buttons(),buttons=[])
In the click event on the alert_buttons() form you can close the alert box and return a value like this :
self.raise_event("x-close-alert",value=200)
then return_value will = 200
Does this help, or have I completely misunderstood?
2 Likes
What i’m trying to do is present a notification, for n seconds in a specific color. (red,blue,green,yellow)
right now the notification is wight, and it shows the button i created, which does not look like the screenshot attached.
So what i’m looking for is colored notification (screenshot)
https://anvil.works/doc/#notifications
Thanks for your help
Ah, yes - the appearance of notifications is different in the Material Design theme.
You can change the background colour of your notification in CSS, by adding something like this at the top of your theme.css:
body>div[data-notify="container"].alert-info {
background-color: #ceecf4;
}
And then from Python:
Notification("Here is a message", style="info").show()
Of course, using this background colour on its own might look a little strange in the Material Design theme.
If you want to use the Material Design theme, but use the default look and feel of Notifications in your app, you’ll need to remove the div[data-notify="container"] styles from everywhere in your CSS. On line 437/438 of the current default Material Design theme.css, replace:
/* Component: Dialog (alert), Notification */
.modal-content, body>div[data-notify="container"] {
with
/* Component: Dialog (alert), Notification */
.modal-content {
And then go to line 471 (the “Notifications” section), and delete the whole section.
Of course, this will leave your notifications looking a little…un-Material-Design-y. But if that’s what you really wanted, go nuts!
1 Like