Notification - EO Framework

Le module utilise la classe : wpeo-notification

La notification est invisible. Lorsqu’on lui ajoute la classe notification-active, elle apparaît en bas à droite de l’écran.
Vous trouverez ci-dessous les configuration HTML pour personnaliser l’apparence de la notification.

Notification simple

<div class="wpeo-notification">
	<div class="notification-title">Texte de la notification</div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Texte de la notification

Notification avec texte avancé

<div class="wpeo-notification">
	<div class="notification-title"><strong>Utilisateur</strong> ajouté dans la section. <a href="#">Voir</a></div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Utilisateur ajouté dans la section. Voir

Image

<div class="wpeo-notification">
	<img class="notification-thumbnail" src="url" />
	<div class="notification-title">Texte de la notification/div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Texte de la notification

Icone

<div class="wpeo-notification">
	<i class="notification-icon fas fa-heart"></i>
	<div class="notification-title">Texte de la notification/div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Texte de la notification

Couleurs

<div class="wpeo-notification notification-green">
	<i class="notification-icon far fa-check"></i>
	<div class="notification-title">C'est un franc succès !</div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

C'est un franc succès !

<div class="wpeo-notification notification-blue">
	<i class="notification-icon fas fa-info"></i>
	<div class="notification-title">Note informative</div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Note informative

<div class="wpeo-notification notification-orange">
	<i class="notification-icon far fa-exclamation-triangle"></i>
	<div class="notification-title">Attention, quelque chose cloche</div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Attention, quelque chose cloche

<div class="wpeo-notification notification-red">
	<i class="notification-icon far fa-times"></i>
	<div class="notification-title">Houston, nous avons un problème</div>
	<div class="notification-close"><i class="far fa-times"></i></div>
</div>

Houston, nous avons un problème