csslesstoastr

Completely remove Opacity in Toastr.js?

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

Solution

  • 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?