Message boxes

These message boxes are extremely versatile. You can choose one of the presets, or style them to your liking! Pick your own colors, use gradients, rounded corners and much more. Check the details at the bottom of the page.

Alert

This is an alert message!
This is an alert message with a gradient!
This is an alert message with a gradient and rounded corners!

Succes

This is a success message!
This is a success message with a gradient!
This is a success message with a gradient and rounded corners!

Error

This is an error message!
This is an error message with a gradient!
This is an error message with a gradient and rounded corners!

Custom

This is a styled message with custom background and color!
This is a styled message with custom background, color and gradient!
This is a styled message with custom background, color, gradient and rounded corners!

 

Shortcode: [message] Your message goes here [/message]

Enables the creation of messages, mostly used to make important snippets stand out

Optional Parameters
  • title ( default: none )
    Add a title if needed
  • type ( default: custom )
    The message type you want to add. The formatting of the message box will vary depending on the message type
    Possible Values:
    • alert - Used to alert users to a specific bit of information
    • success - Used to alert users to a successful operation
    • alert - Used to show errors or problems
    • custom ( default ) - Allows the creation of custom colored messages
  • color ( default: none )
    Defines the text color inside the message box
    Possible Values:
    • color - Any valid CSS color
  • background ( default: none )
    Defines the background color of the message box
    Possible Values:
    • color - Any valid CSS color
  • border ( default: none )
    Defines the color of the message box border
    Possible Values:
    • color - Any valid CSS color
  • align ( default: left )
    Defines the alignment of the text inside the message box
    Possible Values:
    • left ( default )
    • right
    • center
  • gradient ( default: false )
    If set to true it creates a smooth gradient from your chosen background color
    Possible Values:
    • true
    • false ( default )
  • radius ( default: none )
    Set the border radius of your message
    Possible Values:
    • radius - Any valid CSS value
  • textshadow ( default: none )
    Set the text shadow of the content.
    Possible Values:
    • dark - If the text is light, set the text shadow to dark
    • light - If the text is dark, set the text shadow to light