Customizing the spoiler shortcode appearance

Table of contents

1. Using custom CSS class
2. Spoiler Title
   1. Default state
   2. Hover state
3. Spoiler Icon
4. Spoiler Content

Using custom CSS class

In this article, you’ll learn how to customize the appearance of the Spoiler shortcode. Follow the instructions below.

Add custom CSS class to your shortcode:

[su_spoiler class="my-custom-spoiler"] ... [/su_spoiler]

Then, navigate to Dashboard → Shortcodes → Settings and add any of the following snippets to the Custom CSS code field. You can play with the code below to adjust colors or to add some extra styling.

Spoiler Title

Default state

.su-spoiler.my-custom-spoiler > .su-spoiler-title {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ff00ff;

	/* Text Color */
	color: #ffffff;

}

Hover state

.su-spoiler.my-custom-spoiler > .su-spoiler-title:hover {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ff00ff;

	/* Text Color */
	color: #ffffff;

}

Spoiler Icon

.su-spoiler.my-custom-spoiler > .su-spoiler-title > .su-spoiler-icon {
	
	/* Icon Color */
	color: #00ff00;
	
}

Spoiler Content

.su-spoiler.my-custom-spoiler > .su-spoiler-content {

	/* Text Size */
	font-size: 21px;

	/* Background Color */
	background: #ffff00;

	/* Text Color */
	color: #000000;

}