How to make Alert Boxes haev abt mor zing

Hi, is there a way to control that background colors of an alert box, perhaps have an icon of our choosing. Currently the alert box is a bit plain jane and blends into the underlying page a bit too much.

image

You can adjust almost any part of its styling with CSS and you can add icons too by using things like Bootstrap Icons or FontAwesome Icons directly in the relevant inputs

Here is a silly example of a toast i used

<form is="dmx-serverconnect-form" id="scf_mu_user" method="post" action="api/user-manager/user-multi-update" dmx-generator="bootstrap5" dmx-form-type="inline" dmx-multi="true" dmx-populate="scuserlist.data.queryUsers" dmx-on:success="scf_mu_user.reset();scuserlist.load();" dmx-show="switchUserEditor.checked" dmx-on:invalid="toasts1.show({message: '<span class=&quot;text-danger fw-bold&quot;>Please check your edits as there was an error, most likely one of the values already exists.</span>', title: '<span class=&quot;text-danger fw-bold&quot;><i class=&quot;fa fa-exclamation-triangle&quot;></i> User Editor</span>', subtitle: '<span class=&quot;text-danger fw-bold&quot;>ERROR</span>'})">

If invalid, it shows red bold text for the message part, the title is red and bold with a warning triagle from font awesome, and the subtitle is also red bold.

It should give you an idea of the syntax you will need

Thank you for that. I only do the simplest things in code, my web code skills are still at the embryo stage, but your hint will be useful, thanks.

1 Like

No problem at all, we all started at embryo stage, after 2 decades I am now a fetus.

2 Likes