Changing the background color of an ons.notification.confirm being created in Angular

rgins16

Hello all,

I can not find any examples on how to change the entire color of a confirmation dialog that is being created in angular.

Here is my Angular code:

ons.notification.confirm({
  title: 'Is this picture appropriate?',
  buttonLabels: ['APPROVE', 'REJECT', 'CANCEL'],
  messageHTML: "<img src=" + profilePictureSource + "></img>"
})

I have tried giving the confirm dialog an id, and using the id in my CSS file to change the color. That did not work.
I have also tried setting a modifier and then defining it my CSS file. That also did not work.

Can someone show me an example of how I could change the color of this confirm dialog?

UPDATE
I have tried the following and am still having trouble

ons.notification.confirm({
  modifier: 'purple',
  title: 'Is this picture appropriate?',
  buttonLabels: ['APPROVE', 'REJECT', 'CANCEL'],
  messageHTML: "<img src=" + profilePictureSource + "></img>"
})

.purple {
 background-color: rgba(138,43,226,0.92);
}

munsterlander

@rgins16 Try using: http://components2.onsen.io/

Specifically, here is CSS to change the alert:

.alert-dialog {
 background-color: rgba(148,59,59,0.92);
}

rgins16

@munsterlander Thanks for responding, can you please see my update?

munsterlander

@rgins16 Modifier expects specific reserved word classes and purple is not one of them. Have you tried using the word class instead of modifier?

rgins16

@munsterlander Yes, it still does not work.

Fran Diox

@rgins16 @munsterlander You can actually create your own modifiers:
If the normal component uses classes like alert-dialog, alert-dialog-title and alert-dialog-content, a modifier purple will add the classes alert-dialog--purple, alert-dialog-title--purple and alert-dialog-content--purple to the corresponding child elements.

  .alert-dialog--purple {
    background-color: purple;
  }

munsterlander

@Fran-Diox Wow! Learn something new everyday with Onsen! Also, for components2, is the github the same? https://github.com/OnsenUI/onsen-css-components I was wanting to look into adding an enhancement where the changed CSS is displayed in a tab so you do not have to download the whole theme and search for what you actually changed.

rgins16

@Fran-Diox Thank you for the response.You solved my issue. However I have 2 questions:

I noticed I need to define both

alert-dialog-title--purple

and

alert-dialog-content--purple

in order to change the color for the whole dialog. I was not able to successfully use

alert-dialog--purple

to change both. Any ideas?

Additionally, how would I add a modifier for the buttons in the dialog?

rgins16

And one more thing, after defining the title and content in CSS, I am left with this coloring of the dialog:

Why is it that the very top of the dialog is not affected by the styling.

IliaSky

Additionally, how would I add a modifier for the buttons in the dialog?

You don’t need to add modifiers to every child - as long as the parent has a modifier you can create a selector using the parent.

.alert-dialog--purple ons-button {}
.alert-dialog-content--purple ons-button {}

or something similar. If for some reason the selectors are not powerful enough you can also add !important to your styles.

As for the last picture - maybe if you create a codepen with it it would be easier for us to help.