Changing the background color of an ons.notification.confirm being created in Angular
-
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 troubleons.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); }
-
@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); }
-
@munsterlander Thanks for responding, can you please see my update?
-
@rgins16 Modifier expects specific reserved word classes and purple is not one of them. Have you tried using the word class instead of modifier?
-
@munsterlander Yes, it still does not work.
-
@rgins16 @munsterlander You can actually create your own modifiers:
If the normal component uses classes likealert-dialog
,alert-dialog-title
andalert-dialog-content
, a modifierpurple
will add the classesalert-dialog--purple
,alert-dialog-title--purple
andalert-dialog-content--purple
to the corresponding child elements..alert-dialog--purple { background-color: purple; }
-
@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.
-
@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?
-
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.
-
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.