customizable?

[grauschnabel]

Hi there,

I would like to customize the time it will be shown, and I would like to a

background-color: #333; opacity: 0.9; position: absolute;
height: 100%; width: 100%; overflow: hidden; background-image: url('/assets/img/ajax-loader.gif'); background-position: center; background-repeat: no-repeat; color: black;

but it seems that the html code is always present, so I dont know where to put the styles so they move away with the flash message.

Any Ideas?

[moff]

Hi @grauschnabel!

This module is fairly new and I haven't implemented a lot of features so far. Please explain what you want to customize via CSS.

Flash messages component has this template:

<div id="flashMessages" class="flash-messages {{classes}}">
      <div class="alert flash-message {{message.cssClass}}" *ngFor='let message of messages'>
          <p>{{message.text}}</p>
      </div> 
</div>

So you can apply your CSS to these classes in your application CSS.

You wrote:

I dont know where to put the styles so they move away with the flash message.

What do you mean by that?

Also you wrote:

I would like to customize the time it will be shown

I'll implement this feature ASAP.

Thanks for your feedback and feature request!

[grauschnabel]

I saw this templat and i thin if you put a ngIf in the outer div, this could work.. I like my flash messages to gray out the rest of the page for a moment, but if i do a gray out with the flash-messages class or maybe the flash-message class, it will be always grayed it. The ngIf would remove the flashMessages from the DOM, so the gray out would work.... Or do I miss a thing?

[moff]

@grauschnabel ok, I think I got it. You want to have a feature that grays out everything except flash messages while they are visible, right?

By the way, I've updated npm package for this module - you can customize timeout for flash messages now.

[grauschnabel]

oh, thanks, thats great, and yes, you got it. :) thanks for that going so fast... :+1:

[moff]

@grauschnabel I've implemented gray out feature - you can update to 1.0.1. Check README.md about it - you'll have to add CSS in your app's stylesheet to see that feature in action. Let me know if something is wrong.

[shahidullahkhankhattak]

how can i add title and body separately ? i've customized the box with css but i want to add title and buttons in it ! how can i do so?