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 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);
    }
    


  • @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.


  • Onsen UI

    @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;
      }
    


  • @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:

    0_1470415003189_dialog.PNG

    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.


Log in to reply