How to change border colour in Aurelia Dialog?

Question

I have a dialog as you can see here:

<template >
      <ux-dialog >
        <ux-dialog-body>
          <div t="logbook.delete-logs">Möchten Sie alle Logbücher löschen?</div>
        </ux-dialog-body>

        <ux-dialog-footer>
          <button attach-focus="true" click.trigger="controller.cancel()" t="logbook.cancel">Abbrechen</button>
          <button click.trigger="controller.ok()" t="logbook.ok">Ok</button>
        </ux-dialog-footer>
      </ux-dialog>
</template>

and related view-model:

import { inject } from 'aurelia-dependency-injection'
import { DialogController } from 'aurelia-dialog'

@inject(DialogController)
export class DeleteLogbook {
  public controller: DialogController

  constructor (controller: DialogController) {
    this.controller = controller
  }
}

I want to change the colour of dialog's border. I want to use Aurelia concept for this purpose. Could you please tell me the solution?

Answer 1

As @Jesse suggested in his comment, you can override the styles of certain elements.

in this case, you simply add the following to your stylesheet

ux-dialog {
    border: 5px solid #fff700;
}

however one thing to note is that, if you are to load the stylesheet containing the above in your aurelia main which is very common (or in any other way before loading aurelia-dialog), you will have to add !important to your styles.

ux-dialog {
    border: 5px solid #fff700 !important;
}

it's because the actual package is been loaded after your own styles and they will naturally override yours.

however, it's better to load your styles in app or by component (such as each component having it's own stylesheet) to avoid !important in your styles