Styling alertify dialog boxes

My code is here: https://jsfiddle.net/0p71rzmv/4/

I have defined a new class of alertify dialog boxes with alertify.dialog. I would like to style these boxes, e.g., I would like the background color to be blue. I managed to modify the style of custom and error notifications of alertify but all my attempts to style my my_box boxes failed.

What are the CSS classes to modify for this ? Is there anything to change in my JS ?

<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/alertify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/alertify.min.css"></link>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/default.min.css"></link>
<style>
  .alertify-notifier .ajs-message {
      &.ajs-error {
          border: 5px solid;
          border-radius: 10px;
          background-color: #ff9999;
          border-color: red ;
      }
      &.ajs-custom {
          border: 5px solid;
          border-radius: 10px;
          background-color: #7777cc;
          border-color: blue;
      }
  }
</style>
<script>
  alertify.dialog('my_box', function factory() {
      return {
          main: function (message, onok) {
              this.setting('title', 'Confirm');
              this.setting('transition', 'fade');
              this.onok = onok;
              this.message = message;
          },
          setup: function () {
              return {
                  buttons: [
                      {
                          text: 'Yes',
                      },
                      {
                          text: 'No',
                      },
                  ],
                  options: {
                      modal: true,
                      resizeable: false,
                      maximizable: false,
                      closable: false,
                  },
                  focus: {
                      element: 1,
                  },
              };
          },
          prepare: function () {
              this.setContent(this.message);
          },
          callback: function (closeEvent) {
              if (closeEvent.index == 0) {
                  this.onok();
              }
          },
      };
  });
  $(document).ready(function () {
      alertify.notify("error", "error");
      alertify.notify("custom", "custom");
      alertify.my_box('Yes or no ?', function () {
          console.log('ok');
      });
  });
</script>

functional snippet of code:

alertify.dialog('my_box', function factory() {
  return {
    main: function(message, onok) {
      this.setting('title', 'Confirm');
      this.setting('transition', 'fade');
      this.onok = onok;
      this.message = message;
    },
    setup: function() {
      return {
        buttons: [{
            text: 'Yes',
          },
          {
            text: 'No',
          },
        ],
        options: {
          modal: true,
          resizeable: false,
          maximizable: false,
          closable: false,
        },
        focus: {
          element: 1,
        },
      };
    },
    prepare: function() {
      this.setContent(this.message);
    },
    callback: function(closeEvent) {
      if (closeEvent.index == 0) {
        this.onok();
      }
    },
  };
});
$(document).ready(function() {
  alertify.notify("error", "error");
  alertify.notify("custom", "custom");
  alertify.my_box('Yes or no ?', function() {
    console.log('ok');
  });
});

.alertify-notifier .ajs-message {
  &.ajs-error {
    border: 5px solid;
    border-radius: 10px;
    background-color: #ff9999;
    border-color: red;
  }

  &.ajs-custom {
    border: 5px solid;
    border-radius: 10px;
    background-color: #7777cc;
    border-color: blue;
  }
}

<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/alertify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/alertify.min.css">
</link>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/default.min.css">
</link>

Solution

As Rory mentioned in the comment, you can style it by CSS.

But it would be cleaner to add a custom class to your my_box to be able to distinguish them later. In the settings, add a build callback:

build:function(){
  this.elements.dialog.classList.add('my_box');
},

Then apply some styling (in this example only to the content):

.my_box > .ajs-body > .ajs-content {
  background-color: blue;
}

alertify.dialog('my_box', function factory() {
  return {
    main: function (message, onok) {
      this.setting('title', 'Confirm');
      this.setting('transition', 'fade');
      this.onok = onok;
      this.message = message;
    },
    setup: function () {
      return {
        buttons: [
          {
            text: 'Yes',
          },
          {
            text: 'No',
          },
        ],
        options: {
          modal: true,
          resizeable: false,
          maximizable: false,
          closable: false,
          className: 'my_box'
        },
        focus: {
          element: 1,
        },
      };
    },
    prepare: function () {
      this.setContent(this.message);
    },
    callback: function (closeEvent) {
      if (closeEvent.index == 0) {
        this.onok();
      }
    },
    build:function(){
      this.elements.dialog.classList.add('my_box');
    },
  };
});
$(document).ready(function () {
  //alertify.notify("error", "error");
  //alertify.notify("custom", "custom");
  alertify.my_box('Yes or no ?', function () {
    console.log('ok');
  })
});

.my_box > .ajs-body > .ajs-content {
  background-color: blue;
}

<script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/alertify.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/alertify.min.css"></link>
<link rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/alertifyjs@1.14.0/build/css/themes/default.min.css"></link>