Johnny Johnny - 6 months ago 148
CSS Question

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

Answer

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?