Make toastr alerts look like download alerts

Question

I would like the toastr popup to look the same as or in the immediate vicinity of Bootstrap messages. How can i do this?

Answer 1

Enable CSS for Bootstrap alerts, then change your toastClass and iconClasses values ​​in your toastr settings:

toastr.options = { toastClass: 'alert', iconClasses: { error: 'alert-error', info: 'alert-info', success: 'alert-success', warning: 'alert-warning' } }, 

Then in toastr CSS, remove the dropshadow from #toast-container > div so that it looks like this:

 #toast-container > div { width: 300px; } 

You can leave the add-on if you want, or add it to your own CSS file instead of editing toastr (perhaps best of all, just make sure yours is loaded after that).

Answer 2

To make them the same as bootstrap 3.2.0, I used a combination of the selected answer - although alert-error should be alert-danger - and this is the meaning that replaces the icons with font icons

https://gist.github.com/askehansen/9528424

To make them look exactly the same, I also

• set the opacity of the toasts to 1
• changed the color of the header and message to match the download

css

 #toast-container > div { opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); } #toast-container > .alert { background-image: none !important; } #toast-container > .alert:before { position: fixed; font-family: FontAwesome; font-size: 24px; float: left; color: #FFF; padding-right: 0.5em; margin: auto 0.5em auto -1.5em; } #toast-container > .alert-info:before { content: "\f05a"; } #toast-container > .alert-info:before, #toast-container > .alert-info { color: #31708f; } #toast-container > .alert-success:before { content: "\f00c"; } #toast-container > .alert-success:before, #toast-container > .alert-success { color: #3c763d; } #toast-container > .alert-warning:before { content: "\f06a"; } #toast-container > .alert-warning:before, #toast-container > .alert-warning { color: #8a6d3b; } #toast-container > .alert-danger:before { content: "\f071"; } #toast-container > .alert-danger:before, #toast-container > .alert-danger { color: #a94442; } 

Answer 3

This post is a little old, but I thought I would add another possible solution.

I found that the default warning color scheme of the bootstrap was a bit lighter for toastr messages. I used a custom LESS file and did the following to darken them.

 #toast-container { @darken-amount: 10%; .toast-error { background-color: darken(@brand-danger, @darken-amount); } .toast-warning { background-color: darken(@brand-warning, @darken-amount); } .toast-success { background-color: darken(@brand-success, @darken-amount); } .toast-info { background-color: darken(@brand-info, @darken-amount); } } 

In addition, you can also change the color of the text in the message:

 .toast-message { color: #000; }