In this article, you’ll learn how to customize the appearance of the Spoiler shortcode. Follow 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

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

	/* 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;

}