Customization of toastr notification


Topic: Customization of toastr notification

Kneidels pro asked 6 years ago

Hi.

I found this guide very useful: https://mdbootstrap.com/docs/jquery/javascript/notifications/

What i would like to do, is have the icon customized, right now, it depends on the "flavour" of the notification  whether info/success/error etc. How can i replace that icon (which is an font-awesome element?) with my own?

also - it seems that the "click_action" only seems to work on a mobile notification environment - when in web, the toastr block just disappears when you click on it.

Thanks!


Piotr Glejzer staff answered 6 years ago

Hi,

That icon in toastr it's a background image.

So if you would like to overwrite that you have to use CSS code to do this.

You can set FA5 like that :

Example

Second question --> Yes, It disappears because it's a toast ;) If you would like to stay it you can use modals.

Best,

Piotr


Kneidels pro commented 6 years ago

Thanks Piotr.

That con change might work - thank you.

regarding closing the toastr - you know that it can stay open even  on a permanent basis, right?  but even then - when i click on it i would expect the click action, and not a close toastr action, no?


Piotr Glejzer staff commented 6 years ago

hmm, what device do you use on mobile?

We have a toastr in our icon list search and I checked that with my smartphone ( android ) and It disappeared after a few seconds. 

https://mdbootstrap.com/docs/jquery/content/icons-list/

How does it work on your smartphone? 


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.15
  • Device: All
  • Browser: All
  • OS: Win
  • Provided sample code: No
  • Provided link: No
Tags