Setting toastr opacity?

Question

Is there any way to change it? I tried defining the toastClass as a class with opacity set to 1, but saw no changes:

.toast-style{
   opacity: 1;
}

toastr.options.toastClass = 'toast-style';

score 75 · Accepted Answer · edited May 09 '14 at 04:06

75

No JavaScript required for this. You should be able to change this in CSS using either

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

or

.toast {
    opacity: 1 !important;
}

edited May 09 '14 at 04:06

Brian Ogden

18,439
10
97
176

answered Jul 14 '13 at 14:13

John Papa

21,880
4
61
60

3

Good solution for most cases. But is it possible to do this on a per-toast-message basis? Imagine most uses of the `toastr` call on a page are fine transluscent - but if the user does that special thing, we want to show it loud and proud (opaque) and wait for them to close it. – Don Cheadle Aug 31 '16 at 21:00
4

`!important` is almost always evil – Madbreaks Sep 23 '16 at 00:02
4

Note that if the second option is used(.toast) you will lose fade in and fade out effects! The solution is the first bit of code, but if you have trouble getting this to override the default library css priority I suggest you do something like body #toast-container > div { opacity: 1; } This should allow you to maintain your fade effects and keep a bright shinning notification. – Daniel Filipe Sep 27 '18 at 14:14
Very useful for ngx-toastr package for Angular which does not work if you don't do this – boctulus Dec 30 '18 at 23:49
@DanielFilipe Thank you! I was wondering why my fade was gone when I tried to make my toastr solid... – houallet Feb 24 '19 at 03:28
We should be able to set the opacity in the `toastr.options{..}`. Depending where the toast message is displayed, it sometimes blends in with the background. I want ALL the messages 100% completely opaque - no transparency. – Stack Undefined Jun 22 '20 at 18:34

score 6 · Answer 2 · answered Jan 12 '18 at 06:17

6

#toast-container > div {
   opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
}

Test Working Example;

answered Jan 12 '18 at 06:17

Angelina

141
2
5

score 1 · Answer 3 · answered Sep 23 '16 at 00:01

I needed to do this for a single toastr so went this route:

toastr.options = {
    ... 
};

toastr.info(
    'All of my favorite singers have stolen all of my best lines',
    'The Title'
);

$('#toast-container').addClass('nopacity');

...and then...

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

score 1 · Answer 4 · answered Sep 23 '20 at 21:15

1

For those who want to decrease opacity, they can do something like this:

.toast-error { background-color: rgba(255,111,105,0.7) !important; }

answered Sep 23 '20 at 21:15

Farhad Hessari

35
1
8

score 0 · Answer 5 · answered Jan 20 '21 at 08:30

0

Copying all the CSS from "~ngx-toastr/toastr.css" into the application's styles.css file worked for me.

answered Jan 20 '21 at 08:30

Sai Sreenivas

11
3

score 0 · Answer 6 · answered Jul 24 '23 at 12:05

If u are not able to see toast notification after setting opacity ten you have to check CSS configuration in angular.json file of your project. Just like:

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

Setting toastr opacity?

6 Answers6

Linked