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?

it can be found here in the alertify. js website http://alertifyjs.com/notifier.html — MaxPayne999, Dec 15 '15 at 12:39

Kees Sonnema · Accepted Answer · 2016-10-24T06:31:43.717

11

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.

edited Oct 24 '16 at 06:31

answered Dec 15 '15 at 13:04

Kees Sonnema

5,759
6
51
106

1

Thank you Kees. It worked. i didnt use the !important, but it worked. Thank you very much! – MaxPayne999 Dec 16 '15 at 05:24

score 4 · Answer 2 · answered Dec 15 '15 at 13:05

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

Thank you for your help! – MaxPayne999 Dec 16 '15 at 05:29 — MaxPayne999, Dec 16 '15 at 05:29

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

2 Answers2