AlertController background color

Ionic Framework ionic-v3
5

Hello SigmundFroyd, and thanks for chiming in.

You’re absolutely correct, the .ios, .md .wp additions are not required. I got that from this video by Josh Morony (at the 14:00 minute mark) Basically, he suggested to add it to make you’re css file as specific as possible since the most specific CSS “wins” if there is a conflict. Therefore (as I understand it) adding that is like adding a !important for all of the subsequent styles. (Yeah… I was getting desperate)

Anyhow, to answer your question, taking the .custom-alertDanger makes the alert act the same as when I put it in the app.scss file. that is… the entire background of the page (except the alert controller background) goes red like this:
image

Also, I tried using the browser to find the style that I need to update with the idea that I could do it directly. I was able to see that using the following outside of the page-loading block:

    .alert-md .alert-message {
        background: red;
    }

almost did what I wanted as below:
image

but for ALL of the alert controllers in the application. Putting it inside of the page-loading block did nothing.

So… a step closer? I keep reading that these styles happen “outside” of the page, but I’m not sure if that means that it is possible to edit them on a per-alert basis.

EDIT: I found that using:

.alert-md .alert-wrapper {
    background-color: red;
}

did the same thing as using

$alert-md-background-color:#F35E5D;

In the variables.scss file. Again, this occurred only outside of the page-landing block, and changed all of the alerts.

EDIT 2:
I found another solution here that I still can’t make work, but seems promising. In that thread, user jeffreyCarre suggested the following:

You can add a class to the alert:

{
.., cssClass:'alert-danger'
}
in the Css:

 &.alert-danger {
    .alert-head {
      background: map-get($colors, danger);
      color: #fff;
      margin-bottom: 10px;
    }
  }

Unfortunately, I couldn’t make that work… but the &. selector seems like it might be another way to attack the problem. (more info here)