24 Luglio 2021

Messages

Predefined message boxes

[alert-message close=”true”]Warning! This is a sample of the ‘message’ style message box shortcode. To use this style use the following shortcode:[/alert-message]

[toggle title=”Get the code” hidden=”true”]

[[alert-message]<strong>Warning!</strong> This is a sample of the ‘message’ style message box shortcode.[/alert-message]]

[/toggle]

 

[alert-info]Heads up! This is a sample of the ‘info’ style message box shortcode. To use this style use the following shortcode:[/alert-info]

[toggle title=”Get the code” hidden=”true”]

[[alert-info]<strong>Heads up!</strong> This is a sample of the ‘info’ style message box shortcode.[/alert-info]]

[/toggle]

 

[alert-success]Well done! This is a sample of the ‘success’ style message box shortcode. To use this style use the following shortcode:[/alert-success]

[toggle title=”Get the code” hidden=”true”]

[[alert-success]<strong>Well done!</strong> This is a sample of the ‘sucess’ style message box shortcode.[/alert-success]]

[/toggle]

 

[alert-error]Oh snap! This is a sample of the ‘error’ style message box shortcode. To use this style use the following shortcode:[/alert-error]

[toggle title=”Get the code” hidden=”true”]

[[alert-error]<strong>Oh snap!</strong> This is a sample of the ‘error’ style message box shortcode.[/alert-error]]

[/toggle]

 

Use with buttons

[alert-error]

Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

[button class=”btn-danger”]Take this action[/button][button]…or do this[/button][/alert-error]

[toggle title=”Get the code” hidden=”true”]

[[alert-error]This is a sample of the ‘error’ style message box shortcode.[/alert-error]]

[/toggle]

 

Costom messages

Default

[custom_message]Here’s an example an a custom message box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae orci elit, nec sollicitudin nisl. Praesent quis tellus non lectus auctor auctor.[/custom_message]

[toggle title=”Get the code” hidden=”true”]

[[custom_message]Here’s an example an a custom message box.[/custom_message]]

[/toggle]

 

Left alignment

[custom_message width=”50%” height=”100px” color=”#468847″ align=”left” bgcolor=”#dff0d8″ border=”#b94a48″]Here’s an example an a custom message box with left alignment. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae orci elit, nec sollicitudin nisl. Praesent quis tellus non lectus auctor auctor.[/custom_message]

 

Center alignment

[custom_message width=”50%” height=”100px” color=”#468847″ close=”true” align=”center” bgcolor=”#dff0d8″ border=”#b94a48″]Here’s an example an a custom message box with center alignment. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae orci elit, nec sollicitudin nisl. Praesent quis tellus non lectus auctor auctor.[/custom_message]

 

Right alignment

[custom_message width=”50%” height=”100px” color=”#468847″ align=”right” bgcolor=”#dff0d8″ border=”#b94a48″]Here’s an example an a custom message box with right alignment. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae orci elit, nec sollicitudin nisl. Praesent quis tellus non lectus auctor auctor.[/custom_message]

[divider type=”type_1″]

[alert-info]

List of possible attributes:

  • close – Show dismiss button? (true, false)
  • width – Custom message width
  • height – Custom message height
  • bgcolor – Custom message background color
  • color – Custom message text color
  • border – Custom message border color
  • align – Custom message alignment
[/alert-info]

[toggle title=”Get the code” hidden=”true”]

[[custom_message width=”50%” height=”100px” color=”#468847″ align=”right” bgcolor=”#dff0d8″ border=”#b94a48″]Here’s an example an a custom message box with right alignment.[/custom_message]]

[/toggle]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *