# Alert Messages

- Link: https://www.solmesz.com/alert-messages
- Published: 2013-05-24T20:55:29-03:00
- Author: Sol Mesz

# Alert Message Shortcode

These are perfect for displaying important information, alerts or messages to your
viewers. The options we include allow you to animate the box when it shows in the
viewport, use font awesome icons, customize the colors, accent colors, border sizes
and more.

Alert Message Content Goes Here

Click The X To Close Out The Box

**4 Default Message Types Or Build Your Own**

There are 4 default message types: general, error, success, notice.  And a “custom”
message type can be used to customize the elements.

Default General Message Type

Default Error Message Type

Default Success Message Type

Default Notice Message Type

**Customization Settings**

The shortcode options allow you to set background colors, accent colors (text/icon),
border size and color, and display a bottom shadow.

Fully Customizable Settings!

Customize The Background Color

Customize The Accent Colors

Control The Border Size

Control The Border Color

Subtle Box Shadow Setting

**Animation Settings**

Alert boxes can have CSS3 animations. This allow the box to animate when it comes
into the viewport to helps catch the viewers eye.

Bounce Animation Setting

Slide Animation Setting

Flash Animation Setting

Shake Animation Setting

**Complete Set of Options **

Every option and description included with the alert shortcode is listed below.

 * **type** – Can be one of these values: _general, error, success, notice, _or_
   custom._ Sets the type of alert message.
 * **accent_color** – _Custom _setting only. Accepts a hexcode _( #000000 ). _ Sets
   the border, text and icon color.
 * **background_color** – _Custom_ setting only. Accept a hexcode _( #000000 ). 
   _Sets the background color.
 * **border_size** – _Custom _setting only. Accepts a pixel value. For example, 
   _1px._ Sets border width.
 * **icon** – A [font awesome](http://fortawesome.github.io/Font-Awesome/icons/)
   icon value. For example, _fa-glass._
 * **box_shadow** – Can be one of these values: _yes,_ or _no_. This will show or
   hide a box shadow below the alert box.

 * **animation_type** – Can be one of these values: _none, __bounce, fade, flash,
   shake, _or_ slide._ Sets the animation to use on the shortcode.
 * **animation_direction** – Can be one of these values: _down, right, left, _or
   up. Sets the incoming direction for the animation.**
 * **animation_speed** – Accepts a numerical value from _.1_, which is the slowest,
   to _1_, which is the fastest.
 * **class** – Add a _custom class_ to the wrapping HTML element for further css
   customization.
 * **id** – Add a _custom id_ to the wrapping HTML element for further css customization.

# Join The 100,000+ Satisfied Avada Users!

[ BUY AVADA NOW!](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)