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).

Answer 1

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?

Answer 2

The following works with v2.1.3

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

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

Answer 3

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.