Customise Ngx-toastr in angular 6 with typescript

Question

Hii All i am implementing Ngx-toastr in angular 6 with typescript my problem is that i can't make it beautiful as i want because i dont't know which css is override on that ngx-toastr class i wrote some css on Style.css File ngx-toastr and i want border-radius: 15px; but inner part not taking rounded corner with border-radius: 15px; I search many resource from the internet but not getting proper output and i Can't Change other toastr Because in my project something around 350+ Component i don't want to change on every file with method that's why i want to customize existing toastr CSS.

This is my Css Code

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 15px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff;
    border-image-source: linerar-gradient(red,purple) !important;
    border: 4px solid green !important;
    border-image-source: linear-gradient(red, purple) !important;
    border-image-slice: 20 !important;
}

.toast-success {
    background-color: #51a351;
}

But My Expectation is I want same as in this picture if u want to check then visit this link and click on RESET button to show toastr Click Here to visit that site

Here is my StackBlitz Code

Can you change the border to 2px solid red !important, and see whether this is something you want. — Sunny Parekh, Dec 13 '19 at 05:38
no i want some more rounded corner something like `border-radius: 15px;` — Kiran Mistry, Dec 13 '19 at 05:40
yeah that is still there. Keep the border-radius to 15px but just change the border thickness and color — Sunny Parekh, Dec 13 '19 at 05:41
but you can check inner part not rounded still it with corner i want inner part also border-radius — Kiran Mistry, Dec 13 '19 at 05:42

Kiran Mistry · Accepted Answer · 2019-12-14T11:48:39.593

After Override this CSS in your Style.css File. I was able to customize this ngx-toastr with overriding this CSS

Note: Before overrride this css please check toastr class from dev tool console or inspect the element

.toast-container {
  background-image: linear-gradient(purple,red) !important;
  border-radius: 22px !important; 
  box-shadow: -5px 8px 16px 0px rgba(0,0,0,0.3) !important;
  margin-bottom: 2px !important;
}

.toast-container .toast {
  margin: 2px !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  background-color: #fff !important;
}

.toast-success{
  background-image: none !important;
}

.toast-success::after{
  content: '\f00c' !important;
  font-family: 'FontAwesome' !important;
  position: absolute !important;
  top: 14px !important;
  left: 15px !important;
  color: #333 !important;
  font-size: 1.5em !important;
}

.toast-title{
  color: purple !important;
  font-size: 16px !important;
}

.toast-message{
  color:#8f8f8f !important;
}

What if I need to do it from a component? – eddy Jun 21 '20 at 07:11 — eddy, Jun 21 '20 at 07:11

score 1 · Answer 2 · answered Aug 05 '21 at 15:12

1

Remove White Box shadow you can use,

.toast-container .ngx-toastr {
  box-shadow: 0 0 12px #3b3b3b !important;
}

answered Aug 05 '21 at 15:12

Dolar · Answer 3 · 2019-12-13T06:16:19.953

-1

Remove "border-image-source" from the css

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 15px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff;
    border: 4px solid green !important;
}

Also you can make a custom toast as your requirement. Please follow a below link to make a custom toast.

https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts

edited Dec 13 '19 at 06:16

answered Dec 13 '19 at 06:00

Dolar

423
2
10

what is your issue? you want to make a red border around the toast? – Dolar Dec 13 '19 at 06:07
Check I have added the screenshot for you. – Dolar Dec 13 '19 at 06:17
but want gradient color on border on know this without gradient i solve this but not solving gradient color on border – Kiran Mistry Dec 13 '19 at 06:18

Customise Ngx-toastr in angular 6 with typescript

3 Answers3