Completely remove Opacity in Toastr.js?

Question

Is there a way to REMOVE completely the Transparency on Toastr.js? I tried to change the various lines on the .less files

.opacity(@opacity) {
@opacityPercent: 100; // instead of @opacity * 100;
opacity: 1; // instead of @opacity;
-ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
filter: ~"alpha(opacity=@{opacityPercent})";
     }

and every place where it stated opacity(x) where x was not 1 but it still displays opacity.

I also tried to add the following lines on my own CSS

.toast {
   opacity: 1;
}

#toast-container > div {
   opacity: 1; 
}

but i still get the semi opacity on div message display. On mouse over, the div color becomes full (no transparency). I'm trying to always have it full color (no transparency).

score 24 · Accepted Answer · edited May 25 '16 at 15:01

24

Try overriding it using !important:

.toast {
  opacity: 1 !important;
}

#toast-container > div {
  opacity: 1 !important; 
}

You can also try "inspect element" in Chrome to see which css tag is causing the opacity.

If that doesn't work, can you perhaps provide a link to your page?

edited May 25 '16 at 15:01

Mosh Feu

28,354
16
88
135

answered Dec 13 '13 at 17:58

Jervelund

617
7
13

1

Important will work. But it also depends on where you put your CSS in relation to toastr's css. The sequence is important and should be considered before using !important. – John Papa Dec 15 '13 at 14:21
1

Also, you should not edit the toastr.css but instead add your own custom css. Otherwise, when you upgrade toastr you will lose your changes to the toastr.css – John Papa Dec 15 '13 at 14:22
It did work, but fadeIn and fadeOut stopped working. – Grastveit Sep 04 '14 at 10:59
The fadeIn / fadeOut most likely makes use of opacity - this of course disables that. – Jervelund Sep 04 '14 at 13:43
2

Please, please don't use `!important`. It's very near never required and will almost always cause headaches for you or someone else in the future. – Madbreaks Sep 23 '16 at 00:03

score 5 · Answer 2 · answered Dec 13 '13 at 20:13

It Depends on What You Mean by "Remove"

If you don't want the mixin generating any CSS at all, but also don't want to remove all the mixin calls within the code, then just do this (comment out the code):

.opacity(@opacity) {
  // @opacityPercent: @opacity * 100;
  // opacity: @opacity;
  //-ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
  //filter: ~"alpha(opacity=@{opacityPercent})";
}

The above will "do nothing." If you want some type of CSS generated (for some reason, I cannot think of why), but you do not actually want to have that code apply any opacity setting in the browser, then give it a bogus value that the browsers will ignore, something like this:

.opacity(@opacity) {
  @opacityPercent: bogus;
  opacity: bogus;
  -ms-filter:  ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{opacityPercent})";
  filter: ~"alpha(opacity=@{opacityPercent})";
}

You can check out that the above generates no opacity within a browser by looking at this fiddle and examining it with an inspection tool (like Firebug, etc.).

I really believe you seek the first option however.

Mainly I'm trying to have a full color with no transparency when I display a message. This currently only happens when I put the mouse over, but the initial message (the one that is fired by toast.warning("ddd") does appear semi transparent. None of the suggested options work. It still semi transparent (: — Johnny, Dec 13 '13 at 23:34

score 3 · Answer 3 · answered Dec 23 '16 at 16:42

3

The following works with v2.1.3

#toast-container > div {
  opacity: 1;
}

With the !important flag, there would be no fadeIn and fadeOut.

answered Dec 23 '16 at 16:42

Matt McCormick

13,041
22
75
83

1

Using `!important` does break animation events even in the latest toastr, It shouldn't be recommended. – li x Jun 04 '18 at 13:11

Completely remove Opacity in Toastr.js?

3 Answers3

It Depends on What You Mean by "Remove"