How to change the font color in alertify.error using alertify.js

Question

I am using alertify.error to display error messages. I wanted to know if there is any way to change the font color for the text that is displayed inside?

Answer 1

Well, as how I see it, it's using this code to change the font color and overall font styles:

.alertify-notifier .ajs-message.ajs-error{
    color: #fff;
    background: rgba(217, 92, 92, 0,95);
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0,5);
}

So if you want to change the font color just add this to your own css:

.alertify-notifier .ajs-message.ajs-error{
    color: #yourcolor;
}

Note: Maybe the !important is needed to override the alertify css. Try without first.

Answer 2

Either update the theme you are using or override the message CSS rules, the default theme uses the following rules:

.alertify-notifier .ajs-message {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  text-align: center;
  border: solid 1px #ddd;
  border-radius: 2px;
}
.alertify-notifier .ajs-message.ajs-success {
  color: #fff;
  background: rgba(91, 189, 114, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-error {
  color: #fff;
  background: rgba(217, 92, 92, 0.95);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}
.alertify-notifier .ajs-message.ajs-warning {
  background: rgba(252, 248, 215, 0.95);
  border-color: #999;
}

To change the font color of a specific message type, override it's corresponding rule:

.alertify-notifier .ajs-message.ajs-success{
      color: blue;
}