Message Box shortcode is one of shortcodes available in The Ken theme which you can take advantage of. In this article, we will explain how to display the Message Box Shortcode and configure the settings.
Displaying a Message Box Shortcode
To add the Message Box Shortcode to a page or post, follow the steps below:
Configuring the Message Box Settings
After you add the Message Box shortcode, a pop-up window will appear in which you can adjust the options before adding it to the page. The following is a detailed description of each option for the Message Box shortcode:
| Setting | Description |
|---|---|
| Type | There are 8 types of messages: Love Box, Hint Box, Solution Box, Alert Box, Confirm Box, Warning Box, Star Box, Build It Yourself. |
To see a live demo of the types we introduced please click here. Most of the following options will be available if you set the type of the message box to “Build It Yourself”.
| Setting | Description |
|---|---|
| Style | Use this option to set the message box border style. Available options are: Pointed Style, Rounded Style |
| Add Box Icon Class Name | Use this option to add a proper class name of the icon which you want to show in the message box. For more information about icons and their class names, please go to Main Dashboard Menu -> Tools -> Icons Library. If you don’t want your message box to have an icon, simply set this option to blank. |
| Box Color | Use this option to set the background color for the message box. |
| Border Color | Use this option to set the border color of the message box. |
| Content Color | Use this option to set the color of the description text, icon, and vertical divider of the message box. |
| Write Your Message in This Text Area | Use this option to add the main content text of the message box. This option contains the default WordPress editor which you can use to style your content. |
Adding an Extra Class Name
The Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
